jQuery选择器源码解读(四):tokenize方法的Expr.preFilter
Expr.preFilter是tokenize方法中对ATTR、CHILD、PSEUDO三种选择器进行预处理的方法。具体如下:
Expr.preFilter:{ "ATTR":function(match){ /* *完成如下任务: *1、属性名称解码 *2、属性值解码 *3、若判断符为~=,则在属性值两边加上空格 *4、返回最终的mtach对象 * *match[1]表示属性名称, *match[1].replace(runescape,funescape):将属性名称中的十六进制数解码成 *单字节unicode字符或双字节unicode字符(中文或其它需要两个字节表达的文字) *正则表达式的详细说明,可以参看我的“详解jQuery选择器正则表达式”文章 */ match[1]=match[1].replace(runescape,funescape); /* *将属性值解码 *match[4]:表示放在单引号或双引号内的属性值 *match[5]:表示不用引号括起来的属性值 */ match[3]=(match[4]||match[5]||"").replace(runescape, funescape); /* *~=的意思是单词匹配,在W3C中对单词的定义是以空白为不同单词的分隔符 *故此处在match[3]两边加上空格后,可以利用indexOf,正确识别出该单词是否存在 */ if(match[2]==="~="){ match[3]=""+match[3]+""; } /* *返回有用的前四个元素结果 */ returnmatch.slice(0,4); }, "CHILD":function(match){ /* *完成如下几项任务: *1、把命令中child和of-type之前的字符变成小写字符 *2、对于nth开头的选择器检查括号内的数据有效性 *3、match[4]和match[5]分别存放xn+b中的x和b,x和b允许是负数 *4、返回最终的match对象 * *match[1]:(only|first|last|nth|nth-last)中的一个 */ match[1]=match[1].toLowerCase(); /* *对于nth-child、nth-of-type、nth-last-child、nth-last-of-type四种类型括号内需设置有效数据 *而其它则括号内不允许有任何数据 */ if(match[1].slice(0,3)==="nth"){ /* *若选择器括号内没有有效参数,则抛出异常 *举例:若选择器是nth或nth(abc)则属于非法选择器 */ if(!match[3]){ Sizzle.error(match[0]); } /* *下面先以nth-child()为例介绍一下语法,以便更好的理解下面代码的作用 *nth-child允许的几种使用方式如下: * :nth-child(even) * :nth-child(odd) * :nth-child(3n) * :nth-child(+2n+1) * :nth-child(2n-1) *下面代码中赋值号左侧的match[4]、match[5]用于分别记录括号内n前及n后的数值,包括正负号 *对于:nth-child(even)和:nth-child(odd)来说,match[4]为空, *所以返回2*(match[3]==="even"||match[3]==="odd")的计算结果 *因为在js中true=1,false=0,所以(match[3]==="even"||match[3]==="odd")等于1 *因此,2*(match[3]==="even"||match[3]==="odd")的计算结果为2 * *等号右侧的“+”的作用是强制类型转换,将之后的字符串转换成数值类型 */ match[4]=+(match[4]?match[5]+(match[6]||1) :2*(match[3]==="even"||match[3]==="odd")); match[5]=+((match[7]+match[8])||match[3]==="odd"); }elseif(match[3]){ /* *若非nth起头的其它CHILD类型选择器带有括号说明,则抛出异常 *这里jQuery并没有严格按照W3C的规则来判定,因为其允许:first-child()的这种形式存在 *也就是对于jQuery来说:first-child()等同于:first-child,是合法选择器 */ Sizzle.error(match[0]); } returnmatch; }, "PSEUDO":function(match){ /* *完成如下任务: *1、获取伪类中用引号括起来的值 *2、对于非引号括起来的值,若存在伪类嵌套,则进一步解析确定当前伪类实际结束位置, *获取当前伪类的完整字符串和值 *3、返回match中的前三项的副本。 * *unquoted表示括号内非引号括起来的值, *以:eq(2)为例,unquoted=2 */ varexcess,unquoted=!match[5]&&match[2]; /* *因为pseudo与child的匹配正则表达式有交集,所以,需要把属于child的部分忽略掉 */ if(matchExpr["CHILD"].test(match[0])){ returnnull; } /* *若括号内的值使用引号(match[3])括起来的, *则将除引号外的值(match[4])赋给match[2]。 *match[3]表示引号。 */ if(match[3]&&match[4]!==undefined){ match[2]=match[4]; }elseif(unquoted /* *rpseudo.test(unquoted):用来测试unquoted是否包含伪类, *若包含伪类,则说明有可能存在伪类嵌套的可能性,需要进一步对unquoted进行解析 *例如::not(:eq(3)) */ &&rpseudo.test(unquoted) && /* *获取unquoted中连续有效地选择器最后一个字符所在位置 */ (excess=tokenize(unquoted,true)) && /* *unquoted.indexOf(")",unquoted.length-excess) *从之前获得的连续有效地选择器最后一个字符所在位置之后找到")"所在位置, *通常就在当前位置之后。 *再减去unquoted.length,用来获得match[0]中的有效完整的伪类字符串最后位置, *注意,此时excess是一个负值 * */ (excess=unquoted.indexOf(")",unquoted.length -excess) -unquoted.length)){ //获取有效的完整伪类match[0]和伪类括号内的数据match[2] match[0]=match[0].slice(0,excess); match[2]=unquoted.slice(0,excess); } //返回match前三个元素的副本 returnmatch.slice(0,3); } }