jquery - $ ('#id tag' ) 与 $ ('#id' ).find ('tag' ) - 哪个更可取？

Question

我想知道哪个选项更好，特别是在速度方面:

$('#id tag')...

或

$('#id').find('tag')...

此外，如果您将 id 和/或 tag 更改为 class 或类似 的内容，同样的答案是否适用>输入:选中？

例如，哪个更好: $('#id input:checked')... 或 $('#id').find('input:checked') ;？

Answer 1

您可以根据三件事做出决定:

可读性

这与您给定的两个选择器没有太大区别。就我而言，我更喜欢 $('#id').find('inner') 语法，因为它更准确地描述了它实际执行的操作。

可重用性

如果代码的其他部分使用相同的 id 选择器(或其上下文中的某些内容)，则可以缓存选择器并重用它。我自己发现重构像 $('#id inside') 这样编写的代码会更困难，因为您必须先解码 css 选择器，然后才能继续前进并找到可能的改进。

想象一下这两种情况，并不复杂

$('#hello .class_name tag').doThis();
$('#hello .other_name input').doThat();

还有另一种情况

$('#hello').find('.class_name tag').doThis();
$('#hello').find('.other_name input').doThat();

我认为第二个例子让你尖叫“缓存 id 选择器”，而第一个例子却没有。

速度

性能始终是一个优点，在这种情况下，带有 find 的 id 选择器在大多数浏览器中表现更好，因为它首先建立上下文，并且可以将降序选择器应用于较小的元素子集。

Here's a good performance test, if you want to know more about context-vs subset selectors performance in jQuery 。 id 的子集通常规则。当然，您可能会得到不同的结果，但在大多数情况下，都是如此。

所以，从我的角度来看，子集选择器是 3 到 0。