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具有上下文的任何元素#list，即内部的所有li元素#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": 只有 li #list 的孩子。

3 回答 3