Jquery 1.9.1源码分析系列(十二)之筛选操作

前端之家收集整理的这篇文章主要介绍了Jquery 1.9.1源码分析系列(十二)之筛选操作前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

废话不多说了直接奔入主题了。

  find接受一个参数表达式selector:选择器(字符串)、DOM元素(Element)、jQuery对象。分两种情况处理:

  第一种,如果传入的参数是非字符串,则先通过jQuery选择器将selector查找出来,然后过滤出包含于当前jQuery对象所匹配的元素的节点。

可以看出过滤条件中jQuery.contains( self[ i ],this )是关键,该函数使用的是Sizzle选择器中的函数,在Sizzle引擎中有分析,详情点击。

第二种,如果选择器是字符串,调用jQuery.find (= Sizzle)直接处理

1 ? jQuery.unique( ret ) : ret ); ret.selector = ( this.selector ? this.selector + " " : "" ) + selector; return ret;

  第二个参数是可选的。函数用于从当前匹配元素开始,逐级向上级选取符合指定表达式的第一个元素,并以jQuery对象的形式返回。

  这里的表达式包括:选择器(字符串)、DOM元素(Element)、jQuery对象。

  

代码中的处理步骤为

  1.根据传递的参数先查询出结果保存在pos中。

  2.遍历当前jQuery对象的每一个元素,从这个元素开始,逐级向上级选取符合指定表达式的第一个祖先元素。

-1 : jQuery.find.matchesSelector(cur,selectors) ) { ret.push( cur ); break; } cur = cur.parentNode; } } return this.pushStack( ret.length > 1 ? jQuery.unique( ret ) : ret );

  parents() 和 .closest() 方法类似,它们都沿 DOM 树向上遍历。但区别也很大closest找到第一个符合条件就截止,parents是找到所有符合条件的集合。

jQuery.fn. parent/ parents/ parentsUntil/ next/ prev/ nextAll/ prevAll/ nextUntil/ prevUntil/ siblings/ children/ contents详解

  

以上几组筛选被放在一起处理,源码如下

  可以看出,这几个筛选步骤一致。都是先通过map函数把当前jQuery对象每个匹配的元素代入相应的匹配函数(fn)中获取出结果然后在进行后续的过滤。

  我们先看一下后面的过滤(已经通过jQuery.map( this,until )获取到了备选种子ret)   首先,并不是所有的筛选函数都有until这个参数,只有以Until结尾的几个筛选才需要这个参数,其他的筛选只有selector这个参数。

  其次,如果有选择器,则通过选择器过滤一下先前查找结果ret

  然后,guaranteedUnique里面的几种筛选条件(children/contents/next/prev)在当前jQuery对象所匹配的元素个数有多个的时候,通过每个匹配元素获取到的结果保存在结果集ret中,且不需要去重。其他筛选是要去重的。点击查看jQuery.unique方法详解

1 && !guaranteedUnique[ name ] ? jQuery.unique( ret ) : ret;

  另外,还需要处理的特殊情况是: 如果当前jQuery对象所匹配的元素有多个,则使用parents /prevUntil /prevAll这三种筛选的结果需要倒序排列。需要倒序的原因:jQuery.unique使用的是Sizzle引擎中的排序函数Sizzle .uniqueSort,这个排序函数会根据文档最顶层对象到最底层的方式排列。

1 && rparentsprev.test( name ) ) { ret = ret.reverse(); }

  最后,返回包裹后的结果

  上面说了主题的框架结构,下面说一下这一组筛选器匹配函数里面用到的两个函数jQuery.dir和jQuery. sibling,直接上源码 //从当前元素elem指定的dir对应的节点开始一直查找dir,并将这些节点保存在matched中,直到循环终止。注意:结果中不包含elem节点

获取节点n及其兄弟节点中非elem的节点集合r sibling: function( n,elem ) { var r = []; for ( ; n; n = n.nextSibling ) { if ( n.nodeType === 1 && n !== elem ) { r.push( n ); } } return r; } //找到当前元素cur的下一个dir为止 function sibling( cur,dir ) { do { cur = cur[ dir ]; } while ( cur && cur.nodeType !== 1 ); return cur; } 

  add函数是向当前匹配元素中添加符合指定表达式的元素,并以jQuery对象的形式返回。add可以接收包括:选择器(字符串)、HTML内容(字符串)、DOM元素(Element)、jQuery对象。处理比较简单,直接上源码

获取的结果集拼接到当前对象上 all = jQuery.merge( this.get(),set ); //返回新的拼接结果 return this.pushStack( jQuery.unique(all) ); }   jQuery.fn.add和jQuery.fn.not相对应。jQuery.fn.not后面再说。   jQuery.fn.addBack将之前匹配的元素加入到当前匹配的元素中,并以新的jQuery对象的形式返回。 addBack: function( selector ) { return this.add( selector == null ? this.prevObject : this.prevObject.filter(selector) ); } jQuery.fn.andSelf = jQuery.fn.addBack;    jQuery.fn.not( selector )和jQuery.fn.filter( selector ) not: function( selector ) { return this.pushStack( winnow(this,selector,false) ); } filter: function( selector ) { return this.pushStack( winnow(this,true) ); },

  not和filter都是操作本身的集合,not是过滤掉本身集合中满足过滤条件selector的项,留下其他项。而filter是留下满足过滤条件selector的项。

  关键是function winnow( elements,qualifier,keep )函数。这个函数功能是执行相同的过滤或者不过滤的功能。过滤条件qualifier有三种:函数、DOM节点、字符串。keep:true表示保留满足过滤条件的项,false表示保留不满足过滤条件的项。

winnow的源码注释如下

= 0 ) === keep; }); }

  其中用到jQuery.grep,grep详解点击这里。

  jQuery.filter( expr,elems,not )这个低级api专门用来处理jQuery.fn.filter中过滤条件为字符串的情况。

函数。matchesSelector是判断单个元素elem是否满足表达式expr,matches是查找元素集合elems中满足表达式expr的项 return elems.length === 1 ? jQuery.find.matchesSelector(elems[0],expr) ? [ elems[0] ] : [] : jQuery.find.matches(expr,elems); },jQuery.fn.index( elem )

  index函数实际上是一个多功能函数的集合。

  第一个功能:不传递elem参数,则表示取当前jQuery对象(jQuery对象的第一个元素)在其所有同辈元素中的位置。

  第二个功能:如果参数为String类型则将其视作选择器,返回当前元素在选择器所匹配的元素中的索引位置。如果该选择器不匹配任何元素或者当前元素不在匹配到的元素内,则返回-1。

搜索指定的值,并返回其索引值 return jQuery.inArray( this[0],jQuery( elem ) ); }

  第三个功能:如果object为DOM元素或jQuery对象,则返回该元素(或该jQuery对象中的第一个元素)在当前jQuery对象所匹配的元素中的索引位置。

  其他的筛选处理就不分析了。看源码即可明白。

jquery选择器

元素. 元素 元素)))) -
) 元素]属性的元素=]属性的值等于 "#" 的元素!=]属性的值不等于 "#" 的元素$=]属性的值包含以 ".jpg" 结尾的元素 元素 元素 元素dio")dio" 的 元素 元素 元素 元素 元素 元素 元素 原文链接:https://www.f2er.com/jquery/51347.html

猜你在找的jQuery相关文章