jQuery技术

jQuery选择器源码解读(八):addCombinator函数【站长博客网】

字号+ 作者:H5之家 来源:H5之家 2017-04-27 16:00 我要评论( )

这篇文章主要介绍了jQuery选择器源码解读(八):addCombinator函数,本文用详细的注释解读了addCombinator函数的实现源码,需要的朋友可以参考下

相关推荐:    

  • jQuery获得包含margin的outerWidth和outerHeight的
  •     
  • jQuery使用load()方法载入另外一个网页文件
  •     
  • jquery表单验证插件(jquery.validate.js)的
  •     
  • jQuery使用fadeout实现元素渐隐效果的方法
  •     
  • jquery实现右键菜单插件
  •     
  • JQuery调用绑定click事件的3种写法
  •  

    function addCombinator(matcher, combinator, base)

    1、源码

    复制代码 代码如下:


    function addCombinator(matcher, combinator, base) {
     var dir = combinator.dir, checkNonElements = base
       && dir === "parentNode", doneName = done++;

     return combinator.first ?
     // Check against closest ancestor/preceding element
     function(elem, context, xml) {
      while ((elem = elem[dir])) {
       if (elem.nodeType === 1 || checkNonElements) {
        return matcher(elem, context, xml);
       }
      }
     } :

     // Check against all ancestor/preceding elements
     function(elem, context, xml) {
      var data, cache, outerCache, dirkey = dirruns + " " + doneName;

      // We can't set arbitrary data on XML nodes, so they don't
      // benefit from dir caching
      if (xml) {
       while ((elem = elem[dir])) {
        if (elem.nodeType === 1 || checkNonElements) {
         if (matcher(elem, context, xml)) {
          return true;
         }
        }
       }
      } else {
       while ((elem = elem[dir])) {
        if (elem.nodeType === 1 || checkNonElements) {
         outerCache = elem[expando] || (elem[expando] = {});
         if ((cache = outerCache[dir])
           && cache[0] === dirkey) {
          if ((data = cache[1]) === true
            || data === cachedruns) {
           return data === true;
          }
         } else {
          cache = outerCache[dir] = [ dirkey ];
          cache[1] = matcher(elem, context, xml)
            || cachedruns;
          if (cache[1] === true) {
           return true;
          }
         }
        }
       }
      }
     };
    }

    2、功能

    生成关系选择器的执行函数。

    3、参数

    matcher——位置关系前连续的过滤选择器匹配函数数组,该函数用于匹配通过位置关系获得的节点是否符合选择器要求。在实际执行过程中,该函数可能是关系选择器前已生成的elementMatcher(matchers)。例如:div.map>span,在Sizzle编译遇到>时,会将div.map的编译函数作为第一个参数调用addCombinator函数,用以检查获取的span父节点是否满足div.map这两个条件。

    combinator——关系选择器对应Expr.relative中的值,Expr.relative中各种关系选择器的值如下。使用该参数的first属性来确定返回的是仅检查紧邻对象的函数还是遍历所有可能对象的函数。将通过如下代码:elem = elem[dir],获取指定位置关系的节点,其中dir等于combinator.dir。

    复制代码 代码如下:


    Expr.relative : {
     ">" : {
      dir : "parentNode",
      first : true
     },
     " " : {
      dir : "parentNode"
     },
     "+" : {
      dir : "previousSibling",
      first : true
     },
     "~" : {
      dir : "previousSibling"
     }
    }

    base——该参数与combinator.dir一起,确定变量checkNonElement的值,代码如下。该值从字面理解为当前检查的是非DOM元素,就是当elem.nodeType!=1的时候,若该值为true,则会执行匹配函数,否则结束本次循环。

    4、返回函数

    4.1 若关系选择器是>或+,则返回如下函数:

    复制代码 代码如下:


    function(elem, context, xml) {
     while ((elem = elem[dir])) {
      if (elem.nodeType === 1 || checkNonElements) {
       return matcher(elem, context, xml);
      }
     }
    }

    4.1.1 功能
    若检查element类型节点(即checkNonElements==false),迭代获取elem指定位置关系的第一个element类型节点(elem.nodeType == 1),执行匹配函数,检查该节点是否符合要求,若符合返回true,否则返回false;

    若检查所有类型节点(即checkNonElements==true),获取elem指定位置关系的紧邻节点,执行匹配函数,检查该节点是否符合要求,若符合返回true,否则返回false;
    有些人或许会问,不是说是紧邻关系吗?那代码中为何要出现迭代获取这一过程呢?这是因为,个别浏览器会把节点文本之间的换行符看成是TextNode,故在处理过程中,需要跳过这些节点,直到下一个element节点。
    4.1.2 参数
    elem——待检查的单个节点元素。

    context——执行整个选择器字符串匹配的上下文节点,大部分时候是没有用途。

    xml——当前搜索对象是HTML还是XML文档,若是HTML,则xml参数为false。

    4.2  若关系选择器是~或空格,则返回如下函数:

    复制代码 代码如下:


    //Check against all ancestor/preceding elements
    function(elem, context, xml) {
     var data, cache, outerCache, dirkey = dirruns + " " + doneName;

     

    1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    • 简洁实用的BootStrap jQuery手风琴插件

      简洁实用的BootStrap jQuery手风琴插件

      2017-04-27 09:00

    • 最新:jquery.mark

      最新:jquery.mark

      2017-04-27 08:00

    • Laravel 5 中基于 jQuery 实现分层级的类目树结构实例教程 Larav

      Laravel 5 中基于 jQuery 实现分层级的类目树结构实例教程 Larav

      2017-04-27 08:01

    • 晚报:jQuery和CSS3 360度产品预览特效

      晚报:jQuery和CSS3 360度产品预览特效

      2017-04-27 08:00

    网友点评