2025-05-23

使用過Prototype.js的同學知道$(xx)調用後返回的是HTMLElement或其集合。


 


jQuery的$調用後想要獲取DOM元素可以使用get方法,如下


view sourceprint?
1 // 方式1 


2 $(p).get(1); // 獲取頁面中第二個p


 


當然,也可以使用數組索引方式獲取


view sourceprint?1 // 方式2 


2 $(p)[1]; // 獲取頁面中第二個p


 


上面兩種方式都可以獲取某一個特定的DOM元素,而獲取DOM元素集合卻要使用toArray方法


view sourceprint?1 $(p).toArray(); // 返回頁面中所有的p,依次放入數組中


 


看看get方法的源碼


view sourceprint?1 get: function( num ) { 


2     return num == null ? 


3   


4         // Return a clean array 


5         this.toArray() : 


6   


7         // Return just the object 


8         ( num < 0 ? this[ this.length + num ] : this[ num ] ); 


9 },


get內就一個三元運算符,即兩個分支。


分支1,當不傳參數時將獲取所有DOM元素(調用toArray)
分支2,當num為數字(索引)時返回指定的某一個DOM元素(數字為負數時為逆向獲取)



分支1實際是將jQuery對象(偽數組)轉成真正的數組,分支2實際是(用中括號[])取“偽數組”元素。下面以$(p)來描述整個調用過程


1,獲取頁面p元素(document.getElementsByTagName(p))
2,將集合HTMLCollection/NodeList轉成真正的數組
3,將數組轉成偽數組/ArrayLike(jQuery對象)



如圖


 


 


第一步是選擇器做的事;
第二步將HTMLCollection/NodeList轉成數組以前討論過;
第三步又將數組轉成偽數組/ArrayLike(jQuery對象),隻需調用下數組的push即可。


 


也許下面的例子容易理解


view sourceprint?01 var jqObj = {0:one,1:two,2:three,length:3}, // 偽數組(ArrayLike) 


02     ary = [one,two,three]; //數組 


03   


04 // 將偽數組(ArrayLike)轉成數組 


05 function jqObjToArray(json){ 


06     var slice = Array.prototype.slice; 


07     return slice.call(json,0); 


08 } 


09 // 將數組轉成偽數組(ArrayLike) 


10 function ArrayToJqObj(ary){ 


11     var obj = {}, push = Array.prototype.push; 


12     push.apply(obj,ary); 


13     return obj; 


14 } 


15 console.log(jqObjToArray(jqObj)); 


16 console.log(ArrayToJqObj(ary));


 


jQuery還提供瞭first/last/eq/slice方法,它們與上面提到的get/toArray不同。它們返回的是jQuery對象而非返回HTMLElement。如下html片段


view sourceprint?1 <p id=”a”>A</p> 


2 <p id=”b”>B</p> 


3 <p id=”c”>C</p> 


4 <p id=”d”>D</p>


$(p).first() 返回jq對象集合的第一個元素, 即Div[id=a],結構:{0:p,length:1,…};//…表示省略瞭其它屬性
$(p).last() 返回jq對象集合的最後的元素, 即Div[id=d],結構:{0:p,length:1,…};
$(p).eq(2) 返回jq對象匹配的第三個元素, 即Div[id=c],結構:{0:p,length:1,…};


 


查看源碼得知:


1,first,last方法中直接調用瞭eq方法。
2,eq方法中調用瞭slice方法。



因此slice方法才是根本。該方法讓我們自然想到數組的slice方法,實際上jQuery正是利用Array的push和slice方法。


1,利用Array.prototype.slice方法將 偽數組 轉成 數組
2,利用Array.prototype.push方法將 數組 轉成 偽數組


當然jQuery中的slice方法調用瞭pushStack。我這裡簡寫瞭slice,如下


view sourceprint?1 slice : function(){ 


2         var ret = $();//關鍵的一句,構造一個新的jq對象, 


3         var ary = slice.apply(this,arguments);//這裡的this是jq對象,根據參數轉成數組子集 


4         push.apply(ret,ary);//轉成jq對象,即偽數組形式 


5         return ret; 


6 },


 



 

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *