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

Question

例如，当我们使用$('div span')时，jQuery如何为我们做这样的搜索？

是否首先搜索span元素或div？

看来jQuery官方网站对这些东西没有解释;它只是告诉我们通过API可以使用哪些功能。

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

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

Answer 1

寻找最简单的地方就是直接从源头上读取。从jquery站点下载未压缩的源代码，并从原始资源中读取它执行的操作和顺序。

http://jquery.com/download/

Answer 2

由于@Juhana曾评论说，如果你想知道具体的方法jQuery使用基于其选择器来选择对象，看看GitHub的库：

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

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

http://jquery.com/download/

如果你只是想知道什么不同的选择可供选择，这里的jQuery他们提供的名单：

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

Answer 3

他们从右到左解析。

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

Answer 4

从广义上讲，你需要知道：

1. jQuery的读取选择from right to left。
2. Using an exact ID is fastest，然后使用确切的标签名称，因为它们使用优化的JavaScript本地方法。
3. 像:first-child这样的原生CSS选择器是faster than jQuery selectors就像:first。

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

Answer 5

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

1. 用的tagName =跨度
2. 经与祖先的任何元件的tagName = DIV

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