jQuery源码分析(一)

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 的链式,原理就是每个函数都会返回一个对象,而这个对象是可以调用它的运行环境下面的函数的,所以就形成了链式。
在下水平有限,先说这么多,后续还会更新

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,503评论 0 2
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,274评论 0 1
  • Chapter 2 : Selecting the elements upon which to act 1. $...
    Azur_wxj阅读 480评论 0 1
  • 通过jQuery,您可以选取(查询,query)HTML元素,并对它们执行“操作”(actions)。 jQuer...
    枇杷树8824阅读 722评论 0 3
  • 第一遍看《红楼梦》的时候,没有脂砚斋也没有畸笏叟,便轻信了花袭人是个好人。后来,各种各样的探佚、评论试图告诉我,这...
    新新剧评阅读 433评论 0 0

友情链接更多精彩内容