jQuery：使用 children() 比使用子选择器更有效答案

【问题标题】：jQuery: Is using children() more efficient than using child selectorjQuery：使用 children() 比使用子选择器更有效
【发布时间】：2014-10-15 13:38:10
【问题描述】：

我经常需要在没有与之关联的类或 ID 的 li 标签上设置 jQuery 事件，如下例所示：

    <div id="menu">
      <ul id="nav">
        <li>Nav Item 1</li>
        <li>Nav Item 2</li>
        <li>Nav Item 3</li>
        <li>Nav Item 4</li>
        <li>Nav Item 5</li>
      </ul>
    </div>

我的理解是 jQuery 选择从右到左读取，所以如果我要使用 $('#nav > li) jquery 选择器，它必须搜索所有 li 标签，然后评估 li 标签是否有一个带有 id 的父标签导航

假设此页面有 30 个 li 标签，但我只想选择示例中的 5 个，使用 $('#nav').children('li') 会更有效吗？我的逻辑是它会很快找到#nav ID，然后里面只有5个元素可以搜索。

我还有一个问题是如果#nav 有超过 30 个子元素，那么使用子选择器$('#nav > li') 会更有效吗？

提前致谢

【问题讨论】：

我不确定，但我的意见是：当你可以使用 CSS 时，使用 CSS。我实际上不知道 jQuery 如何理解#nav > li，但我总是尽可能使用 CSS 选择器。无论如何，这是个好问题。
如果有一种简单的方法可以评估 JavaScript 的（相对）效率，比如JS Perf，例如......
我怀疑你会注意到只有 30 个元素的区别。
找出：jsperf
如果您需要附加事件，请不要将它们附加到每个元素。问题解决了。 $("#nav").on("click","li", function() { console.log("this"); });

标签： javascript jquery performance jquery-selectors

【解决方案1】：

在尝试创建自定义选择器后，我惊讶地发现选择器确实是从右到左评估的。

这意味着$('#nav > li') 将首先在页面中找到所有LIs，然后过滤那些以保留任何在其直接父级中具有id="nav" 的内容。

$('#nav').children('li') 会更快，因为上述原因和您的假设（这是正确的）。

硬币的另一面是“你在乎吗？”。例如，如果您只对鼠标事件感兴趣，那么速度是由人工交互驱动的（每秒最多几次），而您的选择器方法中的速度差异只有在您可以执行 50,000 次时才会很明显每秒。基本上你通常不会在意，但你应该在效率方面犯错误:)

如果您只是在此之后添加鼠标事件，例如 click，使用附加到祖先元素的单个委托事件处理程序将非常有效：

例如

$("#nav").on('click', 'li', function() { 
    // DO SOMETHING HERE - "this" IS THE LI CLICKED 
});

这很有效，因为它的工作原理如下：

监听单击事件，将 DOM 冒泡到我们监听的单个 id="nav" 元素。
然后将 jQuery 选择器应用于气泡链中的元素。
然后将函数应用于导致事件的匹配元素。

这种技术也意味着它适用于动态添加的对象，因为它们只需要在事件时间（而不是事件注册时间）匹配选择器。

注意事项：

如果没有方便的祖先可用于定位，请使用 document 作为冒泡事件的默认值。
不要将“body”用于委托事件处理程序，因为样式可能会阻止body 接收冒泡鼠标事件（如果计算高度为零）。使用document 作为您的后备。

【讨论】：