前面分析了选择器的结构和几个解析函数,接下来分析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. 4.Powershell交互界面

    Powershell提供两种接口:交互式和自动化脚本 先学下如何与Powershell Console和平共处,通过Powershell Console和机器学会对话. 通过以上一个简单测试,知道Po ...

  2. IEEE/ACM ASONAM 2014 Industry Track Call for Papers

    IEEE/ACM International Conference on Advances in Social Network Analysis and Mining (ASONAM) 2014 In ...

  3. Microsoft .NET Framework 4.0.3版下载

    适用于 Microsoft .NET Framework 4 的更新 4.0.3,其中包含一系列新增功能,用于满足高端客户的功能需求和重要 .NET Framework 方案的需求. http://w ...

  4. ABP理论学习之数据过滤器

    返回总目录 本篇目录 介绍 预定义过滤器 关闭过滤器 开启过滤器 设置过滤器参数 定义自定义过滤器 其他ORM 介绍 软删除模式通常用于不会真正从数据库删除一个实体而是仅仅将它标记为"已删除 ...

  5. HTML5- Canvas入门(一)

    周老虎落网的时候,网易跟腾讯都推出了牛逼轰轰的HTML5页面来展示其关系网(网易http://news.163.com/special/data_zyk/  ,腾讯http://news.qq.com ...

  6. 《HiWind企业快速开发框架实战》(0)目录及框架简介

    <HiWind企业快速开发框架实战>(0)目录及框架简介 本系列主要介绍一款企业管理系统快速开发框架,该框架旨在快速完成企业管理系统,并实现易维护可移植的目标. 使用逐个系统模块进行编码的 ...

  7. 使用vbs脚本进行批量编码转换

    使用vbs脚本进行批量编码转换 最近需要使用SourceInsight查看分析在Linux系统下开发的项目代码,我们知道Linux系统中文本文件默认编码格式是UTF-8,而Windows中文系统中的默 ...

  8. [ASP.NET MVC 小牛之路]11 - Filter

    Filter(筛选器)是基于AOP(面向方面编程)的设计,它的作用是对MVC框架处理客户端请求注入额外的逻辑,以非常简单优美的方式实现横切关注点(Cross-cutting Concerns).横切关 ...

  9. [公告]Senparc.Weixin.MP v14.2.1 升级说明

    在Senparc.Weixin.MP v14.2.1中,所有Senparc.Weixin.MP下的Container,命名空间已经从 Senparc.Weixin.MP.CommonAPIs 改为了  ...

  10. 《Node web开发》笔记

    还是因为学习kibana,才开始了解node. Node是一种基于事件驱动的异步系统,基于Chrome的引擎V8. Node中由于大量的使用模块,因此出现了很多开源模块,有点像java社区的样子. 笔 ...