快捷導(dǎo)航

讀jQuery之五（取DOM元素）

更新時(shí)間：2011年06月20日 23:42:41 作者：

使用過(guò)Prototype.js的同學(xué)知道$(xx)調(diào)用后返回的是HTMLElement或其集合。

jQuery的$調(diào)用后想要獲取DOM元素可以使用get方法，如下

 
// 方式1 
$('div').get(1); // 獲取頁(yè)面中第二個(gè)div 

當(dāng)然，也可以使用數(shù)組索引方式獲取

復(fù)制代碼代碼如下:

 
// 方式2 
$('div')[1]; // 獲取頁(yè)面中第二個(gè)div 

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

復(fù)制代碼代碼如下:

 
$('div').toArray(); // 返回頁(yè)面中所有的div，依次放入數(shù)組中 

看看get方法的源碼

復(fù)制代碼代碼如下:

 
get: function( num ) { 
return num == null ? 
// Return a 'clean' array 
this.toArray() : 
// Return just the object 
( num < 0 ? this[ this.length + num ] : this[ num ] ); 
}, 

get內(nèi)就一個(gè)三元運(yùn)算符，即兩個(gè)分支。
分支1，當(dāng)不傳參數(shù)時(shí)將獲取所有DOM元素（調(diào)用toArray）
分支2，當(dāng)num為數(shù)字（索引）時(shí)返回指定的某一個(gè)DOM元素（數(shù)字為負(fù)數(shù)時(shí)為逆向獲?。?

分支1實(shí)際是將jQuery對(duì)象（偽數(shù)組）轉(zhuǎn)成真正的數(shù)組，分支2實(shí)際是（用中括號(hào)[]）取“偽數(shù)組”元素。下面以$('div')來(lái)描述整個(gè)調(diào)用過(guò)程
1，獲取頁(yè)面div元素（document.getElementsByTagName('div')）
2，將集合HTMLCollection/NodeList轉(zhuǎn)成真正的數(shù)組
3，將數(shù)組轉(zhuǎn)成偽數(shù)組/ArrayLike（jQuery對(duì)象）
如圖

第一步是選擇器做的事；
第二步將HTMLCollection/NodeList轉(zhuǎn)成數(shù)組以前討論過(guò)；
第三步又將數(shù)組轉(zhuǎn)成偽數(shù)組/ArrayLike（jQuery對(duì)象），只需調(diào)用下數(shù)組的push即可。
也許下面的例子容易理解

復(fù)制代碼代碼如下:

 
var jqObj = {0:'one',1:'two',2:'three',length:3}, // 偽數(shù)組(ArrayLike) 
ary = ['one','two','three']; //數(shù)組 
// 將偽數(shù)組(ArrayLike)轉(zhuǎn)成數(shù)組 
function jqObjToArray(json){ 
var slice = Array.prototype.slice; 
return slice.call(json,0); 
} 
// 將數(shù)組轉(zhuǎn)成偽數(shù)組(ArrayLike) 
function ArrayToJqObj(ary){ 
var obj = {}, push = Array.prototype.push; 
push.apply(obj,ary); 
return obj; 
} 
console.log(jqObjToArray(jqObj)); 
console.log(ArrayToJqObj(ary)); 

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

復(fù)制代碼代碼如下:

 
<div id="a">A</div> 
<div id="b">B</div> 
<div id="c">C</div> 
<div id="d">D</div> 

$('div').first() 返回jq對(duì)象集合的第一個(gè)元素，即Div[id=a]，結(jié)構(gòu):{0:div,length:1,...}；//...表示省略了其它屬性
$('div').last() 返回jq對(duì)象集合的最后的元素，即Div[id=d]，結(jié)構(gòu):{0:div,length:1,...}；
$('div').eq(2) 返回jq對(duì)象匹配的第三個(gè)元素，即Div[id=c]，結(jié)構(gòu):{0:div,length:1,...}；

查看源碼得知：
1，first，last方法中直接調(diào)用了eq方法。
2，eq方法中調(diào)用了slice方法。

因此slice方法才是根本。該方法讓我們自然想到數(shù)組的slice方法，實(shí)際上jQuery正是利用Array的push和slice方法。
1，利用Array.prototype.slice方法將偽數(shù)組轉(zhuǎn)成數(shù)組
2，利用Array.prototype.push方法將數(shù)組轉(zhuǎn)成偽數(shù)組
當(dāng)然jQuery中的slice方法調(diào)用了pushStack。我這里簡(jiǎn)寫(xiě)了slice，如下

復(fù)制代碼代碼如下:

 
slice : function(){ 
var ret = $();//關(guān)鍵的一句,構(gòu)造一個(gè)新的jq對(duì)象， 
var ary = slice.apply(this,arguments);//這里的this是jq對(duì)象，根據(jù)參數(shù)轉(zhuǎn)成數(shù)組子集 
push.apply(ret,ary);//轉(zhuǎn)成jq對(duì)象，即偽數(shù)組形式 
return ret; 
}, 

您可能感興趣的文章: