我想知道哪个选项更好，尤其是在速度方面：
$('#id tag')...
或者
$('#id').find('tag')...
此外，如果您更改id和/或更改tag为 aclass或类似的东西，同样的答案是否适用input:checked？
例如，哪个更好：$('#id input:checked')...或$('#id').find('input:checked');？
问问题
31528 次
6 回答
16
您可以根据 3 件事做出决定：
可读性
这与您的两个给定选择器没有太大区别。就我而言，我更喜欢这种$('#id').find('inner')语法，因为它更准确地描述了它实际在做什么。
可重用性
如果您的代码的其他部分使用相同的 id 选择器（或其上下文中的某些内容），您可以缓存选择器并重用它。我自己发现重构这样编写的代码更难$('#id inner')，因为您必须先解码 css 选择器，然后才能继续前进并找到可能的改进。
想象一下这两种情况不太复杂
$('#hello .class_name tag').doThis();
$('#hello .other_name input').doThat();
另一个案例
$('#hello').find('.class_name tag').doThis();
$('#hello').find('.other_name input').doThat();
我认为第二个示例对您大喊“缓存 id 选择器”，而第一个没有。
速度
性能总是一个好点，在这种情况下，带有 的 id 选择器find在大多数浏览器中做得更好，因为它首先建立上下文并且可以将降序选择器应用于更小的元素子集。
这是一个很好的性能测试，如果您想了解更多关于 jQuery 中的上下文与子集选择器性能的信息。id 的子集通常占主导地位。当然，您可以获得不同的结果，但在大多数情况下，它们确实如此。
因此，从我的角度来看，子集选择器是 3 到 0。
于 2012-07-16T11:22:34.893 回答
6
span这是我在元素下查找所有元素的测试用例 HTML #i：
<div id="i">
<span>testL1_1</span>
<span>testL1_2</span>
<div>
<span>testL2_1</span>
</div>
<ul>
<li>
<span>testL3_1</span>
</li>
</ul>
<div>
<div>
<div>
<div>
<span>testL5_1</span>
</div>
</div>
</div>
</div>
</div>
测试这三个 jQuery 选择器：
$("#i span"); // much slower
$("#i").find("span"); // FASTEST
$("span", "#i"); // second fastest
http://jsperf.com/jquery-sub-element-selection
我已经在 Google Chrome 和 Firefox 上运行它，它似乎.find()是最快的，紧随其后的是第三种情况，而第一种则慢得多。
于 2012-07-16T10:45:33.550 回答
2
此处的性能度量：:)==> http://jsperf.com/find-vs-descendant-selector
似乎descendant方式更快，但在歌剧中表现不佳，
在我看来，没关系:)
希望这能回答您的问题并在此处查看.find() 是否比基本后代选择方法更快？
于 2012-07-16T10:39:45.303 回答
2
在现代浏览器上，第一个似乎$("#id tag")比第二个 ( ) 慢得多；在这里测试，看下面的截图。IE7（缺少）以大致相同的速度运行它们。$("#id").find("tag")querySelectorAll
但有两个观察：
它实际上不太重要。如果您没有调试实际的已知性能问题，请不要担心。
综合基准总是值得怀疑的。如果您正在解决一个实际的、已知的性能问题，请分析该问题（您的实际选择器和您的实际标记）。
于 2012-07-16T10:44:27.610 回答
1
后代表现更好。检查此链接Jsperf。
- 如果嵌套元素太多。然后去找。这确实是一个很小的差异。
- 这只是您方便的编码方式。我更喜欢如果有太多的嵌套项目，那么我会去寻找，
于 2012-07-16T10:42:34.363 回答
1
于 2012-07-16T10:42:58.823 回答