jQueryリファレンスインスタンス2.0についてjQueryで要素を選択する

2013 ワード

jQuery Cookbook(O'Reilly 2009)Chapter 2 Selecting Elements with jQuery,2.0 Introduction
jQueryの核心はそのセレクタエンジンであり、ドキュメントから名前、属性、状態などを通じて要素をフィルタリングする役割を果たす.CSSの広範な使用のため、jQueryの中でCSSのセレクタの文法を採用してとても自然な選択になりました.ほとんどのCSS 1-3仕様のセレクタをサポートするほか、jQueryはいくつかの特殊な状態に基づいて要素を選択するために多くのカスタムセレクタを追加した.同時に、セレクタを自分で作成することもできます.
ドキュメント内の要素または要素を特定する最も簡単な方法は、jQueryパッケージ関数とCSSセレクタを使用することです.たとえば、次のようになります.
jQuery('#content p a');
//    #content    p    a  

要素を選択すると、これらの要素でjQueryメソッドを呼び出すことができます.たとえば、選択したすべてのリンク要素にselectedのclassプロパティを追加します.
jQuery('#content p a').addClass('selected');

jQueryは、next()、prev()、parent()などの要素の選択を支援するDOMツリーを巡る多くの方法を提供します.これらのメソッドは、選択した要素セットをフィルタするために、セレクタ式を一意のパラメータとして受け入れます.そのため、CSSセレクタはjQuery(…)の他にも多くの場所で使用されます.
セレクタを構築する際、そのパフォーマンスを向上させるために、セレクタの作成をできるだけ簡略化する法則に従うことができます.セレクタ文字列が複雑であればあるほど、jQueryが処理する時間も長くなります.jQuery内部ではブラウザオリジナルのDOMメソッドを用いて要素を選択するため,直接セレクタを用いて要素を選択することは抽象的なカプセル化後の結果にすぎない.セレクタを直接使用すること自体は妥当ではありませんが、書かれたコードの実行性能を理解することが重要です.セレクタの過剰使用の例を次に示します.
jQuery('body div#wrapper div#content');

より正確な位置決めは、コードの実行速度がより速いことを意味しません.上記のセレクタは、次のように書き換えることができます.
jQuery('#content');

前の例と比較して、このコードの役割は同じですが、パフォーマンスのオーバーヘッドを大幅に削減します.セレクタのコンテキストバックグラウンドを指定することで、パフォーマンスをさらに向上させることができる場合があることに注意してください.