jQuery源码分析(一)

作者: VisuperviReborn | 来源:发表于2017-07-31 14:59 被阅读59次
    1.为什么jQuery返回的是一个对象?
    return new jQuery.fn.init( selector, context );
    
    2.jquery对象与DOM对象的互相转化

    1中说了,jQuery获得的就是一个对象,但是又是怎样从jq对象转到DOM对象的,都知道是jq(selector)[index]或者是jq(selector).eq(index),但是源码是怎样的?当调用jQuery(selector)返回的是一个$对象,这个对象是一个包含dom对象的列表(学过数据结构的应该清楚)或者你叫它是伪数组(因为有长度),所以可以用下标

    <body>
    <div></div>
    <div></div>
    <div></div>
    <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
      <script type="text/javascript">
        console.log($("div"));
      </script>
    </body>
    

    下面这是运行结果

    (3) [div, div, div, prevObject: jQuery.fn.init(1), context: document, selector: "div"]
    0:div
    1:div
    2:div
    context:document
    length:3
    prevObject:jQuery.fn.init(1)
    selector:"div"
    __proto__:Object(0)
    
    3.为什么会形成链式结构?
    <script type="text/javascript">
        function Foo(){
    
        }//构造函数
    
        //构造函数的原型
        Foo.prototype = {
    
          setName:function(name){
            this.name =  name;
            return this;
          },
          getName:function(){
            console.log(this.name);
            return this;
          },
          setAge:function(age){
            this.age = age;
            return this;
          },
          getAge:function(){
            // return this.age;
            console.log(this.age);
            return this;
          },
          setGender:function(gender){
            this.gender = gender;
            return this;
          },
          getGender:function(){
            // return this.gender;
            console.log(this.gender);
            return this;
          }
        }
    //new一个对象
          var  f = new Foo();
          console.log(f.setName("Arya Stark").setAge("18").setGender("girle").getGender().getAge().getName());
      </script>
    

    上面代码模拟一个jq 的链式,原理就是每个函数都会返回一个对象,而这个对象是可以调用它的运行环境下面的函数的,所以就形成了链式。
    在下水平有限,先说这么多,后续还会更新

    相关文章

      网友评论

        本文标题:jQuery源码分析(一)

        本文链接:https://www.haomeiwen.com/subject/sevukxtx.html