前面分析了选择器的结构和几个解析函数,接下来分析jQuery对象的伪类选择器。这里所谓的jQuery对象的伪类选择器就是从已有的jQuery对象(元素集合)中筛选出指定的集合出来。

4.    jQuery的伪类选择函数


  先混个脸熟,把所有能找到的jQuery的伪类选择器都列出来。

  jQuery.fn.eq(函数用于获取当前jQuery对象所匹配的元素中指定索引的元素,并返回封装该元素的jQuery对象)

  jQuery.fn.first(函数用于获取当前jQuery对象所匹配的元素中的第一个元素,并返回封装该元素的jQuery对象)

  jQuery.fn.last(函数用于获取当前jQuery对象所匹配的元素中的最后一个元素,并返回封装该元素的jQuery对象)

  jQuery.fn.slice(函数用于选取匹配元素中一段连续的元素,并以jQuery对象的形式返回)

  jQuery.fn.map(函数用于处理当前jQuery对象匹配的所有元素,并将处理结果封装为新的数组。返回封装该数组的jQuery对象)

  jQuery.fn.end(函数用于返回最近一次"破坏性"操作之前的jQuery对象)

  jQuery.fn.find(选取每个匹配元素的符合指定表达式的后代元素,并以jQuery对象的形式返回)

  jQuery.fn.has(筛选出包含特定后代的元素,并以jQuery对象的形式返回)

  jQuery.fn.is(判断当前jQuery对象所匹配的元素是否符合指定的表达式。只要其中有至少一个元素符合该表达式就返回true,否则返回false)

  jQuery.fn.hasClass(指示当前jQuery对象所匹配的元素是否含有指定的css类名(elem.className),只需要其中有一个元素有即返回true)

  jQuery.fn.closest(从当前匹配元素开始,逐级向上级选取符合指定表达式的第一个元素,并以jQuery对象的形式返回)。

  jQuery.fn.filter(函数用于筛选出符合指定表达式的元素,并以jQuery对象的形式返回)

  jQuery.fn.has(函数用于筛选出包含特定后代的元素,并以jQuery对象的形式返回)

  jQuery.fn.not(函数用于从匹配元素中删除符合指定表达式的元素,并以jQuery对象的形式返回保留的元素)

  jQuery.fn.add(函数用于向当前匹配元素中添加符合指定表达式的元素,并以jQuery对象的形式返回,与not相反)

  jQuery.fn.addBack(函数用于将之前匹配的元素加入到当前匹配的元素中,并以新的jQuery对象的形式返回)

  jQuery.fn.children(函数用于选取每个匹配元素的子元素,并以jQuery对象的形式返回。你还可以使用选择器进一步缩小筛选范围,筛选出符合指定选择器的元素)

  jQuery.fn.parent(选取每个匹配元素的父元素,并以jQuery对象的形式返回)

  jQuery.fn.parents(选取每个匹配元素的祖先元素,并以jQuery对象的形式返回)

  jQuery.fn.parentsUntil(选取每个匹配元素的祖先元,直到遇到符合指定表达式的元素为止,并以jQuery对象的形式返回)

  jQuery.fn.next(筛选每个匹配元素之后紧邻的同辈元素,并以jQuery对象的形式返回)

  jQuery.fn.prev(筛选每个匹配元素之前紧邻的同辈元素,并以jQuery对象的形式返回)

  jQuery.fn.nextAll(选取每个匹配元素之后的所有同辈元素,并以jQuery对象的形式返回)

  jQuery.fn.prevAll(选取每个匹配元素之前的所有同辈元素,并以jQuery对象的形式返回)

  jQuery.fn.nextUntil(选取每个匹配元素之后所有的同辈元素,直到遇到符合指定表达式的元素为止,并以jQuery对象的形式返回)

  jQuery.fn.prevUntil(选取每个匹配元素之前所有的同辈元素,直到遇到符合指定表达式的元素为止,并以jQuery对象的形式返回)

  jQuery.fn.siblings(选取每个匹配元素的所有同辈元素(不包括自己),并以jQuery对象的形式返回)

  jQuery.fn.contents(函数用于选取当前匹配元素的所有子节点(包括文本节点、注释节点等),并以jQuery对象的形式返回)

  jQuery.fn.offsetParent(函数用于查找离当前匹配元素最近的被定位的祖辈元素,所谓"被定位的元素",就是元素的CSS position属性值为absolute、relative或fixed(只要不是默认的static即可))

  可以看到,我将刷选的所有操作分成了两个部分。第一个部分是这一节要分析的内容,后面的选择器等分析完Sizzle后再来分析。

在分析之前需要一点准备知识

a.jQuery.fn.pushStack机制和回溯jQuery.fn.end


jQuery.fn.pushStack机制

  jQuery每次遍历方法最终都会调用pushStack方法,把原来的对象绑到新对象的prevObject上,然后将新对象返回。举个例子

  var p = $(p);
  var peq = p.eq(0);//p.eq(0)过程中执行了this.prevObject = p;
  peq.prevObject == p;//true

  我们来看一下源码:

  pushStack: function( elems ) {// 创建一个新的jQuery对象并将elems绑在上面
    var ret = jQuery.merge( this.constructor(), elems );
    ret.prevObject = this;// 把老的对象赋值给prevObject
    ret.context = this.context;       return ret;// 返回新对象
  }

  好处显而易见,我想要回溯到上一个jQuery对象就有门路了。

回溯jQuery.fn.end

  源码比较简单,直接返回prevObject即可

  end: function() {
    return this.prevObject || this.constructor(null);
  }

  原理是比较简单,但是用处可不小。举个例子:

  我们知道获取某个标签(例如p标签)的某个样式(比如top)的值是使用$("p").css("top"),得到的是一个字符串,不能再使用链式调用设置该标签的子节点(例如span节点)的样式(比如设置left为10px),写法如下:

  var pTop = $("p").css("top");
  $("p").find("span").css("left","10px");
  //而使用回溯end:
  var pTop = $("p").find("span").css("left","10px").end().css("top");

  比较两者,从效率上来讲后者要高,毕竟不用两次初始化jQuery对象;而且一句话就搞定,简介多了(可能该例子没有体现出来,但是如果是设置更多的属性就体现出来了,前者需要很多行才能实现)

b. jQuery.fn.eq/first/last/slice


  eq()函数的源码比较简单,直接冲jQuery对象(是一个数组)取对应下表的元素节点即可。和直接使用下标或者get方法获得到DOM节点对象不同,eq获取的元素节点最后调用pushStack组装成jQuery对象返回。源码如下

  eq: function( i ) {
    var len = this.length,
      j = +i + ( i < 0 ? len : 0 );
    return this.pushStack( j >= 0 && j < len ? [ this[j] ] : [] );
  }

  first/last函数基于eq函数,分别返回this.eq( 0 )和this.eq( -1 )的结果即可。

  slice函数也比较简单,因为jQuery对象本身就是一个类数组,使用apply方法使用数组的slice方式实现。源码如下:

  slice: function() {
    //core_deletedIds = [],core_slice = core_deletedIds.slice,
    return this.pushStack( core_slice.apply( this, arguments ) );
  }

c.jQuery.fn.map(callback)


  遍历jQuery对象的每个元素并将每个元素的信息作为参数到回调函数中执行回调,最终生成包含所有回调的返回值的新的 jQuery 对象。

  查看jQuery.fn.map源码可以看到,底层调用jQuery.map实现将遍历jQuery对象,将每个元素的信息作为参数到回调函数中执行回调并收集回调结果。jQuery.fn.map的源码如下:

  jQuery.fn.map: function( callback ) {
    return this.pushStack( jQuery.map(this, function( elem, i ) {
      return callback.call( elem, i, elem );
    }));
  }

  关键是jQuery.map( elems, callback, arg )函数,该函数的第二个参数callback起到传递分解后的单个jQuery元素的功能;arg 内部使用,不用管。源码如下:

  jQuery.map: function( elems, callback, arg ) {
    var value,
      i = 0,
      length = elems.length,
      isArray = isArraylike( elems ),
      ret = [];     // 如果elems是数组则循环执行回调将结果保存在ret中
    if ( isArray ) {
      for ( ; i < length; i++ ) {
        value = callback( elems[ i ], i, arg );
        if ( value != null ) {
          ret[ ret.length ] = value;
        }
      }
    // 对单个元素/对象,遍历元素/对象将回调结果保存在ret中
    } else {
      for ( i in elems ) {
        value = callback( elems[ i ], i, arg );
        if ( value != null ) {
          ret[ ret.length ] = value;
        }
      }
    }
    return core_concat.apply( [], ret ); // 拼合任何嵌套的数组
  },

  举例:

  <input type='text' value='1'>
  <input type='text' value='2'>   <script>
  var t = $("input").map(function(){
    if($(this).val() == 1){
      return this;
    };
  });//返回<input type='text' value='1'>的DOM对象的jQuery封装结果,等同于$("input[value='1']");当然他们是两个对象,对象比较是基于引用的,使用==符号比较肯定是false.
  </script>

  如果觉得本文不错,请点击右下方【推荐】!

jQuery-1.9.1源码分析系列(二)jQuery选择器续2——筛选的更多相关文章

  1. [Tomcat 源码分析系列] (二) : Tomcat 启动脚本-catalina.bat

    概述 Tomcat 的三个最重要的启动脚本: startup.bat catalina.bat setclasspath.bat 上一篇咱们分析了 startup.bat 脚本 这一篇咱们来分析 ca ...

  2. jQuery源码分析系列

    声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢! 版本截止到2013.8.24 jQuery官方发布最新的的2.0.3为准 附上每一章的源码注释分析 :https://git ...

  3. [转]jQuery源码分析系列

    文章转自:jQuery源码分析系列-Aaron 版本截止到2013.8.24 jQuery官方发布最新的的2.0.3为准 附上每一章的源码注释分析 :https://github.com/JsAaro ...

  4. jQuery源码分析系列(转载来源Aaron.)

    声明:非本文原创文章,转载来源原文链接Aaron. 版本截止到2013.8.24 jQuery官方发布最新的的2.0.3为准 附上每一章的源码注释分析 :https://github.com/JsAa ...

  5. jQuery源码分析系列——来自Aaron

    jQuery源码分析系列——来自Aaron 转载地址:http://www.cnblogs.com/aaronjs/p/3279314.html 版本截止到2013.8.24 jQuery官方发布最新 ...

  6. jQuery-1.9.1源码分析系列完毕目录整理

    jQuery 1.9.1源码分析已经完毕.目录如下 jQuery-1.9.1源码分析系列(一)整体架构 jQuery-1.9.1源码分析系列(一)整体架构续 jQuery-1.9.1源码分析系列(二) ...

  7. jquery2源码分析系列

    学习jquery的源码对于提高前端的能力很有帮助,下面的系列是我在网上看到的对jquery2的源码的分析.等有时间了好好研究下.我们知道jquery2开始就不支持IE6-8了,从jquery2的源码中 ...

  8. [转] jQuery源码分析-如何做jQuery源码分析

    jQuery源码分析系列(持续更新) jQuery的源码有些晦涩难懂,本文分享一些我看源码的方法,每一个模块我基本按照这样的顺序去学习. 当我读到难度的书或者源码时,会和<如何阅读一本书> ...

  9. MyCat源码分析系列之——结果合并

    更多MyCat源码分析,请戳MyCat源码分析系列 结果合并 在SQL下发流程和前后端验证流程中介绍过,通过用户验证的后端连接绑定的NIOHandler是MySQLConnectionHandler实 ...

  10. MyCat源码分析系列之——SQL下发

    更多MyCat源码分析,请戳MyCat源码分析系列 SQL下发 SQL下发指的是MyCat将解析并改造完成的SQL语句依次发送至相应的MySQL节点(datanode)的过程,该执行过程由NonBlo ...

随机推荐

  1. sql SYS对象集合

    select * from SYS.objects select * from SYS.all_objects select * from SYS.tables select * from SYS.c ...

  2. Java工作环境笔记

    环境 1. Jvm最简生存指南: http://www.importnew.com/10127.html 2. 所有路径中,不要出现中文,即使开始的时候,调试Tomcat时,路径有中文也可以,你真不知 ...

  3. Lesson 13 The Greenwood Boys

    Text The Greenwood Boys are group of pop singers. At present, they are visiting all parts of the cou ...

  4. [.net 面向对象程序设计进阶] (11) 序列化(Serialization)(三) 通过接口 IXmlSerializable 实现XML序列化 及 通用XML类

    [.net 面向对象程序设计进阶] (11) 序列化(Serialization)(三) 通过接口 IXmlSerializable 实现XML序列化 及 通用XML类 本节导读:本节主要介绍通过序列 ...

  5. [ASP.NET MVC 大牛之路]01 - 开篇

    匆匆2014,转眼就到末尾了.在这一年,你还有哪事情些想做而没有做? 2014年在我身上发生了两件意义重大的事,一是正月初一宝宝出生,我升级成为了爸爸:二是进入了一家创业公司,成为了技术负责人. 去年 ...

  6. Pointer's NULL And 0

    问题起源 在使用Qt框架的时候, 经常发现一些构造函数 *parent = 0 这样的代码. 时间长了, 就觉的疑惑了. 一个指针不是等于NULL吗? 这样写, 行得通吗? 自己测试一下就可以了. 测 ...

  7. Java中instanceof和isInstance区别详解

     一次性搞定instanceof和isInstance,instanceof和isInstance长的非常像,用法也很类似,先看看这两个的用法: obj.instanceof(class) 也就是说这 ...

  8. LInux MySQL 数据库 的一些操作

    数据库安装: ………… 创建数据库连接新用户: 1.登录mysql #mysql -u root -p 2.新增用户 insert into mysql.user(Host,User,Password ...

  9. iOS 离屏渲染的研究

    GPU渲染机制: CPU 计算好显示内容提交到 GPU,GPU 渲染完成后将渲染结果放入帧缓冲区,随后视频控制器会按照 VSync 信号逐行读取帧缓冲区的数据,经过可能的数模转换传递给显示器显示. G ...

  10. Struts2学习笔记 - Action篇<动态方法调用>

    有三种方法可以使一个Action处理多个请求 动态方法调用DMI 定义逻辑Acton 在配置文件中使用通配符 这里就说一下Dynamic Method nvocation ,动态方法调用,什么是动态方 ...