上篇说道,tokenize方法会把selector切割成一个个selector逻辑单元(如div>a是三个逻辑单元 'div','>','a')并为之片段赋予相应类型的过滤函数。

for ( type in Expr.filter ) {if ( (match = matchExpr[ type ].exec( soFar )) && (!preFilters[ type ] ||(match = preFilters[ type ]( match ))) ) {matched = match.shift();tokens.push({value: matched,type: type,matches: match});soFar = soFar.slice( matched.length );}}
然后选出最后selector逻辑单元(是指由须要上下文的选择器,如id,tag,class等)所相应的元素集作为从右向左(普通情况)过滤的候选元素集,match(正则捕获组)是selector逻辑片段的解析结果(如[arr="111"]依据正则解析为arr,",=,111 ),在selector逻辑片段是ATTR、CHILD、PSEUDO是须要调用preFilter对match进行修正.
preFilter: {//match是捕获组//如果:[arr^='val']"ATTR": function( match ) {//attr的第一个捕获 组是arr,将当中的转码变成原来的字符match[1] = match[1].replace( runescape, funescape );// Move the given value to match[3] whether quoted or unquoted// 将val放到捕获组3里,原来的捕获组3捕获'或"match[3] = ( match[4] || match[5] || "" ).replace( runescape, funescape );//如果捕获组2是~=。在match[3]前后加空格,以方便匹配单个单词if ( match[2] === "~=" ) {match[3] = " " + match[3] + " ";}//match[0] = '[arr^='val']'//match[1] = 'arr'//match[2] = '='//match[3] = '111'return match.slice( 0, 4 );},"CHILD": function( match ) {/*  比如nth-child(-2n+1)的捕获组mathc[1] nthmathc[2] childmathc[3] 2n+1mathc[4] 2nmathc[5] -mathc[6] 2mathc[7] +mathc[8] 1*/match[1] = match[1].toLowerCase();// nth必须须要參数if ( match[1].slice( 0, 3 ) === "nth" ) {// nth-* requires argumentif ( !match[3] ) {Sizzle.error( match[0] );}// numeric x and y parameters for Expr.filter.CHILD// remember that false/true cast respectively to 0/1// xn + y// 将even,odd修正为xn+y,match[4]修正为+-xmatch[4] = +( match[4] ? match[5] + (match[6] || 1) : 2 * ( match[3] === "even" || match[3] === "odd" ) );// 将match[5]替换为+-ymatch[5] = +( ( match[7] + match[8] ) || match[3] === "odd" );// other types prohibit arguments// 除nth外其它类型禁止參数} else if ( match[3] ) {Sizzle.error( match[0] );}// match[0] :nth-child(-2n+1)// match[1] nth// match[2] child// match[3] -2n+1// match[4] -2// match[5] 1// match[6] 2// match[7] +// match[8] 1return match;},/*** match[1] :后伪类类型* match[2] 伪类參数* match[3] 參数中的'或者"* match[4] 除去'或"的伪类*/"PSEUDO": function( match ) {var excess,unquoted = !match[5] && match[2];//是CHILD伪类。返回nullif ( matchExpr[ "CHILD"].test( match[0] ) ) {return null;}// Accept quoted arguments as-is// 參数有引號//将match[2]替换为无引號的match[4]參数if ( match[3] && match[4] !== undefined ) {match[2] = match[4];// Strip excess characters from unquoted arguments// 除去带引號的參数的多余字符} else if ( unquoted && rpseudo.test( unquoted ) &&// Get excess from tokenize (recursively)//excess多余字符的长度(excess = tokenize( unquoted, true )) &&//excess多余參数的索引位置,excess是个负值,以便截取到多余字符之前(excess = unquoted.indexOf( ")", unquoted.length - excess ) - unquoted.length) ) {// excess is a negative indexmatch[0] = match[0].slice( 0, excess );match[2] = unquoted.slice( 0, excess );}// Return only captures needed by the pseudo filter method (type and argument)return match.slice( 0, 3 );}}

转载于:https://www.cnblogs.com/gccbuaa/p/6758310.html

JQuery日记_5.14 Sizzle选择器(七)相关推荐

  1. jQuery源码分析 Sizzle选择器

    jQuery版本 version = "1.11.1" 前言 Sizzle是jQuery里面的选择器引擎,在jQuery版本1.11.1中.Sizzle 这部分可以看做jQuery ...

  2. JQuery - Sizzle选择器引擎原理分析

    说明:14年学习的jquery源码,搬到这里供大家交流.原文地址:https://segmentfault.com/a/1190000003933990 一.前言 Sizzle原来是jQuery里面的 ...

  3. 转:初探 jQuery 的 Sizzle 选择器

    这是一篇关于介绍jQuery Sizzle选择器的文章,由我和obility共同完成.在文中,我们试图用自己的语言配以适量的代码向读者展现出Sizzle在处理选择符时的流程原理,以及末了以少许文字给你 ...

  4. [jQuery] jQuery是通过哪个方法和Sizzle选择器结合的?

    [jQuery] jQuery是通过哪个方法和Sizzle选择器结合的? 通过创建一个div元素,检测被传入的fn是否被当前浏览器支bai持 function assert( fn ) { var d ...

  5. jQuery 的 Sizzle 选择器

    这是一篇关于介绍jQuery Sizzle选择器的文章,由我和obility共同完成.在文中,我们试图用自己的语言配以适量的代码向读者展现出Sizzle在处理选择符时的流程原理,以及末了以少许文字给你 ...

  6. 初探 jQuery 的 Sizzle 选择器

    这是一篇关于介绍jQuery Sizzle选择器的文章,由我和obility共同完成.在文中,我们试图用自己的语言配以适量的代码向读者展现出Sizzle在处理选择符时的流程原理,以及末了以少许文字给你 ...

  7. jQuery源码学习(6)-Sizzle选择器(2)

    1.CSS选择器的位置关系: 四种关系:"+" 紧挨着的兄弟关系:">" 父子关系:" " 祖先关系:"~" 之后 ...

  8. jQuery Sizzle选择器

    转载 原文作者:yleo77 这是一篇关于介绍jQuery Sizzle选择器的文章,由我和obility共同完成.在文中,我们试图用自己的语言配以适量的代码向读者展现出Sizzle在处理选择符时的流 ...

  9. jQuery源码学习(5)-Sizzle选择器(1)

    1.常见的选择器: #test表示id为test的DOM节点 .aaron 表示class为aaron的DOM节点 nav>li 表示在nav内部子li的样式,而不是所有的后代元素,只是往下一层 ...

  10. 解析jquery的sizzle选择器(一)

    一看到sizzle,我很茫然...... 首先,整理一下,在知乎上看到的. 来自Jeffreyzhang:切割Selector–>查找Selector–>过滤Selector(循环)–&g ...

最新文章

  1. [转]给UIImage添加圆角(圆角矩形),也可用于CCSprite
  2. redhat/centos 搭建svn服务器环境
  3. 前端学习(768):构造对象与对象区别
  4. var与dynamic区别
  5. 史上最全的延迟任务实现方式汇总!附代码(强烈推荐)
  6. html显示余额什么做,账户余额.html · dengzhao/prd_zhangyao - Gitee.com
  7. Spring框架学习笔记08:基于Java配置方式使用Spring MVC
  8. repeater 实现分列(两列的简单办法)
  9. 设计模式--模板方法模式(12)
  10. 解决office 2010每次启动都出现配置进度的方法
  11. S32K--输入捕获(FTM_IC)配置与使用学习笔记(SDK3.0)
  12. 学习pathon工具安装
  13. 1、计算机图形学——基础变换矩阵
  14. java srs 推流_srs推流服务器部署
  15. cesium中实现鼠标拖动实体功能
  16. 【考研英语语法】语篇标记
  17. 【社招和校招】格灵深瞳合肥研发中心计算机视觉算法岗招聘
  18. linux中单引号、双引号
  19. 2019美国大学计算机专业硕士申请条件,104@2019美国大学计算机(CS)硕士申请难度大比拼(二)...
  20. iOS快捷指令 | iPicGo,随时随地用手机上传图片到图床

热门文章

  1. 如何写项目文档?项目文档有哪些?
  2. 1993年考研数学一解析pdf
  3. 计算机usb接口失灵,电脑usb接口没反应,教您电脑usb接口没反应怎么解决
  4. Linux: Manjaro/Arch logiops 罗技鼠标驱动安装教程
  5. ORACLE数据库日志路径在哪里,查询方式
  6. windows bat脚本 理解 @echo off 和 echo off 的区别
  7. 【 CSDN 】 如何修改CSDM 自定义摘要功能
  8. 华为Metn40有没有鸿蒙系统,华为matex2测评_华为matex2上手测评
  9. 关于微信开发者工具终端窗口不能输入字符问题
  10. 对无序的边界点排序(顺时针绘制边界)