相思资源网 Design By www.200059.com

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

jQuery.fn.find( selector )

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

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

if ( typeof selector !== "string" ) {
 self = this;
 return this.pushStack( jQuery( selector ).filter(function() {
  for ( i = 0; i < len; i++ ) {
   if ( jQuery.contains( self[ i ], this ) ) {
    return true;
   }
  }
 }) );
}

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

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

ret = [];
for ( i = 0; i < len; i++ ) {
 //第二个参数是表示context
 jQuery.find( selector, this[ i ], ret );
}
//$( selector, context )变成$( context ).find( selector ),需要去重和pushStack
ret = this.pushStack( len > 1 " " : "" ) + selector;
return ret;
jQuery.fn.closest( selectors, context )

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

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

  代码中的处理步骤为

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

pos = rneedsContext.test( selectors ) || typeof selectors !== "string" "htmlcode">
for ( ; i < l; i++ ) {
 cur = this[i];
 while ( cur && cur.ownerDocument && cur !== context && cur.nodeType !== 11 ) {
  if ( pos "htmlcode">
jQuery.each({
  parent: function( elem ) {…},
  parents: function( elem ) {…},
  parentsUntil: function( elem, i, until ) {…},
  next: function( elem ) {…},
  prev: function( elem ) {…},
  nextAll: function( elem ) {…},
  prevAll: function( elem ) {…},
  nextUntil: function( elem, i, until ) {…},
  prevUntil: function( elem, i, until ) {…},
  siblings: function( elem ) {…},
  children: function( elem ) {…},
  contents: function( elem ) {…}
 }, function( name, fn ) {
  jQuery.fn[ name ] = function( until, selector ) {
   var ret = jQuery.map( this, fn, until );
   //过滤
   ...
   return this.pushStack( ret );
  };
 });

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

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

if ( !runtil.test( name ) ) {
 selector = until;
}

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

if ( selector && typeof selector === "string" ) {
 ret = jQuery.filter( selector, ret );
}

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

ret = this.length > 1 && !guaranteedUnique[ name ] "htmlcode">
if ( this.length > 1 && rparentsprev.test( name ) ) {
 ret = ret.reverse();
}

  最后,返回包裹后的结果

return this.pushStack( ret ); 

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

dir: function( elem, dir, until ) {
 var matched = [],
 cur = elem[ dir ];
 while ( cur && cur.nodeType !== 9 && (until === undefined || cur.nodeType !== 1 || !jQuery( cur ).is( until )) ) {
  if ( cur.nodeType === 1 ) {
   matched.push( cur );
  }
  cur = cur[dir];
 }
 return matched;
},
//获取节点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;
 } 
jQuery.fn.add( selector, context )和jQuery.fn. addBack( selector )

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

add: function( selector, context ) {
 var set = typeof selector === "string" "htmlcode">
//执行相同的过滤或者不过滤的功能
function winnow( elements, qualifier, keep ) {
 // Can't pass null or undefined to indexOf in Firefox 4
 // Set to 0 to skip string check
 qualifier = qualifier || 0;
 //如果过滤条件是函数,则通过过滤函数过滤
 if ( jQuery.isFunction( qualifier ) ) {
  return jQuery.grep(elements, function( elem, i ) {
   var retVal = !!qualifier.call( elem, i, elem );
   return retVal === keep;
  });
 //如果过滤条件是DOM相关类型,通过比较节点是否相同来过滤
 } else if ( qualifier.nodeType ) {
  return jQuery.grep(elements, function( elem ) {
   return ( elem === qualifier ) === keep;
  });
 //如果过滤条件是字符串
 } else if ( typeof qualifier === "string" ) {
  //过滤出elements中的节点元素
  var filtered = jQuery.grep(elements, function( elem ) {
   return elem.nodeType === 1;
  });
  // 其中isSimple = /^.[^:#\[\.,]*$/
  if ( isSimple.test( qualifier ) ) {
   return jQuery.filter(qualifier, filtered, !keep);
  } else {
   //查找filtered中满足筛选条件qualifier的节点
   qualifier = jQuery.filter( qualifier, filtered );
  }
 }
 //过滤出elements中满足过滤条件的元素
 return jQuery.grep(elements, function( elem ) {
  return ( jQuery.inArray( elem, qualifier ) >= 0 ) === keep;
 });
}

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

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

jQuery.filter: function( expr, elems, not ) {
 if ( not ) {
  expr = ":not(" + expr + ")";
 }
 //其中matchesSelector和matches是Sizzle中的函数。matchesSelector是判断单个元素elem是否满足表达式expr,matches是查找元素集合elems中满足表达式expr的项
 return elems.length === 1 "htmlcode">
if ( !elem ) {
 return ( this[0] && this[0].parentNode ) "htmlcode">
if ( typeof elem === "string" ) {
 //在数组jQuery( elem )中搜索指定的值,并返回其索引值
 return jQuery.inArray( this[0], jQuery( elem ) );
}

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

return jQuery.inArray(elem.jquery "dataintable" style="border-bottom: rgb(170,170,170) 1px solid; text-align: left; border-left: rgb(170,170,170) 1px solid; padding-bottom: 0px; widows: 1; text-transform: none; background-color: rgb(249,249,249); text-indent: 0px; margin: 10px 0px 0px; padding-left: 0px; width: 709px; letter-spacing: normal; padding-right: 0px; border-collapse: collapse; font: 12px Verdana, Arial, 宋体; white-space: normal; color: rgb(0,0,0); border-top: rgb(170,170,170) 1px solid; border-right: rgb(170,170,170) 1px solid; word-spacing: 0px; padding-top: 0px; -webkit-text-stroke-width: 0px">
  
    
      选择器
      实例
      选取
    
    
      *
      $("*")
      所有元素
    
    
      #id
      $("#lastname")
      id="lastname" 的元素
    
    
      .class
      $(".intro")
      所有 class="intro" 的元素
    
    
      element
      $("p")
      所有 <p> 元素
    
    
      .class.class
      $(".intro.demo")
      所有 class="intro" 且 class="demo" 的元素
    
    
       
       
       
    
    
      :first
      $("p:first")
      第一个 <p> 元素
    
    
      :last
      $("p:last")
      最后一个 <p> 元素
    
    
      :even
      $("tr:even")
      所有偶数 <tr> 元素
    
    
      :odd
      $("tr:odd")
      所有奇数 <tr> 元素
    
    
       
       
       
    
    
      :eq(index)
      $("ul li:eq(3)")
      列表中的第四个元素(index 从 0 开始)
    
    
      :gt(no)
      $("ul li:gt(3)")
      列出 index 大于 3 的元素
    
    
      :lt(no)
      $("ul li:lt(3)")
      列出 index 小于 3 的元素
    
    
      :not(selector)
      $("input:not(:empty)")
      所有不为空的 input 元素
    
    
       
       
       
    
    
      :header
      $(":header")
      所有标题元素 <h1> - <h6>
    
    
      :animated
       
      所有动画元素
    
    
       
       
       
    
    
      :contains(text)
      $(":contains('W3School')")
      包含指定字符串的所有元素
    
    
      :empty
      $(":empty")
      无子(元素)节点的所有元素
    
    
      :hidden
      $("p:hidden")
      所有隐藏的 <p> 元素
    
    
      :visible
      $("table:visible")
      所有可见的表格
    
    
       
       
       
    
    
      s1,s2,s3
      $("th,td,.intro")
      所有带有匹配选择的元素
    
    
       
       
       
    
    
      [attribute]
      $("[href]")
      所有带有 href 属性的元素
    
    
      [attribute=value]
      $("[href='#']")
      所有 href 属性的值等于 "#" 的元素
    
    
      [attribute!=value]
      $("[href!='#']")
      所有 href 属性的值不等于 "#" 的元素
    
    
      [attribute$=value]
      $("[href$='.jpg']")
      所有 href 属性的值包含以 ".jpg" 结尾的元素
    
    
       
       
       
    
    
      :input
      $(":input")
      所有 <input> 元素
    
    
      :text
      $(":text")
      所有 type="text" 的 <input> 元素
    
    
      :password
      $(":password")
      所有 type="password" 的 <input> 元素
    
    
      :radio
      $(":radio")
      所有 type="radio" 的 <input> 元素
    
    
      :checkbox
      $(":checkbox")
      所有 type="checkbox" 的 <input> 元素
    
    
      :submit
      $(":submit")
      所有 type="submit" 的 <input> 元素
    
    
      :reset
      $(":reset")
      所有 type="reset" 的 <input> 元素
    
    
      :button
      $(":button")
      所有 type="button" 的 <input> 元素
    
    
      :image
      $(":image")
      所有 type="image" 的 <input> 元素
    
    
      :file
      $(":file")
      所有 type="file" 的 <input> 元素
    
    
       
       
       
    
    
      :enabled
      $(":enabled")
      所有激活的 input 元素
    
    
      :disabled
      $(":disabled")
      所有禁用的 input 元素
    
    
      :selected
      $(":selected")
      所有被选取的 input 元素
    
    
      :checked
      $(":checked")
      所有被选中的 input 元素
    
  

标签:
jquery1.9.1,jquery筛选

相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com

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

暂无Jquery 1.9.1源码分析系列(十二)之筛选操作的评论...

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。