Sizzle选择器揭秘--Sizzle过滤器

上面一篇文章说的Sizzle的利器之一find函数Sizzle选择器揭秘--Sizzle选择器

这篇介绍Sizzle的另一利器filter函数

 1: Sizzle.filter = function(expr, set, inplace, not){2: //将选择表达式先存起来，后面会用它来比较。curLoop代表当前循环时的结果集的值3:     var old = expr, result = [], curLoop = set, match, anyFound,4:         isXMLFilter = set && set[0] && isXML(set[0]);5: //遍历set结果集中的元素就行遍历筛选6:     while ( expr && set.length ) {7: //对筛选类型进行遍历 filter中对筛选类型进行了细分 筛选的类型有PSEUDO（伪选择符）CHILD ID TAG CLASS　ATTR POS8:         for ( var type in Expr.filter ) {9: //对选择字符串进行相应的参数提取 match[1]为左边剩下的部分，match[2]为过滤的实际参数　10:             if ( (match = Expr.leftMatch[ type ].exec( expr )) != null && match[2] ) {11: //将对象类型的过滤函数赋给filter12:                 var filter = Expr.filter[ type ], found, item, left = match[1];13:                 anyFound = false;14:  15:                 match.splice(1,1);16: //如果匹配的类型字符处是进行转义的如 \\: 则结束此次循环进入下一次循环17:                 if ( left.substr( left.length - 1 ) === "\\" ) {18:                     continue;19:                 }20:  //用于缩小结果集21:                 if ( curLoop === result ) {22:                     result = [];23:                 }24: //对结果集进行预过滤 prefilter中有 CLASS ID　TAG CHILD ATTR PSEUDO POS,关于顺序问题后面介绍25: //预处理的作用是对特殊过滤类型进行处理和对过滤类型参数进行预处理26:                 if ( Expr.preFilter[ type ] ) {27:                     match = Expr.preFilter[ type ]( match, curLoop, inplace, result, not, isXMLFilter );28: //预处理结果  CLASS类型预过滤总是返回false因为在prefilter["CLASS"](match, curLoop, inplace, result, not, isXML)中已经进行了过滤，故返回一直返回false（至所以返回false是为了下面if（match）判断方便）29: //PSEUDO类型的预处理函数则有点复杂，应为所有的伪类选择器不都是一种过滤类型 当选择符是:not则PESUDO预过滤函数会就会直接处理然后返回false，同上面的CLASS一样，但是如果不是;not而使伪位置选择符或是CHILD类型30: 如:nth-child之类则返回true。这样在filter中结束本次循环，在后面的CHILD和POS中再进行处理。如果是其他情况则返回原来的过滤参数match31:                     if ( !match ) {32:                         anyFound = found = true;33:                     } else if ( match === true ) {34:                         continue;35:                     }36:                 }37: //提出特殊情况，执行以下语句38:                 if ( match ) {39:                     for ( var i = 0; (item = curLoop[i]) != null; i++ ) {40:                         if ( item ) {41: 对对当前循环结果集进行过滤，filter为先前保存的过滤函数42:                             found = filter( item, match, i, curLoop );43: //found返回的是否是符合过滤条件或是过滤结果44:                             var pass = not ^ !!found;45: //inplace这个参数是表明是否改变原来的集合，如果为true则将原先结果集中符合过滤条件的设为true，否则设为true。但无论如何都会将符合条件的放到result中，同时设置各种标志位46:                             if ( inplace && found != null ) {47:                                 if ( pass ) {48:                                     anyFound = true;49:                                 } else {50:                                     curLoop[i] = false;51:                                 }52:                             } else if ( pass ) {53:                                 result.push( item );54:                                 anyFound = true;55:                             }56:                         }57:                     }58:                 }59:  60:                 if ( found !== undefined ) {61:                     if ( !inplace ) {62: //缩小curLoop中的过滤范围63:                         curLoop = result;64:                     }65: //如果过滤成功的话则将相应的参数位置设为“”66:                     expr = expr.replace( Expr.match[ type ], "" );67:  68: //没有符合条件的返回[]                   69:                    if ( !anyFound ) {70:                         return [];71:                     }72: //过滤成功的就跳出内层循环，在从PSEUDO到POS进行新一轮过滤73:                     break;74:                 }75:             }76:         }77: //如果先后过滤字符串一样则过滤字符串有问题78:         // Improper expression79:         if ( expr === old ) {80:             if ( anyFound == null ) {81:                 Sizzle.error( expr );82:             } else {83:                 break;84:             }85:         }86:  87:         old = expr;88:     }89: //最后返回最后过滤过的结果集90:     return curLoop;91: };

其实虽然过滤和预过滤都是按照一定的过滤类型进行过滤，但是在进行匹配过滤字符换时是按照从右往左的顺序进行因为正则表达式中有一个负向前瞻（?!……）(?!.....)

举例来说一个过滤字符串 li:enabled.sel 在匹配这个字符串时先匹配PSEUDO时是匹配不成功的。最先匹配的是.sel(CLASS),然后才是:enabled 最后是li(TAG).

其实Sizzle中最重要的就是这两个函数，下面一片文章是关于Sizzle，如果这两篇文章看懂了，后面应该是很轻松。

Sizzle选择器揭秘--Sizzle过滤器相关推荐

Sizzle选择器揭秘--Sizzle选择器
自从jQuer1.4后,选择器就独立出来了,作为了一个开源的项目Sizzle,据说此选择器的性能远远超过其他框架的选择器.而Sizzle中两把利剑就是Sizzle.find和Sizzle.filter ...
Sizzle揭秘—Sizzle选择器引擎的入口
前面说了Sizzle的两大利器,今天核心Sizzle结构显示行数的有点问题,因为代码太长是分了两次,后来拼起来的见谅! 1: //Sizzle选择器的入口2: var Sizzle = functi ...
jQuery中的选择器引擎Sizzle
读Sizzle的源码,分析的Sizzle版本号是2.3.3. Sizzle的Github主页浏览器原生支持的元素查询方法: 方法名方法描述兼容性描述 getElementById 根据元素ID查 ...
jQuery源码学习（6）-Sizzle选择器（2）
1.CSS选择器的位置关系: 四种关系:"+" 紧挨着的兄弟关系:">" 父子关系:" " 祖先关系:"~" 之后 ...
jQuery中的选择器引擎Sizzle 1
读Sizzle的源码,分析的Sizzle版本号是2.3.3. Sizzle的Github主页浏览器原生支持的元素查询方法: 方法名方法描述兼容性描述 getElementById 根据元素ID查 ...
jQuery源码分析系列（二）Sizzle选择器引擎-上
前言我们继续从init()方法中的find()方法往下看, jQuery.find = Sizzle; ...find: function (selector) {/** ... */ret = t ...
转：初探 jQuery 的 Sizzle 选择器
这是一篇关于介绍jQuery Sizzle选择器的文章,由我和obility共同完成.在文中,我们试图用自己的语言配以适量的代码向读者展现出Sizzle在处理选择符时的流程原理,以及末了以少许文字给你 ...
JQuery - Sizzle选择器引擎原理分析
说明:14年学习的jquery源码,搬到这里供大家交流.原文地址:https://segmentfault.com/a/1190000003933990 一.前言 Sizzle原来是jQuery里面的 ...
[jQuery] jQuery是通过哪个方法和Sizzle选择器结合的？
[jQuery] jQuery是通过哪个方法和Sizzle选择器结合的? 通过创建一个div元素,检测被传入的fn是否被当前浏览器支bai持 function assert( fn ) { var d ...

Sizzle选择器揭秘--Sizzle过滤器

Sizzle选择器揭秘--Sizzle过滤器相关推荐

最新文章

热门文章