十六.jQuery源码解析之Sizzle设计思路.htm
为了便于后面的叙述,需要了解一些相关术语和约定.
并列选择器表达式:"div,p,a"====>div,p,a是并列的.
块表达式:"div>p"中的div和p就是两个块.
块表达式的类型:共8种.id,class,name,attr,tag,child,pos,pseudo(伪类表达式)
块间的关系符:共4种.">":父子关系,"+":紧挨着的兄弟关系,"~":后面的所有兄弟关系," ":所有后代关系
设计思路:以"div.guo>p"为例.
1.从左向右:先查找"div.guo"匹配的元素集合,然后查找子元素中是"p"的元素.
2.从右向左:先查找"p"匹配的元素集合,然后检查其中每个元素的父元素是"div.guo"的元素.
无论是从哪种思路,都必须经过以下几个步骤.
1.首先要能正确的解析出div.guo>p中的div.guo,p,>;即解析出选择器中的表达式块和块间的关系符.这一步是必须的.,否则根本无法下手.
2.查找出各个表达式块的元素集合,即div.guo和p的两个模块集合.div.guo同时又分为div模块和.guo两个模块.
3.最后来处理各个模块的关系.即关系符">";
这一步中的从左到右和从右到左是截然不同的两种效果.
a.从左到右:找到div.guo匹配的元素集合的子元素集合,然后从中过滤出匹配"p"的子元素集合.
b.从右到左:检查每个匹配"p"的元素的父元素是否匹配"div.guo",只保留匹配的元素.
根据前面的分析思路,得出以下结论:
1.从左到右的总体思路是不断缩小上下文,即不断缩小查找范围.
2.从右到左的总体思路是先查找后过滤.
3.在从左到右的查找过程中,每次处理块间关系符时都需要处理未知数量的子元素或后代元素,而在从右向左的查找过程中,
处理块间关系符时只需要处理单个父元素或有限数量的祖先元素.因此,在大多数情况下,采用从右到左的查找方式效果要高于从左向右.
在了解了上面的分析后,在来看看Sizzle,他是一款从右向左查找的选择器引擎.
Sizzle提供了三个核心的接口:
1.chunker正则负责从选择器表达式中提取块表达式考核块间关系符.
2.Sizzle.find(expr,context,isXML)负责查找块表达式匹配的元素集合,方法Sizzle.filter(expr,set,inplace,not)负责用块表达式过滤元素集合;
3.对象Sizzle.selector.relative中的块间关系过滤函数根据块间关系符过滤元素集合.
函数Sizzle(selector,context,results,seed)将上面三个核心接口组织起来.
相关文章
- jQuery验证控件jquery.validate.js使用说明+中文API
- 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结
- jquery中 $ 和 jQuery 及 $() 的区别
- 【Jquery】jQuery获取URL參数的两种方法
- Jquery控件jrumble
- jquery技术揭秘静态工具函数源码重构
- jQuery 获取当前节点的html包含当前节点的方法
- 《jQuery Cookbook中文版》——第1章 jQuery基础1.0 导言
- 《jQuery Mobile快速入门》—— 1.8 总结
- dom与jquery互相转换
- jquery.validate.js校验select2解决方案,Jquery插件select2校验解决方案
- Vue中正确使用jQuery的方法
- Jquery_jquery中attr和prop的区别
- Jquery_JQuery之DataTables强大的表格解决方案
- javascript jquery 修改指定标签中的内容
- Javaweb——(day03)jQuery
- 自己写的jQuery放大镜插件效果(二)(采用只有一张图片的思路)
- jquery选择器空格与大于号、加号与波浪号的区别