如何了解 jQuery 选择器在幕后的工作原理？
Posted
技术标签:
【中文标题】如何了解 jQuery 选择器在幕后的工作原理？【英文标题】：How can I learn how jQuery selectors work behind the scenes? 【发布时间】：2012-07-22 19:42:14 【问题描述】：例如，当我们使用$('div span')时，jQuery是如何为我们做这样的搜索的呢？
它是先搜索span 元素还是先搜索div？
好像jQuery官网对这些东西没有解释；它只是向我们展示了通过 API 可以使用哪些功能。
我想知道每种类型的 jQuery 选择器是如何实现的，所以我可以选择最好的选择器来使用。
你知道我在哪里可以得到这些信息吗？
【问题讨论】：
确定的答案在这里：github.com/jquery/jquery 查看jQueru源代码code.jquery.com/jquery-latest.js 而在特定选择器的情况下，确定的答案往往在这里：github.com/jquery/sizzle 另一方面，如果您根据搜索效率最高的选择器来选择选择器，那么您可能在进行完全不相关的微优化。 【参考方案1】：概括地说，你需要知道的：
-
jQuery 读取选择器from right to left。
Using an exact ID is fastest，后跟使用准确的标签名称，因为它们使用优化的 javascript 原生方法。
像
:first-child 这样的原生 CSS 选择器是像 :first 这样的 faster than jQuery selectors。
您也可以阅读official Sizzle documentation，但它并没有真正讨论优化技术。
【讨论】：
【参考方案2】：它首先搜索span 元素。它将选择器解析为：
-
tagName = span 的任何元素
拥有一个 tagName = div 的祖先
对于第一部分，它可以使用getElementsByTagName 方法查找所有span 元素，然后它必须遍历每个元素的祖先以查找div 元素。
【讨论】：
【参考方案3】：寻找最简单的地方是直接从源头阅读。从 jquery 站点下载 uncompresserd 源并从原始源中读取它的作用和顺序。
http://jquery.com/download/
【讨论】：
【参考方案4】：正如@Juhana 所评论的那样，如果你想知道 jQuery 用于根据其选择器选择对象的具体方法，请查看 github 存储库：
https://github.com/jquery/jquery/
或者，查看未压缩的 jQuery 下载中提供的源代码：
http://jquery.com/download/
如果你只是想知道有哪些不同的选择器可供你使用，jQuery 在这里提供了它们的列表：
http://api.jquery.com/category/selectors/
【讨论】：
【参考方案5】：它们是从右到左解析的。
见http://csswizardry.com/2011/09/writing-efficient-css-selectors/和Why do browsers match CSS selectors from right to left?
【讨论】：
以上是关于如何了解 jQuery 选择器在幕后的工作原理？的主要内容，如果未能解决你的问题，请参考以下文章