javascript - jQuery:使用children()比使用子选择器更有效

Question

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

    <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 为 nav 的父标签。

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

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

提前致谢

Answer 1

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

这意味着$('#nav > li')首先会找到所有LI页面中的 s，然后过滤这些内容以保留任何具有 id="nav" 的内容在他们的直系 parent 中。

$('#nav').children('li')由于上述原因和您的假设(这是正确的)，速度会更快。

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

如果您在此之后添加鼠标事件，请说 click ，使用附加到祖先元素的单个委托(delegate)事件处理程序将非常有效:

例如

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

这是高效的，因为它的工作原理如下:

• 监听将 DOM 向上冒泡到单个 id="nav" 的点击事件我们听的元素。
• 然后对气泡链中的元素应用 jQuery 选择器。
• 然后将函数应用于引发事件的匹配元素。

此技术还意味着它适用于动态添加的对象，因为它们只需要在事件时(而不是事件注册时)匹配选择器。

注释:

• 如果没有方便的祖先可供定位，请使用 document作为冒泡事件的默认值。
• 不要对委托(delegate)事件处理程序使用“body”，因为样式可能会停止body接收冒泡鼠标事件(如果计算的高度为零)。使用document作为你的后备。