jQueryについて 参考例2.0 jQueryで要素を選択する_基礎知識

jQuery クックブック (O'Reilly 2009) 第 2 章 jQuery による要素の選択、2.0 はじめにから翻訳

jQuery の中核はセレクター エンジンであり、名前、属性、ステータスなどによってドキュメントから要素をフィルターで除外するために使用されます。 CSS が広く使用されているため、jQuery で CSS セレクター構文を使用することが自然な選択になっています。 CSS1 ～ 3 仕様のほとんどのセレクターをサポートすることに加えて、jQuery はいくつかの特別な状態に基づいて要素を選択するための多くのカスタム セレクターも追加しました。同時に、独自のセレクターを作成することもできます。

ドキュメント内の要素を見つける最も簡単な方法は、次のような jQuery ラッパー関数と CSS セレクターを使用することです。

<span class="pln">jQuery</span><span class="pun">(</span><span class="str">'#content p a'</span><span class="pun">);</span><span class="pln">
</span><span style="COLOR: #333399" class="com">//选择所有#content元素内的p元素中的a元素</span>

要素を選択した後、これらの要素に対して jQuery メソッドを呼び出すことができます。たとえば、選択したクラス属性を選択したすべてのリンク要素に追加します:

<span class="pln">jQuery</span><span class="pun">(</span><span class="str">'#content p a'</span><span class="pun">).</span><span class="pln">addClass</span><span class="pun">(</span><span class="str">'selected'</span><span class="pun">);</span>

jQuery には、next()、prev()、parent() など、DOM ツリーを走査して要素を選択するためのメソッドが多数用意されています。これらのメソッドは、選択された要素のセットをフィルターするための唯一の引数としてセレクター式を受け入れます。したがって、jQuery(...) に加えて、CSS セレクターも多くの場所で使用されます。

セレクターを構築するとき、パフォーマンスを向上させるために、セレクターの記述を可能な限り簡素化するというルールに従うことができます。セレクター文字列が複雑になればなるほど、jQuery の処理にかかる時間は長くなります。 jQuery は内部でブラウザのネイティブ DOM メソッドを使用して要素を選択します。したがって、要素を選択するためにセレクターを直接使用することは、抽象カプセル化の結果にすぎません。セレクターを直接使用することに問題はありませんが、作成しているコードのパフォーマンスを理解することが重要です。以下はセレクターの過剰使用の例です:

<span class="pln">jQuery</span><span class="pun">(</span><span class="str">'body div#wrapper div#content'</span><span class="pun">);</span>

位置決めがより正確になったからといって、コードの実行が速くなるわけではありません。上記のセレクターは次のように書き換えることができます:

<span class="pln">jQuery</span><span class="pun">(</span><span class="str">'#content'</span><span class="pun">);</span>

前の例と比較すると、このコードは同じことを行いますが、パフォーマンスのオーバーヘッドを大幅に節約します。セレクターのコンテキストを指定することでパフォーマンスをさらに向上できる場合があることは注目に値します。