今さらな話題ですけど、 jQuery 3.2.0, 3.2.1 のリリースノートを読んで、 自分なりにまとめました。

カスタムCSSプロパティ(CSS Variables)のサポートや.contents()の <template>要素サポートのような新機能のほか、いくつかの機能を廃止予定にしたり バグ修正が施されました。 箇条書きを含めた簡単なまとめになります。

誤訳による間違いなどもあると思われますので、 読まれる際はご注意を。

新機能

カスタムCSSプロパティのサポート

カスタムCSSプロパティ(CSS Variables)とは、CSS に変数のように使える プロパティを定義できる機能です。接頭辞--を付けることで定義し、 var()で呼び出します。

:root {
/* いわゆる変数のスコープは自分を含む子孫要素になるので、
   ルートに定義すると文書全体がスコープの範囲になる */
    --aa-color: black;
    --aa-font-size: 16px;
}
.aa {
    color: var(--aa-color, black); /* 第2引数はデフォルト値 */
    font-size: var(--aa-font-size);
}

JavaScript で扱う場合、値の取得にはgetPropertyValue、 指定にはsetPropertyを使う必要があったのですが、

console.log(
  getComputedStyle( document.documentElement ).getPropertyValue('--aa-color')
); // black
document.documentElement.style.setProperty('--aa-color', 'red');

これを.css()で扱えるようになりました。

<style>
    .test {
       --prop1:val1;
       }
</style>

var div1 = jQuery( "<div>" );
var div2 = jQuery( "<div>" ).addClass( "test" );
div1.css( "--color", "blue" );
console.log( div1.css( "--color" ) ); // blue
console.log( div2.css( "--prop1" ) ); // val1

.contents()が<template>要素をサポート

.contents()メソッドが<template>要素の中身を返すことができるようになりました。

<template>はテンプレート(ひな型)として利用するために作られた要素です。 <template>の中身(コンテンツ)はドキュメント内に存在しないものとして扱われます。 描画されず、スクリプトは動作せず、画像はロードされません。 document.inportNode()で複製して利用したりする時に有効化されます。

<template>の中身を取得するには、 今までは例えば$( $("template")[0].content.childNodes )のように .contentプロパティ経由でアクセスする必要がありましたが、これからは $("template").contents()で取得できるようになりました。

<template id='template'>
    <div>
        <span>Web Component</span>
    </div>
    <div></div>
    <div></div>
</template>

var contents = jQuery( "#template" ).contents();
console.log( contents.length ); // 7
console.log( contents.find( "span" ).text() ); // "Web Component"

var div = jQuery( "<div>" );
div.append( jQuery( jQuery.map( contents, function( node ) {
                return document.importNode( node, true );
            } ) )
).appendTo( "body" );
contents = div.contents();
console.log( contents.length ); // 7
console.log( contents.filter( "div" ).length ); // 3

slim ビルドに deprecated モジュールが含まれる

slim ビルドに deprecated モジュールを含めることにしたそうです。 そのため、ごくわずかに容量が増えます。 deprecated な機能を削除するタイミングはjQuery のメインのビルドと 歩調を合わせた方が良いと判断したためだそうです。

いくつかの機能を廃止予定に

• jQuery.hodeReady
  jQuery 3.2.0 で deprecated モジュールに移動されましたが、その中で置き場所を 間違えていたらしく、3.2.1 で修正されました。
• jQuery.nodeName
  これは文書化されてないものだがお知らせしたそうです
• jQuery.isArray
Array.isArray()があるので。

その他

• フラグ"memory"を指定したjQuery.Callbackオブジェクトで.lock()を 実行してロックしても.add()で解除されてしまうバグを修正
• jQuery.when()を引数無しで実行した時、引数無しで resolve されるはずだったが、 undefinedが渡されて引数が一つになっている問題を修正
• jQuery のバグ修正は 1.x と 2.x はサポートせず、3.x と書くと jQuery 4 が 出たときに文書が型落ちになり手間がかかるので 「最新バージョンの jQuery」しかサポートしないという表現にする
• 最近の Callback のバグ修正によって明らかになった問題の修正 (2つの issue の内1つ #3503 はまだ修正できていない)。
• table に要素を追加する時、(歴史的な理由から行っている) tbody の検索を table の子要素に限定するように修正
• 内部で使ってたgetWindow()を、使用回数がわずかだったので解体して削除
• サイズが0の要素の場合、.offset()が width/height も含んでしまっている オブジェクトを返していたので、オフセットのみを含むオブジェクトを返すように修正 (以前は返していた)。
• radio ボタンの click イベントを発火させると、そのイベントハンドラが ボタンの checked の更新前に実行されてしまう問題を修正したところ(3.2.0)、 radio ボタン要素に対して click イベントをtrigger()で発火する際に 追加の引数が渡されない問題が発生したので差し戻し(3.2.1)。

• .width()や.css("width")(heightも含む)の返す値が CSS の transform の影響を受ける問題を修正(3.2.0)したところ、 デフォルトで display:inline な要素の width(height) の値を 正しく取得出来なくなったのでこれを修正(3.2.1)

  非置換のインライン要素の場合、getComputedStyleが auto を返すので この場合だけoffsetWidth(Height)を使うようになり、この場合だけ 小数点以下の値が取れなくなります。

  getBoundingClientRectでは transforms を考慮に入れる必要があり、 getComputedStyleでは非置換のインライン要素の幅が取得できず、 offsetWidthでは少数点以下の値が取れない、と苦労しているようです。

• アニメーションでcompleteに同じアニメーションを指定した場合に 循環実行となってしまう問題を修正、ついでにアニメーションの処理内容を 修正、改良(setIntervalでの手法をsetTimeoutでの手法に変更して requestAnimationFrameでの手法と一貫性を持たせ、 アニメーション停止に関してcancelAnimationFrameや clearIntervalの使用を止める)。