Home >Web Front-end >Front-end Q&A >What is jquery sizzle
jquery中sizzle是一个JavaScript css选择器引擎;jquery1.3开始用sizzle,使用与一般选择器相反的“Right To Left”查询匹配方式,先搜寻页面中所有的span标签,再去判断父节点,有效地增加效率。
本教程操作环境:windows10系统、jquery3.2.1版本、Dell G3电脑。
Sizzle是一个纯javascript CSS选择器引擎。jquery1.3开始使用sizzle,Sizzle一反传统采取了相反的Right To Left的查询匹配方式,效率提高.Sizzle是jQuery作者John Resig新写的DOM选择器引擎,速度号称业界第一.Sizzle完全独立于jQuery,若不想用jQuery,你可只用Sizzle实现。
Sizzle则采取了相反Right To Left的实现方式,先搜寻页面中所有的span标签,再在其后的操作中才去判断它的父节点(包括父节点以上)是否为div,是则压入数组,否则pass,进入下一判断,最后返回该操作序列。
当我们给$符传递进一个参数(也可能是多个)时,此时它会根据参数的类型(domElement | string | fn | array)进入不同的流程,在此,重点看 string 类型的处理,因为只有它才可以触发Sizzle。首先调用正则匹配看是否为创建dom节点的操作,然后看是否为简单id匹配,这一步也由正则匹配完成,否则进入jQuery.fn.find()函数,由此进入Sizzle的天地。
当进入Sizzle时,一般情况下会配备三参:所要匹配的选择符,上下文,匹配的结果集。调用正则对传入的selector做一次”预匹配”.
var chunker = /((?:\((?:\([^()]+\)|[^()]+)+\)|\[(?:\[[^[\]]*\]|['"][^'"]*['"]|[^[\]'"]+)+\]|\\.|[^ >+~,(\[\\]+)+|[>+~])(\s*,\s*)?/g,
让我们看一下一个简单选择器的实现过程:比如 div > p。我们要先找出符合条件的div[div],再找出符合条件的p[p],最后在上下文里[div]过滤出符合条件”>”的p[p];抽象一点的说法就是:在已知的上下文里,根据关系找出相应的节点。他们靠关系联系起来。那么对于选择器的操作也就是根据关系来分组。一次次缩小上下文,直到找出符合条件的节点。
回到我们的话题,还是先看看这个令人费解的正则,相信你会有更好的分析方法,但是眼下,我还是一点点的拆分,让它表达的更清晰一点。先按照分组拆,即():
((?:\((?:\([^()]+\)|[^()]+)+\)|\[(?:\[[^\[\]]*\]|['"][^'"]*['"]|[^\[\]'"]+)+\]|\\.|[^ >+~,(\[\\]+)+|[>+~]) (\s*,\s*)? ((?:.|\r|\n)*)
第一行还是有点长,用’|'拆分它:
1. (?:\((?:\([^()]+\) 2.[^()]+)+\) 3. \[(?:\[[^[\]]*\] 4. [^[\]]+)+\]|\\. 5.[^ >+~,(\[]+)+ 6.[>+~]
对于如div > p。会得到数组结果['div','>','p']。
对于更复杂的选择器,如div.classname > p.classname。会得到结果['div.classname','>','p.classname']。
对于具有合并的‘,’,只是递归调用下获取结果再合并而已。过程开始变得简单起来。
对于普通的解析过程,我们遵循着从左到右的顺序即可完成我们的目标。
让我们总结下步骤:
1.先查找页面上所有的div
2.循环所有的div,查找每个div下的p
3.合并结果
Sizzle用了截然相反的步骤:
1.先查找页面上所有的p
2.循环所有的p,查找每个p的父元素
1.如果不是div,遍历上一层。
2.如果已经是顶层,排除此p。
3.如果是div,则保存此p元素。
由子元素来查找父元素,能得到更好的效率。看,打破常规思维后不仅步骤更简单了,而且效率上也得到了些许提升。
所有的选择器都可以这样解析吗?不是,采用right -> left的顺序是有前提条件的:没有位置关系的约束。
相关视频教程推荐:jQuery视频教程
The above is the detailed content of What is jquery sizzle. For more information, please follow other related articles on the PHP Chinese website!