相同类型的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");
});

Answer 1

• #list li找到相同的元素集，但在现代浏览器中，它可以将整个选择器传递给浏览器的选择器引擎，因此它可能更多更快。

• #list > li查找<{> 1}}的立即子项的所有li个元素，即#list但不<ul id="list"><li>

• <div id="list"><ul><li>创建一个包含匹配$("li", $("#list"))的元素的jQuery对象，然后创建一个包含具有上下文#list的所有li元素的新元素，即所有{位于#list内的{1}}元素。它不是真的可读，所以不要使用它。

---

还有其他方法：

• li等于#list
• $('#list').children('li')等于$('#list > li')

这两种情况都不能使用原生$('#list').find('li')的速度优势，因此除了更具可读性之外，它们与$('#list li')

一样糟糕

Answer 2

他们是不同的：

#list li指的是#list的后代的任何列表项。这与$("li", $("#list"))

相同

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

Answer 3

"#list li"和$("li", $("#list"))：#list中的所有li元素，包括儿童，孙子......

"#list > li"：只有#list的孩子们。