前面分析了选择器的结构和几个解析函数,接下来分析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. Visual Studio 2015 各版本对比及下载地址

    2015年7月20日23时30分,微软举行了Visual Studio 2015的发布会,跟随者Visual Studio 2015 而来的是,.net 开源,C#支持wp,ios,android三大 ...

  2. 使用Spring JdbcTemplate实现数据库操作

    今天我来演示 关于JDBCTemplate实现对数据库的查询和添加 首先是添加 第一步大家都知道 创建一个实体类 然后写一个方法 把实体类当参数传进去 在实现这个接口 JdbcDaoSupport这个 ...

  3. css确定元素水平居中和垂直居中

    ---恢复内容开始--- 首先,我们在了解如何通过css了解元素水平和垂直居中之前,先要了解下html都有哪些元素,这些元素与偶有哪些分类,因为不同类别的元素的水平垂直居中方法是完全不同的,究其根本当 ...

  4. 基于Picture Library创建的图片文档库中的上传多个文件功能(upload multiple files)报错怎么解决?

    复现过程 首先,我创建了一个基于Picture Library的图片文档库,名字是 Pic Lib 创建完毕后,我点击它的Upload 下拉菜单,点击Upload Picture按钮 在弹出的对话框中 ...

  5. php杂记(一)

    1.require_once & require include() 函数会将指定的档案读入并且执行里面的程序 include_once() 与include相同,但只允许一次: requir ...

  6. [Voice communications] 声道的转换

    本系列文章主要是介绍 Web Audio API 的相关知识,以及 web语音通信 中会遇到的一些问题,阐述可能存在错误,还请多多斧正! 很多粤语剧都提供了两个声道,一个左声道为粤语,一个右声道有国语 ...

  7. 前端er是否忽略了某些东西?——读《ppk谈JavaScript》

    关于书 “不知道ppk的网站QuirksMode,说明你可能还没有真正成为资深的JavaScript程序员.” ——Roger Johansson,瑞典资深Web专家. ppk是世界级前端技术专家,W ...

  8. 人人都是 DBA(XII)查询信息收集脚本汇编

    什么?有个 SQL 执行了 8 秒! 哪里出了问题?臣妾不知道啊,得找 DBA 啊. DBA 人呢?离职了!!擦!!! 程序员在无处寻求帮助时,就得想办法自救,努力让自己变成 "伪 DBA& ...

  9. 浅谈Excel开发:十一 针对64位Excel的插件的开发和部署

    自Office 2010版本开始有了32位和64位之分,对Excel来说,32位的Excel和64位的Excel在性能上的主要区别是64位的Excel能够处理2G及2G以上的大数据集. 随着64位操作 ...

  10. 免安裝、免設定的 Hadoop 開發環境 - cloudera 的 QuickStart VM

    cloudera 的 QuickStart VM,為一種免安裝.免設定 Linux 及 Hadoop,已幫你建好 CDH 5.x.Hadoop.Eclipse 的一個虛擬機環境.下載後解壓縮,可直接以 ...