如何了解jQuery选择器如何在幕后工作？

Question

例如，当我们使用$('div span')时，jQuery如何对我们进行搜索？

首先搜索span元素还是div？

似乎jQuery官方网站没有解释这些事情;它只是向我们展示通过API提供的功能。

我想知道每种类型的jQuery选择器是如何实现的，所以我可以选择要使用的最佳选择器。

你知道我在哪里可以得到这样的信息吗？

Answer 1

从广义上讲，您需要了解的内容：

1. jQuery读取选择器from right to left。
2. Using an exact ID is fastest，然后使用精确的标记名称，因为它们使用优化的JavaScript本机方法。
3. :first-child等原生CSS选择器与:first类似faster than jQuery selectors。

你也可以阅读official Sizzle documentation，但它并没有真正讨论优化技术。

Answer 2

首先搜索span元素。它将选择器解析为：

1. tagName = span
的任何元素
2. 拥有tagName = div
的祖先

对于第一部分，它可以使用getElementsByTagName方法查找所有span元素，然后它必须循环遍历每个元素的祖先以查找div元素。

Answer 3

最简单的地方是直接从源头阅读。从jquery站点下载未经过修改的源代码，并从原始源中读取它的作用和顺序。

http://jquery.com/download/

Answer 4

正如@Juhana所评论的那样，如果你想知道jQuery基于其选择器选择对象的具体方法，请查看github存储库：

https://github.com/jquery/jquery/

或者，查看未压缩的jQuery下载中可用的源代码：

http://jquery.com/download/

如果你只是想知道哪些不同的选择器可用，jQuery在这里提供了一个列表：

http://api.jquery.com/category/selectors/

Answer 5

他们从右到左解析。

请参阅http://csswizardry.com/2011/09/writing-efficient-css-selectors/和Why do browsers match CSS selectors from right to left?