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 的鏈式,原理就是每個函數都會返回一個對象,而這個對象是可以調用它的運行環境下面的函數的,所以就形成了鏈式。
在下水平有限,先說這么多,后續還會更新