相同类型的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找到所有直系子li元素,即但不是.#list<ul id="list"><li><div id="list"><ul><li>

• $("li", $("#list"))创建一个包含元素匹配的jQuery对象#list,然后创建一个包含li具有上下文的任何元素的新元素#list,即li内部的所有元素#list.它不是真的可读,所以不要使用它.

还有其他方法:

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

这两种情况都不能使用原生的速度优势,querySelectorAll所以除了更具可读性之外,它们也差不多$("li", $("#list"))