Javascript jQuery选择器$（'fooa'）是如何计算的？

作为jQuery代码的一个示例，我读到表达式$'fooa'；行为如下：

找到页面中的每个a，然后过滤内部的一个foo

而且它看起来效率不高

---

对吗？如果是，我们应该如何更好地做到这一点？

与其使用内部foo元素进行过滤，只需将一个类附加到元素，并获得一个类为$a.class；的元素；。这将更加有效。

这是正确的-Sizzle jQuery的选择器引擎的行为与此相同。CSS和Sizzle选择器都是，所以foo a会找到所有的a节点，然后按从foo派生的节点过滤这些节点

您可以通过确保叶选择器具有高度的特异性来改进这一点，通常是通过给它们一个类或ID

我们应该如何更好地做到这一点

使用jQuery中的上下文参数

$('a', '#foo');

现在jQuery将搜索id为foo的元素上下文中的所有锚

在您的查询中，省略时，上下文默认为document：

$('#foo a'); == $('#foo a', document); 

在这种情况下，您的查询确实没有效率

---

您可以看一看。

此示例将检索名为foo的元素中的所有锚元素a，以查找页面中的每个a，然后根据需要筛选内部foo。您应该选择一个foo

---

这将检索元素中的所有foo元素。

您可以使用find对选择器顺序进行更精细的控制：

$('#foo').find('a');

当然，使用更复杂的选择器，您可以在其中进行链式查找和筛选，这会给人留下更深刻的印象

对于记录$'foo'。查找'a'==$'a'，'foo'

[更新]好的，我后来意识到这正是你的链接所说的

jQuery选择器引擎Sizzle去年已经过重构，您可以在这里找到详细的解释：

---

虽然Sizzle确实是一个从右到左的引擎，这与css的解释方式相同，但您的示例中的特定选择器不会选择页面上的所有锚元素，然后过滤它们的父元素以匹配foo的id。Sizzle实际上优化了任何以ID开头的选择器，并将其用作整个选择的上下文，而不是使用文档。换句话说，您选择的选择器基本上转换为：

document.getElementById("foo").getElementsByTagName("a")

真的，这个选择器一点也不坏

但是，考虑到jQuery需要做的其他事情，包括在元素上循环以将它们合并到jQuery实例上，jQueryfoo.finda将始终是最快的，因为jQuery为仅id选择器实现了一个jQuery对象创建快捷方式，然后从foo执行根目录查找

换句话说，在执行sizzlefoa和Sizzlea、document.getElementByIdfoo和jQueryfoo.find时，Sizzle本身并没有太大的不同。。。由于jQuery自己的ID快捷方式，速度会更快

---

顺便说一下，我对Sizzle的评论是假设querySelectorAll没有被使用。如果是，Sizzle只会将其传递给qsa，这仍然不如使用jQuery的ID快捷方式快。

您自己再试试：

与平面DOM 1和2似乎没有太大区别，但嵌套DOM的性能差异更大

---

另外请注意，一些测试用例没有选择正确的元素，例如$'.a'vs$'.a'，上下文，但我将它们从原始测试中保留下来只是为了比较。

@未定义请看这个：谢天谢地，您链接到的帖子在其注释中已被更正。Sizzle可能会，但是。。。在Chrome上，显示$'id span'比$'span'快10倍，我认为这与所描述的算法不一致。这可能是因为jQuery在span情况下每次运行都必须在测试运行时装饰多个DOM节点，而在id span情况下只装饰一个。查看这个jsperf——当您将LTR与RTL进行比较时，RTL更快。还值得注意的是，您可以通过使用指定的JQuery函数（如find或children）绕过sizzle引擎。因此，您可以使用$foo代替$foo。finda@Matanya-事实上，Yury的jsperf测试用例就是这方面的一个出色证明。那样快多了@尤里塔拉班科：谢谢你，这很有启发性。foo几乎是次优的。你只能有一个id=foo的元素。我不明白为什么这个答案会得到这么多反对票。我认为H先生误解了这个问题，但这个问题措词不当。过滤器内部的foo很难成为标准语法。您还可以在jsperf.com上对其进行度量->一些示例您应该始终将DOM元素作为上下文参数传递，而不是选择器。

document.getElementById("foo").getElementsByTagName("a")