セレクタ・メソッド・イベント - まとめ

jQuery高速化

  • Webサイトのパフォーマンスを重視するために、古いブラウザでは「1.x系」モダンブラウザでは「2.x系」とインクルードするjQueryファイルを分けて記述します
<!--[if lt IE 9]>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<!--<![endif]-->
1.x系のみで対応
  • 古いブラウザに対応することが決まっている場合は、1.x系のみの記述でよいでしょう
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

セレクタ（どの箇所に対して）

ClassよりもIDを指定する
  • idで指定した方が、classで指定するよりも3倍速いことが実証されています
セレクタはシンプルに書く
  • 継承のルートをすべて記述しない
  • セレクタを指定する時はターゲットまで最小限の指定をする
HTML要素で指定
  • 特定要素の指定は、子孫セレクタよりも子セレクタで指定する
  • 子孫セレクタは、子要素（子要素の子要素：孫要素も対象）すべてを対象
  • 子セレクタは、直下の子要素のみを対象
  • 子孫セレクタで設定する必要がある場合は、全ての継承を記述しないでシンプルに記述する
同じセレクタは変数化する
  • その都度同じセレクタを指定すると、jQueryは、毎回そ処理を行います
  • その分遅くなるので、一度指定したセレクタを変数に入れて再利用します

メソッド（何をさせる）

  • CSSで記述できるものはCSSで記述する
  • CSSではできない動きを実現するのがメソッド
  • つまり、jQueryを使うということは「メソッドをどう記述するか」につきます
DOMの操作は最小限に抑える
  • DOMの操作は重いのでタグのスタイルを変更したい場合は、直接操作するのではなく、スタイルシートにスタイルを記述してクラスを変えるようにします
連続処理はメソッドチェーンを使う
  • 「同じセレクタは変数化する」処理は、メソッドチェーンを使って処理を実行をすることもできます
  • ただし、変数化するよりも必ず処理速度が早いわけではありません

イベント（どのタイミングで）

  • 任意のタイミングでせってしたセレクタに対してメソッドを実行することが可能になります
  • onメソッド（イベント）が最も重要