jQuery 3.0時代のコーディングお作法 / show()/hide()編

jQuery 3.0時代のコーディングお作法 / show()/hide()編

本エントリーは「to-R JavaScript Advent Calendar 2015」1日目のエントリー、現在α版が公開されているjQuery 3.0時代のコーディングお作法について解説を行います。

あくまでα版を元にした情報になるので注意してください。

ブラウザサポートが変わる

jQuery 3.0以降では、jQuery 3.x系とjQuery compat 3.x系と２つのバージョンに分かれ進化をしていきます。それぞれ基本機能は同じでサポートするIEのバージョンが異なります。

jQuery 3.x系 - IE9〜
jQuery compat 3.x系 - IE8〜

IE8対応が必要な場合はjQuery compat 3.x系を対応が不要な場合はjQuery 3.x系を選択する必要があります。

IE7以下の対応をしなくては行けない可哀想な人はjQuery 3.0に移行できませんのでjQuery 1.x系を利用し続ける必要があります。

show/hideメソッドが大きく変わる

一番大きな変更点としてshow/hideメソッドが大きく変わります。今までより注意してコーディングする必要があります。

以下のサンプルを見てください。赤いdiv要素がありcloseボタンで閉じ、openボタンで開くという非常にシンプルなスクリプトです。

See the Pen jQuery 3.0 sample1 by Kazuma Nishihata (@to-r) on CodePen.

div要素の初期値にCSSでdisplay:noneを追加しましょう。以下のサンプルを確認してください。

See the Pen jQuery 3.0 sample2 by Kazuma Nishihata (@to-r) on CodePen.

openボタンで赤いdiv要素が開かなくなります。

これまでjQueryではshowメソッドが実行された際に可能な限り要素の状態を検知し表示するような仕組みが導入されていましたが、jQuery 3.0からはhide()の場合にstyle="display:none"を追加して、show()でstyle="display:none"を取り除くというシンプルな内容に変更されました。

そのため、CSSでdisplay:noneを指定した要素にshow()やfadeIn()/slideDown()などを指定してはいけません。

初期表示時に非表示にしたい場合は別にis-hideのようなclassを用意しておき、それの取り外しで制御する必要があります。

See the Pen jQuery 3.0 sample3 by Kazuma Nishihata (@to-r) on CodePen.

アニメーションを利用する場合は少し複雑でオープン時のアニメーションメソッドが実行後に非表示用のclassを取り除く必要があります。

$(".close").click(function(){
  $(".box").slideUp();
});
$(".open").click(function(){
   $(".box").slideDown().removeClass("is-hide");
});

See the Pen jQuery 3.0 sample4 by Kazuma Nishihata (@to-r) on CodePen.

ここらへんは十分に注意する必要がありそうです。

参考エントリー

jQuery基礎文法最速マスター
jQueryのtrigger()で名前空間を使う
jQueryのoff()を使いこなす
jQueryのclassセレクタに要素名を付ける
Re:jquery 1.xと2.x の違い、さらに動作を音速にするための設定

スポンサードリンク

«Adobe Creative Cloudが40%OFFだったので購入しました | メイン | jQuery 3.0時代のコーディングお作法 / 廃止メソッド編»