jQuery源码分析(一)
2017-07-31 本文已影响59人
VisuperviReborn
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 的链式，原理就是每个函数都会返回一个对象，而这个对象是可以调用它的运行环境下面的函数的，所以就形成了链式。
在下水平有限，先说这么多，后续还会更新
