2015年7月13日、 Official jQuery Blog に「jQuery 3.0 and jQuery Compat 3.0 Alpha Versions Released」が投稿され、 jQuery 3.0 Alpha 版が登場しました。
投稿内容を確認するといくつかの大きな変更がありましたので、ご紹介したいと思います。
jQuery 3.0 と jQuery Compat 3.0
jQuery 3.0 では2つのタイプがリリースされます。まず jQuery 3.0 は、 IE9 以上の IE を含む新しいブラウザをサポートしています。そして jQuery Compat 3.0 は、 IE8 のサポートを含むリリースとなります。
Microsoft 社が「 Internet Explorer サポートポリシー変更の重要なお知らせ」にて発表したとおり、2016年1月12日以降は IE8 のサポートが終了しますので、 これから jQuery 3.x を使用する場合は、 jQuery Compat 3.x ではなく、 jQuery 3.0 を選択すれば良いと考えます。
.show() メソッドの挙動が簡素化される
もう一つの大きな変更点として、 .show() メソッドの挙動の簡素化が挙げられます。
これまで非表示の要素に対して .show() メソッドを実行すると、ターゲット要素に直接 style="display: block;" を付与することで要素を表示していたのですが、 jQuery 3.0 では style="display: block;" を付与することはなくなり、ターゲット要素に指定されている style="display: none;" の指定を解除するような動作に変更されました。
この変更により、 CSS で予め display: none; としている場合は、 .show() メソッドを実行しても何も表示されなくなります。次のサンプルで確認してください。
- jQuery 3.x の場合
- jQuery 2.x の場合
この変更は、 ..slideDown() メソッドや .fadeIn() メソッド、 .slideToggle() メソッドなども同様に影響を受けます。スマートフォンでよく見られるメニューボタンを作成する場合等は注意が必要でしょう。
対策としては、下記の2点が挙げられます。
- CSS で、
.hide { display: none; }のような定義を行い、.removeClass("hide")や.addClass("hide")で表示・非表示の変更を行う。 - DOMContentLoaded 時などに非表示としたい要素に
.hide()メソッドを実行する。
サンプルとして、 jQuery 3.0 で .slideToggle() メソッドを使用して、要素の表示・非表示を行う例をご紹介します。 CSS では非表示となるスタイルを適用せず、 </body> の直前で jQuery の .hide() メソッドを使用して要素を非表示にしています。