上篇说道,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] nth
mathc[2] child
mathc[3] 2n+1
mathc[4] 2n
mathc[5] -
mathc[6] 2
mathc[7] +
mathc[8] 1
*/
match[1] = match[1].toLowerCase();
// nth必须须要參数
if ( match[1].slice( 0, 3 ) === "nth" ) {
// nth-* requires argument
if ( !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]修正为+-x
match[4] = +( match[4] ? match[5] + (match[6] || 1) : 2 * ( match[3] === "even" || match[3] === "odd" ) );
// 将match[5]替换为+-y
match[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] 1
return match;
},
/**
* match[1] :后伪类类型
* match[2] 伪类參数
* match[3] 參数中的'或者"
* match[4] 除去'或"的伪类
*/
"PSEUDO": function( match ) {
var excess,
unquoted = !match[5] && match[2]; //是CHILD伪类。返回null
if ( 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 index
match[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 );
}
}

JQuery日记_5.14 Sizzle选择器(七)的更多相关文章

  1. JQuery日记_5.13 Sizzle选择器(六)选择器的效率

        当选择表达式不符合高速匹配(id,tag,class)和原生QSA不可用或返回错误时,将调用select(selector, context, results, seed)方法,此方法迭代DO ...

  2. JQuery日记 5.11 Sizzle选择器(五)

    //设置当前document和document相应的变量和方法 setDocument = Sizzle.setDocument = function( node ) { var hasCompare ...

  3. [转]JQuery - Sizzle选择器引擎原理分析

    原文: https://segmentfault.com/a/1190000003933990 ---------------------------------------------------- ...

  4. jQuery源码分析系列(三)Sizzle选择器引擎-下

    选择函数:select() 看到select()函数,if(match.length === 1){}存在的意义是尽量简化执行步骤,避免compile()函数的调用. 简化操作同样根据tokenize ...

  5. jQuery-1.9.1源码分析系列(三) Sizzle选择器引擎——编译原理

    这一节要分析的东东比较复杂,篇幅会比较大,也不知道我描述后能不能让人看明白.这部分的源码我第一次看的时候也比较吃力,现在重头看一遍,再分析一遍,看能否查缺补漏. 看这一部分的源码需要有一个完整的概念后 ...

  6. jQuery-1.9.1源码分析系列(三) Sizzle选择器引擎——总结与性能分析

    Sizzle引擎的主体部分已经分析完毕了,今天为这部分划一个句号. a. Sizzle解析流程总结 是时候该做一个总结了.Sizzle解析的流程已经一目了然了. 1.选择器进入Sizzle( sele ...

  7. Sizzle选择器引擎介绍

    一.前言 Sizzle原来是jQuery里面的选择器引擎,后来逐渐独立出来,成为一个独立的模块,可以自由地引入到其他类库中.我曾经将其作为YUI3里面的一个module,用起来畅通无阻,没有任何障碍. ...

  8. JavaScipt 源码解析 Sizzle选择器

    jQuery的定位就是一个DOM的操作库,那么可想而知选择器是一个至关重要的模块.Sizzle,作为一个独立全新的选择器引擎,出现在jQuery 1.3版本之后,并被John Resig作为一个开源的 ...

  9. jQuery源码学习:Sizzle

    本文所有讨论均基于jQuery版本3.1.1,官网http://jquery.com/. 一 简介 Sizzle是用javascript实现的CSS selector engine,官网见https: ...

随机推荐

  1. 【bzoj1086】王室联邦

    我以为树分块什么的必有高论,结果居然是个暴力…… 方法也很简单,我看下每个节点dfs的时候是否已经大于k个,大于的话我就新开一块. 注意dfs的时候当前节点不能放进子树的块中. #include< ...

  2. Java坦克大战 (五) 之产生敌方坦克和爆炸效果

    本文来自:小易博客专栏.转载请注明出处:http://blog.csdn.net/oldinaction 在此小易将坦克大战这个项目分为几个版本,以此对J2SE的知识进行回顾和总结,希望这样也能给刚学 ...

  3. Centos安装流量监控工具iftop笔记

    Centos安装流量监控工具iftop笔记 一.概述 iftop可以用来监控网卡的实时流量(可以指定网段).反向解析IP.显示端口信息等,详细的将会在后面的使用参数中说明.官方网站:http://ww ...

  4. 取消SecureCRT的右击粘贴功能

    默认为选中时自动复制,右键粘贴 要取消的话在: Options->Global Options ...->Terminal 里面有个Mouse的选项块. Paste on Right/Le ...

  5. 使用python获取整月每一天的系统监控数据生成报表

    1.安装阿里开源监控工具tsar tsar官方网站 wget -O tsar.zip https://github.com/alibaba/tsar/archive/master.zip --no-c ...

  6. docker从零开始网络(二)桥接网络

    使用桥接网络 在网络方面,桥接网络是链路层设备,它在网络段之间转发流量.桥接网络可以是硬件设备或在主机内核中运行的软件设备. 就Docker而言,桥接网络使用软件桥接器,该软件桥接器允许连接到同一桥接 ...

  7. Canvas基础——钟表绘制

    首先,canvas语法基础薄弱的小伙伴请点这里,剩下的小伙伴们可以接着往下看了. 一个表,需要画什么出来呢:3条线(时分秒针),1个圆(表盘),以及60条短线/点(刻度). 嗯,没毛病. 那接下来让我 ...

  8. (14)python 文件和流

    打开文件 f=open('C:\Temp.txt') 读取数据 f.read(); 关闭文件 f.close();#关闭后将无法再读取 打开文件的方式 不写模式,默认是只读模式 1.r 打开只读文件, ...

  9. 51nod 1344 走格子【贪心/前缀和】

    1344 走格子 基准时间限制:1 秒 空间限制:131072 KB 分值: 5 难度:1级算法题  收藏  关注 有编号1-n的n个格子,机器人从1号格子顺序向后走,一直走到n号格子,并需要从n号格 ...

  10. Dijkstra【p4943】密室

    Description 密室被打开了. 哈利与罗恩进入了密室,他们发现密室由n个小室组成,所有小室编号分别为:1,2,...,n.所有小室之间有m条通道,对任意两个不同小室最多只有一条通道连接,而每通 ...