• 技术文章 >web前端 >前端问答

    jquery sizzle是什么

    长期闲置长期闲置2022-04-24 16:53:57原创157

    jquery中sizzle是一个JavaScript css选择器引擎;jquery1.3开始用sizzle,使用与一般选择器相反的“Right To Left”查询匹配方式,先搜寻页面中所有的span标签,再去判断父节点,有效地增加效率。

    本教程操作环境:windows10系统、jquery3.2.1版本、Dell G3电脑。

    jquery sizzle是什么

    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']。

    对于具有合并的‘,’,只是递归调用下获取结果再合并而已。过程开始变得简单起来。

    对于普通的解析过程,我们遵循着从左到右的顺序即可完成我们的目标。

    让我们总结下步骤:

    Sizzle用了截然相反的步骤:

    由子元素来查找父元素,能得到更好的效率。看,打破常规思维后不仅步骤更简单了,而且效率上也得到了些许提升。

    所有的选择器都可以这样解析吗?不是,采用right -> left的顺序是有前提条件的:没有位置关系的约束。

    相关视频教程推荐:jQuery视频教程

    以上就是jquery sizzle是什么的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:jQuery
    上一篇:jquery闭包是什么意思 下一篇:css3有图片缩小属性吗
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【腾讯云】年中优惠,「专享618元」优惠券!• jquery怎么替换节点• jquery怎么实现鼠标经过显示,离开隐藏• jquery中怎么删除一个元素• jquery怎么设置点击事件去除div元素• jquery怎么实现隔行变色
    1/1

    PHP中文网