上一篇主要讲解了jQuery原型中最重要的方法init。接下来再讲一些比较常用的原型方法和属性

core_slice = [].slice,

jQuery.fn = jQuery.prototype = {

  toArray: function(){    

    //把jQuery对象转换成原生元素的数组,比如:$("div").toArray(),{0:"div",1:"div"}   ->   ["div","div"]

    return core_slice.call( this );

  },

  get: function( num ) {  //得到原生的元素(可以取到某一个)
    return num == null ?

      this.toArray() :( num < 0 ? this[ this.length + num ] : this[ num ] );

      //[],除了取下标,还可以取属性。如果this是数组,就取下标,如果是对象就取属性

  },

  pushStack: function( elems ) {    //栈的实现,先进后出。

    var ret = jQuery.merge( this.constructor(), elems );   //把传入的elems(数组)转换成jQuery对象

    //this.constructor()是一个空的jQuery对象,jQuery()。

    ret.prevObject = this;    //使p(jQuery)的prevObject指向div(jQuery) 

    //这里的作用是为了回溯用,比如,$("div").pushStack($("p")).css()后,我想对div进行处理,这时可以调用$("div").pushStack($("p")).css().end().css(),后面这个css就会只对div进行处理了,end方法就是取p的prevObject属性。 
    ret.context = this.context;

    return ret;    //返回p(jQuery)
  },//举个列子,$("div").pushStack($("p")).css();这个css就只对p进行处理。  

  end: function() {
    return this.prevObject || this.constructor(null);  //如果没有,就创建一个空的jQuery对象
  },  

  slice: function() {  //$("div").slice(1,3).css().end().css(),假设有4个div,那么第一个css只对第二个和第三个有效果,end之后,第二个css对这4个div都有效果。
    return this.pushStack( core_slice.apply( this, arguments ) );   //4个div.pushStack(2个div)
  }, 

  each: function( callback, args ) {    //实例方法调用的是工具方法(很多这种调用方式)。
    return jQuery.each( this, callback, args );   //$("div").each(a) -> return jQuery.each( $("div"), a, undefined),第三个参数供jQuery内部使用。

    //jQuery.each会循环每一个div,执行a回调方法,a.call( obj[ i ], i, obj[ i ] );也就是在div的执行上下文,执行a(i,div),其中i为当前div的index值。
  },  

  ready: function( fn ) {
    //可以先看我的另外一篇博客:http://www.cnblogs.com/chaojidan/p/4121788.html
    jQuery.ready.promise().done( fn );

    return this;
  }, 

  eq: function( i ) {
    var len = this.length,
    j = +i + ( i < 0 ? len : 0 );   //+i就是把传入的数字字符转化成数字,比如:"3"->3.
    return this.pushStack( j >= 0 && j < len ? [ this[j] ] : [] );
  },//eq方法也可以用end方法,返回到原jQuery对象。

  map: function( callback ) {    //$("div").map(a)

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

      //map方法是针对每一个div,执行function(elem,i)方法,传入div,和div的index值。里面调用callback.call( elem, i, elem ),a.call(div,i,div),如果执行a方法得到的是undefined或者是null,就会过滤掉此div。
    }));
  },

  .....

}

差不多就这些了,其实我还想说下js各种方法调用时,里面的参数个数和顺序,面试官很喜欢问。请看我这篇博客:http://www.cnblogs.com/chaojidan/p/4142338.html

加油!

jquery源码解析:pushStack,end,ready,eq详解的更多相关文章

  1. jQuery 源码分析(十八) ready事件详解

    ready事件是当DOM文档树加载完成后执行一个函数(不包含图片,css等),因此它的触发要早于load事件.用法: $(document).ready(fun) ;fun是一个函数,这样当DOM树加 ...

  2. gulp源码解析(一)—— Stream详解

    作为前端,我们常常会和 Stream 有着频繁的接触.比如使用 gulp 对项目进行构建的时候,我们会使用 gulp.src 接口将匹配到的文件转为 stream(流)的形式,再通过 .pipe() ...

  3. jQuery 源码分析(十一) 队列模块 Queue详解

    队列是常用的数据结构之一,只允许在表的前端(队头)进行删除操作(出队),在表的后端(队尾)进行插入操作(入队).特点是先进先出,最先插入的元素最先被删除. 在jQuery内部,队列模块为动画模块提供基 ...

  4. Linux源码解析-内核栈与thread_info结构详解

    1.什么是进程的内核栈? 在内核态(比如应用进程执行系统调用)时,进程运行需要自己的堆栈信息(不是原用户空间中的栈),而是使用内核空间中的栈,这个栈就是进程的内核栈 2.进程的内核栈在计算机中是如何描 ...

  5. Spring源码解析--IOC根容器Beanfactory详解

    BeanFactory和FactoryBean的联系和区别 BeanFactory是整个Spring容器的根容器,里面描述了在所有的子类或子接口当中对容器的处理原则和职责,包括生命周期的一些约定. F ...

  6. AngularJS源码解析2:注入器的详解

    上一课,没有讲createInjector方法,只是讲了它的主要作用,这一课,详细来讲一下这个方法.此方法,最终返回的注册器实例对象有以下几个方法: invoke, instantiate, get, ...

  7. hanlp源码解析之中文分词算法详解

    词图 词图指的是句子中所有词可能构成的图.如果一个词A的下一个词可能是B的话,那么A和B之间具有一条路径E(A,B).一个词可能有多个后续,同时也可能有多个前驱,它们构成的图我称作词图. 需要稀疏2维 ...

  8. axios 源码解析(下) 拦截器的详解

    axios的除了初始化配置外,其它有用的应该就是拦截器了,拦截器分为请求拦截器和响应拦截器两种: 请求拦截器    ;在请求发送前进行一些操作,例如在每个请求体里加上token,统一做了处理如果以后要 ...

  9. JQuery源码解析(一)

    写在前面:本<JQuery源码解析>系列是基于一些前辈们的文章进行进一步的分析.细化.修改而写出来的,在这边感谢那些慷慨提供科普文档的技术大拿们. 要查阅JQ的源文件请下载开发版的JQ.j ...

  10. jQuery 源码解析二:jQuery.fn.extend=jQuery.extend 方法探究

    终于动笔开始 jQuery 源码解析第二篇,写文章还真是有难度,要把自已懂的表述清楚,要让别人听懂真的不是一见易事. 在 jQuery 源码解析一:jQuery 类库整体架构设计解析 一文,大致描述了 ...

随机推荐

  1. javascript的Undefined,null区别

    //在javascript中null表示“什么都没有” ,是一个特殊的类型,表示一个空对象引用: var person = null; //值为null(空),但类型为对象 console.log(p ...

  2. 转载 二十篇java技术热文

    转自微信公众号:java知音 1,详解java类的生命周期 2,Java反射最佳实践 3,Spring的IOC原理 4,Java并发编程:volatile关键字解析 5,Java Thread 总结 ...

  3. python处理Excel 之 xlrd-乾颐堂

    python处理Excel常用到的模块是xlrd.使用xlrd可以非常方便的处理Excel文档,下面介绍一下基本用法 1.打开文件 import xlrd data= xlrd.open_workbo ...

  4. python2.7 跨文件全局变量的方法-乾颐堂

    在使用Python编写的应用的过程中,有时会遇到多个文件之间传递同一个全局变量的情况. 文件1:globalvar.py 1 2 3 4 5 6 7 8 9 10 11 12 #!/usr/bin/e ...

  5. IntelliJ IDEA 注册码及相关资源

    原文地址 http://idea.lanyus.com/ *.lanyus.com下的全部授权服务器已遭JetBrains封杀,请使用http://idea.qinxi1992.cn 或者搭建自己的I ...

  6. docker镜像存出与载入

    尝试从官网上下载ubuntu镜像,太慢下载不下来. 使用daocloud加速器进行加速之后,由于公司网络不好,仍然下载不下来. 没办法,只能从别的环境上搞一个已经存在的ubuntu镜像,折腾到自己的虚 ...

  7. 查看并解除Oracle锁

    当某个数据库用户在数据库中插入.更新.删除一个表的数据,或者增加一个表的主键时或者表的索引时, 常常会出现ora-00054:resource busy and acquire with nowait ...

  8. [GO]字符串的使用

    package main import ( "fmt" "strings" ) func main() { //判断字符串1是否包含字符串2,如果包含则返回tr ...

  9. 样条曲线catmull rom转bezier

    b0,..,b3是贝塞尔,c-1, c2是catmull rom控制点 [b0] = 1 [ 0 6 0 0] [c_1] [b1] - [-1 6 1 0] [c0] [b2] 6 [ 0 1 6 ...

  10. QT学习之窗口部件

    对话框--QDialog 模态对话框与非模态对话框 模态对话框:就是相当于没关闭它之前,不能再和该应用程序的其他窗口进行交互(比如新建项目时弹出的对话框) 非模态对话框:可以与它交互,也可以与该程序中 ...