jQuery源码分析-04选择器-Sizzle-工作原理分析_jquery
作者:青竹风163_955 | 来源:互联网 | 2018-06-18 07:57
在分析Sizzle源码之前,先整理一下选择器的工作原理,先明确一些选择器中用到的名词,后边阅读时不会有歧义
作者:nuysoft/高云 QQ:47214707 EMail:nuysoft@gmail.com 声明:本文为原创文章,如需转载,请注明来源并保留原文链接。 在分析Sizzle源码之前,先整理一下选择器的工作原理 先明确一些选择器中用到的名词,后边阅读时不会有歧义: 选择器表达式: "p > p" 块表达式: "p" "p" 并列选择器表达式: "p, p" 块分割器: Sizzle中的chunker正则,对选择器表达式从左向右分割出一个个块表达式 查找器: 对块表达式进行查找,找到的DOM元素数组叫候选集 过滤器: 对块表达式和候选集进行过滤 关系过滤器 对块表达式之间的关系进行过滤,共有四种关系:"+" 紧挨着的兄弟关系;">" 父子关系;"" 祖先关系;"~" 之后的所有兄弟关系 候选集: 查找器的结果,待过滤器进行过滤 映射集: 候选集的副本,过滤器和关系过滤器对映射集进行过滤 工作流程: 1. 使用块分割器对选择器表达式进行分割,从左向右 如果遇到用逗号","分割的并列选择器表达式,只分割至第一个逗号前边的选择器表达式1,将剩余部分记录下来 2. 对最后一个块表达式进行查找Sizzle.find,结果放入候选集set,并将块表达式中匹配的字符串部分删除 查找器Sizzle.find从正则集Expr.match获取对应的正则表达式,对块表达式进行匹配,匹配成功则从查找函数集Expr.find获取对应的查找函数执行 查找顺序定义在Expr.order中,依次是:ID CLASS NAME TAG,查找时CLASS需要浏览器支持getElementsByClassName Expr.match中设定了ID CLASS NAME ATTR TAG CHILD POS PSEUDO的正则匹配表达式 3. 如果最后一个块表达式不为空(字符串),过滤器Sizzle.filter对set进行过滤 过滤器Sizzle.filter仅对单个块表达式起作用,仅对候选集set中的元素起作用,检查候选集set中的元素满足剩余的块表达式 在过滤器Sizzle.filter的过滤过程中,不符合条件的被设置为false,符合条件的不做修改 过滤时从正则集Expr.leftMatch获取对应的正则表达式,对块表达式进行匹配,匹配成功则从Expr.filter获取对应的过滤函数执行 Expr.leftMatch定义了与Expr.match同样数量的正则表达式:ID CLASS NAME ATTR TAG CHILD POS PSEUDO 过滤函数集Expr.filter定义了PSEUDO CHILD ID TAG CLASS ATTR POS的过滤函数 过滤器Sizzle.filter进行过滤之前,会先调用预过滤器Expr.preFilter对过滤所需的参数进行修正,但是CLASS是个例外 在CLASS进行预过滤时做了优化,直接将匹配class的元素作为候选集返回,缩小过滤范围,缩小候选集范围 将以上查找和过滤得到候选集set复制,放入映射集checkSet,后边的过滤操作在checkSet上进行 对最后一个块表达式的查找和过滤到这里结束,得到一个候选集set和映射集checkSet 4. 在映射集checkSet上将剩余的块表达式从右向左进行过滤,根据与前一个块表达式的关系,从关系过滤器集Expr.relative中获取对应的函数执行关系过滤 在关系过滤器Expr.relative的过滤过程中,不符合条件的被设置为false,符合条件的则被设置为父元素、祖先元素、兄长元素 元素之间的关系共有四种:"+" 紧挨着的兄弟关系;">" 父子关系;"" 祖先关系;"~" 之后的所有兄弟关系 在关系过滤器Expr.relative的过滤过程中,如果遇到块表达式是标签TAG的情况,则直接比较标签类型nodeName是否相等 如果不是标签TAG的情况,则会调用过滤器Sizzle.filter进行过滤,过滤过程见第3步 从右向左过滤,直到所有块表达式全部过滤完 5. 根据过滤后的映射集checkSet,从候选集set中挑选最终的结果集,在映射集checkSet中 如果是null、false,将被过滤 如果不是Element(nodeType===1),将被过滤 如果上下文不是Document而是某个Element,不是Element的子元素的,将被过滤 6. 如果存在并列表达式,重复1~5,并将得到的最终结果集合并、排序、去重 如果仅有一个选择器表达式,没有并列选择器表达式,不需要排序 以下过程不属于Sizzle,属于jQuery对Sizzle的扩展 7. 如果存在多个上下文,对每个上下文重复1~6 多个上下文例子:$('p').find('p > p'),$('p')可能找到多个p 其实第7步是jQuery选择器的入口,从第7步去调用1~6,调用时传入一个空的jQuery对象作为结果集 默认以document为上下文:(context || rootjQuery).find( selector ) 8. 将从多个上下文找到的结果集合并、去重,返回结果集 done!
推荐阅读
本文介绍了如何使用Html5和Canvas标签来实现简易的抽奖转盘效果,同时使用了jQueryRotate.js旋转插件。文章中给出了主要的html和css代码,并展示了实现的基本效果。 ...
[详细]
蜡笔小新 2023-12-13 06:02:20
Ihavethefollowingonhtml我在html上有以下内容<html><head><scriptsrc..3003_Tes ...
[详细]
蜡笔小新 2023-12-12 15:59:36
本文介绍了如何使用jQuery和AJAX来实现动态更新两个div的方法。通过调用PHP文件并返回JSON字符串,可以将不同的文本分别插入到两个div中,从而实现页面的动态更新。 ...
[详细]
蜡笔小新 2023-12-11 10:07:32
本文介绍了Android实战中使用jsoup实现网络爬虫的方法,以糗事百科项目为例。对于初学者来说,数据源的缺乏是做项目的最大烦恼之一。本文讲述了如何使用网络爬虫获取数据,并以糗事百科作为练手项目。同时,提到了使用jsoup需要结合前端基础知识,以及如果学过JS的话可以更轻松地使用该框架。 ...
[详细]
蜡笔小新 2023-12-11 09:19:45
随着互联网的发展,前台开发工程师成为市场上非常抢手的人才。本文介绍了从零基础到精通前台开发的学习路线,包括学习HTML、CSS、JavaScript等基础知识和常用工具的使用。通过循序渐进的学习,可以掌握前台开发的基本技能,并有能力找到一份月薪8000以上的工作。 ...
[详细]
蜡笔小新 2023-12-10 20:05:15
本文介绍了Node.js中包的概念,以及如何使用包来统一管理具有相互依赖关系的模块。同时还介绍了NPM(Node Package Manager)的基本介绍和使用方法,以及如何通过NPM下载第三方模块。 ...
[详细]
蜡笔小新 2023-12-10 18:26:02
随着前端技术的发展,越来越多的开发者开始使用react、vue等web框架,但很少有人深入理解这些框架的源码。然而,这些框架底层都是由原生的javascript构建而成。对于初学前端的人来说,可能会认为javascript很容易上手,但实际上只是因为它被高度封装了。与能够使用封装类的人相比,能够理解框架原理的人则处于另一个层面。本文将深入剖析jquery源码,探寻框架底层的原理,帮助读者更好地理解web框架的运行机制。 ...
[详细]
蜡笔小新 2023-12-10 17:42:39
本文讨论了如何使用jQuery的load方法来获取被load页面中所有a标签的集合,类似于$("a")的用法。 ...
[详细]
蜡笔小新 2023-12-10 12:53:48
本文介绍了在满足特定条件时如何在输入字段中使用默认值的方法和相应的代码。当输入字段填充100或更多的金额时,使用50作为默认值;当输入字段填充有-20或更多(负数)时,使用-10作为默认值。文章还提供了相关的JavaScript和Jquery代码,用于动态地根据条件使用默认值。 ...
[详细]
蜡笔小新 2023-12-10 12:35:46
本文详细介绍了使用jQuery实现简单动画效果的方法,包括显示/隐藏、向上收缩/向下展开、淡入/淡出、自定义动画等。同时提供了具体的用法示例,并解释了参数的含义和使用技巧。通过本文的学习,读者可以掌握如何使用jQuery实现各种动画效果,为网页增添生动和互动性。 ...
[详细]
蜡笔小新 2023-12-10 12:09:52
本文介绍了Java后台Jsonp处理方法及其应用场景。首先解释了Jsonp是一个非官方的协议,它允许在服务器端通过Script tags返回至客户端,并通过javascript callback的形式实现跨域访问。然后介绍了JSON系统开发方法,它是一种面向数据结构的分析和设计方法,以活动为中心,将一连串的活动顺序组合成一个完整的工作进程。接着给出了一个客户端示例代码,使用了jQuery的ajax方法请求一个Jsonp数据。 ...
[详细]
蜡笔小新 2023-12-10 10:55:21
本文介绍了使用jQuery判断一个元素是否被点击的方法,并通过示例进行了具体说明。注意要指定父级,否则会执行多次。 ...
[详细]
蜡笔小新 2023-12-10 10:23:28
本文介绍了wpf+mvvm代码组织结构的由来和实现方式。作者回顾了自己大学时期接触wpf开发和mvvm模式的经历,认为mvvm模式使得开发更加专注于业务且高效。与此同时,作者指出mvvm模式相较于mvc模式的优势。文章还提到了当没有mvvm时处理数据和UI交互的例子,以及前后端分离和组件化的概念。作者希望能够只关注原始数据结构,将数据交给UI自行改变,从而解放劳动力,避免加班。 ...
[详细]
蜡笔小新 2023-12-10 10:07:44
本文介绍了如何在Jquery中通过元素的样式值获取元素,并将其赋值给一个变量。提供了5种解决方案供参考。 ...
[详细]
蜡笔小新 2023-12-10 04:03:11
本文介绍了使用FormData对象上传文件同时附带其他参数的方法。通过创建一个表单,将文件和参数添加到FormData对象中,然后使用ajax发送POST请求进行文件上传。在发送请求时,需要设置processData为false,告诉jquery不要处理发送的数据;同时设置contentType为false,告诉jquery不要设置content-Type请求头。 ...
[详细]
蜡笔小新 2023-12-09 19:51:18
青竹风163_955
这个家伙很懒,什么也没留下!