より効率的なjQueryセレクターのための5つのヒント

jQueryのコアはクエリにあります。 CSSセレクターの構文を使用して、これらの要素コレクションでDOM要素を見つけ、メソッドを実行します。 jQueryは、ネイティブブラウザーAPIメソッドを使用してDOMコレクションを取得します。新しいブラウザは、getElementsByClassName、querySelector、querySelectorAllをサポートしています。これは、CSS構文を解析できます。ただし、古いブラウザはgetElementByIdとgetElementByTagNameのみを提供します。最悪の場合、JQueryのSizzleエンジンは、セレクターの文字列を解析し、一致する要素を探す必要があります。 jqueryセレクターを最適化するための5つのヒントを次に示します。

1. IDセレクターを使用することをお勧めします

HTML ID属性は各ページで一意であり、古いブラウザでさえも個々の要素を非常に迅速に見つけることができます：

$("#myelement");

2. クラスセレクターのみを使用しないでください

次のクラスセレクターは、最新のブラウザで非常に高速に実行されます：

$(".myclass");

しかし、IE6/7やFirefox 2などの古いブラウザでは、jQueryがページ上のすべての要素をチェックして、「MyClass」が適用されているかどうかを判断する必要があります。タグ名で資格を取得すると、セレクターがより効率的になります。

jQueryは、検索をDiv要素に制限できるようになりました。

$("div.myclass");

セレクターをシンプルに保ちます
過度に複雑なCSSセレクターを避けてください。 HTMLドキュメントが非常に複雑でない限り、3つまたは3つの予選を必要とすることはまれです。次の複雑なセレクターを検討してください

は一意でなければならないので、セレクターは次のように簡素化できます。

$("body #page:first-child article.main p#intro em");

p#intro

セレクターの特異性を左から右に改善します

$("p#intro em");

4. jQueryのセレクターエンジンの仕組みを理解することは便利です。それは最後のセレクターから動作するので、古いブラウザでは、次のようなクエリです。
すべての要素を配列にロードします。次に、各ノードの親ノードを介して上向きになり、見つからないノードを拒否します。ページに何百もの

タグがある場合、クエリは特に非効率的になります。ドキュメントに応じて、最初に最も適格なセレクターを取得することにより、クエリを最適化できます。その後、サブセレクターの出発点として使用できます。

$("p#intro em");

セレクターの重複を避けますem p#intro em

同じセレクターを2回使用することはまれです。次のコードは、各Pタグを3回選択します。

$("em", $("p#intro")); // 或
$("p#intro").find("em");

jqueryは、同じコレクションに複数の方法を適用できます。したがって、同じコードを書き換えて、単一のセレクターにのみ適用できます。
5. 同じ要素を複数回使用する必要がある場合は、jqueryオブジェクトを変数でキャッシュする必要があります。

   $("#myelement");

   標準DOMコレクションとは異なり、jQueryコレクションは動的ではなく、ドキュメントから段落タグが追加または削除された場合、オブジェクトは更新されません。この制限を解決し、DOMコレクションを作成し、必要に応じてjquery関数に渡すことができます。

   $(".myclass");

   他のjQueryセレクターの最適化のヒントはありますか？

   効率的なjQueryセレクター（FAQ） に関するよくある質問

   （FAQパーツは、元のFAQコンテンツと高度に複製されているため、ここでは省略されています。疑似オリジナリ性は難しく、長すぎます。必要に応じて、一部のFAQの問題はオプションで保持または書き直すことができます。

以上がより効率的なjQueryセレクターのための5つのヒントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。