同類jQuery選擇之間的區別

-1

以下不同jQuery選擇方式之間的區別是什麼？對我來說，他們似乎是在做同樣的事情具有相同的性能成本不同的方式：同類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"); 
});

2012-07-10 baltoro

這是jQuery，而不是CSS。性能幾乎從未如此。 – BoltClock 2012-07-10 11:53:20

問題本身*是*關於CSS，但表示它的代碼確實是jQuery。 – Timotei 2012-07-10 11:54:58

@Timotei：不是。這裏沒有涉及到的CSS，只有一個選擇器語法以及一些DOM查詢和事件綁定。 – BoltClock 2012-07-10 11:58:08

#list li發現同一組的元素，但在一個現代的瀏覽器，它可以通過整個選擇瀏覽器的選擇引擎，所以它可能是多更快。
#list > li發現所有li元素是立即兒童#list，即<ul id="list"><li>但不<div id="list"><ul><li>。
$("li", $("#list"))創建包含匹配#list元件一個jQuery對象，然後生成包含任何li元件與上下文#list一個新的元件，即，所有li元件是內部#list。它不太可讀，所以不要使用它。

也有其他的方法：

這兩種情況下是不能使用的原生querySelectorAll速度優勢，因此，除了更加真實dable他們差不多$("li", $("#list"))

2012-07-10 11:56:06 ThiefMaster

感謝您的回覆。我已經閱讀過使用類似'$（「li」，$（「＃list」））的ID的上下文，'現在更快地創建一個代碼li只會在#list的上下文中進行搜索，所以我認爲它應該更快比你提到的另外兩種方式。我同意你提到的可讀性問題。 – baltoro 2012-07-10 12:15:02

jQuery和瀏覽器的本機選擇器引擎都會正確地處理以'＃id'開始的選擇器，即將選擇器的其餘部分僅應用於具有給定ID的元素。 – ThiefMaster 2012-07-10 12:16:19

它們不同：

#list li指的是#list的後裔的任何列表項。這與$("li", $("#list"))

#list > li是指任何列表元素，它是#list的直接子元素（而不是孫子等等）。

2012-07-10 11:55:39 feeela

我不認爲最後的陳述是正確的。 – BoltClock 2012-07-10 11:57:10

是的，你的權利 - 我已經編輯了答案。 – feeela 2012-07-10 11:58:59

"#list li"和$("li", $("#list"))：內#list，包括子女，孫子女所有li元素...

"#list > li"：只有#list李兒童。

2012-07-10 11:56:06

回答