jQuery 速度 : which one is faster, {ul#parent li} 或 {li.child}？

Question

只是好奇是否有既定的“最佳方法”来定位父元素内的子元素。

例如，如果我想在父元素的子元素上创建点击事件，应该首选哪一个？

a) 给出父元素和 id 并执行以下操作:

$('ul#parent li').click(function() {});

b) 或者，给每个子级一个类名并直接定位它们:

$('li.child').click(function() {});

我这么问是因为我试图在一个较大的应用程序中发挥出我能获得的每一点性能。从逻辑上讲，定位 id 比定位类名更快，但是父 > 子结构是否会抵消这一优势并证明按类名定位是合理的？

感谢您的见解。

Answer 1

这将是最快的选择:

$('ul#parent li').click(function() {});

如果可能，始终从 ID 选择器下降。

但是，如果您有很多 <li>元素，使用更便宜 .delegate() ，像这样:

$('#parent').delegate('li', 'click', function() { });

与 .delegate() 您正在附加一个事件处理程序而不是n (<li> 的数量)事件处理程序，每个 <li> 一个。它的工作原理是监听 click冒泡到 <ul> ，如果启动时间让你很烦恼，这是一个更好的选择。这是绑定(bind)大量处理程序的启动时间与泡沫成本(这是一个非常非常小的成本)的权衡。如果您有很多元素，这几乎总是是一个更好的整体选择。