快捷導航

讀jQuery之五（取DOM元素）

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

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

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

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

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

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

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

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

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

 
$('div').toArray(); // 返回頁面中所有的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)就一個三元運算符，即兩個分支。
分支1，當不傳參數(shù)時將獲取所有DOM元素（調(diào)用toArray）
分支2，當num為數(shù)字（索引）時返回指定的某一個DOM元素（數(shù)字為負數(shù)時為逆向獲取）

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

第一步是選擇器做的事；
第二步將HTMLCollection/NodeList轉(zhuǎn)成數(shù)組以前討論過；
第三步又將數(shù)組轉(zhuǎn)成偽數(shù)組/ArrayLike（jQuery對象），只需調(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對象而非返回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對象集合的第一個元素，即Div[id=a]，結(jié)構(gòu):{0:div,length:1,...}；//...表示省略了其它屬性
$('div').last() 返回jq對象集合的最后的元素，即Div[id=d]，結(jié)構(gòu):{0:div,length:1,...}；
$('div').eq(2) 返回jq對象匹配的第三個元素，即Div[id=c]，結(jié)構(gòu):{0:div,length:1,...}；

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

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

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

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

您可能感興趣的文章: