jquery - 同じ種類の jQuery 選択の違い

Question

jQuery 選択のさまざまな方法に従うことの違いは何ですか。私には、それらは同じパフォーマンスコストで同じことを行うさまざまな方法のようです:

$("#list li").hover(function () {
                $(this).addClass("red");
}, function (){
        $(this).removeClass("red");
});

大なり記号の場合:

$("#list > li").hover(function () {
                $(this).addClass("red");
}, function (){
        $(this).removeClass("red");
});

コンテキストで今すぐ追加:

$("li", $("#list")).hover(function () {
                $(this).addClass("red");
}, function (){
        $(this).removeClass("red");
});

score 5 · Accepted Answer

#list li同じ要素のセットを見つけますが、最新のブラウザーでは、セレクター全体をブラウザーのセレクターエンジンに渡すことができるため、はるかに高速になる可能性があります。
#list > liの直接の子であるすべてのli要素を検索します。つまり、ではありません。#list<ul id="list"><li><div id="list"><ul><li>
$("li", $("#list"))一致する要素を含む jQuery オブジェクトを作成し、コンテキストを持つ任意の要素(つまり、内部にあるすべての要素)#listを含む新しい要素を作成します。実際には読めないので、使用しないでください。li#listli#list

他にも次の方法があります。

どちらの場合もネイティブの速度の利点を利用できないため、querySelectorAll読みやすくなるだけでなく、$("li", $("#list"))

score 1 · Accepted Answer

それらは違う：

#list liの子孫である任意のリスト項目を参照します#list。これは$("li", $("#list"))

#list > liは、の直接の子 (孫などではない) である任意のリスト要素を参照します#list。

score 0 · Accepted Answer

"#list li"and $("li", $("#list")): 子、孫を含む #list 内のすべての li 要素...

"#list > li": #list の li 子のみ。

3 に答える 3