• jquery源码解析:pushStack,end,ready,eq详解


    上一篇主要讲解了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

    加油!

  • 相关阅读:
    Django笔记:上下文处理器和中间件
    Django笔记:Cookie和Session
    redhat 7.4从openssh7.6离线升级openssh8.4p1解决方法
    “应用程序无法正常启动(0xc000007)”处理办法
    "安装VMware Tools"显示灰色的解决办法
    redis 根据模板批量生成使用不同端口的配置文件并运行运行服务
    扩展 docker 管理命令
    shell getopt 讲解
    编写 Redis 测试 shell 脚本
    自定义 shell 软件安装脚本
  • 原文地址:https://www.cnblogs.com/chaojidan/p/4141413.html
Copyright © 2020-2023  润新知