jQuery选择器DOM遍历方向和效率

Posted 2023-03-05

【中文标题】jQuery选择器DOM遍历方向和效率

【英文标题】：jQuery selector DOM traversal direction and efficiency

【发布时间】：2011-06-11 06:21:06

【问题描述】：

多部分jQuery选择器的标准搜索方向是什么？

例如案例

$('#myTable tr.selected');

是先搜索#myTable，然后再搜索tr.selected 只在该表内吗？

还是第一次搜索页面上的所有tr.selected，第二次搜索检查每个父节点？

【参考方案1】：

你应该看this talk by John Resig on the subject。他说，与您的预期相反，选择器引擎将搜索tr.selected，然后查看祖先是否匹配#myTable。

【讨论】：

这是我相信 css 的工作方式，这就是我提出这个问题的原因。这表明通常情况下，您向选择器提供的信息越少，它的效率就越高。

我不确定。由于 jQuery 使用 Sizzle，而 Sizzle 使用querySelectorAll（如果可用），答案可能是“视情况而定”。不同的浏览器可能会做不同的事情并且可能有不同的优化。除非有一些标准明确指定用户代理在使用 querySelectorAll 时应该如何遍历 DOM。

我认为您上面的评论是正确的。在视频中（我还没有看过，但感谢发布它），John 一定是在谈论基于 javascript 的竞争选择器引擎之间的比较。对吗？

他确实提到了一些东西，但说实话细节有点模糊 - 我已经有一段时间没有看了 :)

【参考方案2】：

第一次搜索 #myTable，然后 tr.selected 搜索仅在该表内

首先它查找一个id为myTable的元素，然后查找带有selected类的'tr'标签的后代