jQuery源碼學習 item3- get()和eq()分析和對比

本文將對jQuery對象的get()和eq()方法源碼進行分析和對比，並介紹其基本用法。

1、get()方法

首先看一下get()的源碼，在文檔（jQuery 2.0.3.js）的第208~216行：

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()方法接收一個num參數，用於當做查找的索引。當傳入的參數爲空時，直接調用toArray()方法，轉成數組。當傳入的num爲負數時，會將其加上當前長度變成正數，在去查找。我們通過例子來說明。

HTML：

<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ul>

jquery：

console.log($("li").get()); // [li li li]
console.log($('li').get(1)); // <li>222</li>
console.log($('li').get(-1)); // <li>333</li>
console.log($('li').get(3));  // undefined
console.log($('li').get(-4)); // undefined

第一行傳入參數爲空，因此返回一個包含三個<li>對象的數組；
第二行傳入的是正數，按照其索引去查找，得到第二個<li>對象；
第三行傳入的是負數，將其加上對象數組的長度（這裏爲3）之後，得到2，然後再按其索引查找。
第四行和第五行由於傳入的正數超過其長度或負數經過加上數組長度後仍然不在查詢不到，因此打印undefined。

2、eq()方法

eq()方法的源碼在文檔的第259~263行：

eq: function( i ) {
        var len = this.length,
            j = +i + ( i < 0 ? len : 0 );
        return this.pushStack( j >= 0 && j < len ? [ this[j] ] : [] );
    },

eq()方法調用了jQuery對象的pushStack方法，其他的索引查找與get()方法類似。同樣，我們以上面的html結構來分析其用法：

console.log($("li").eq()); 
console.log($('li').eq(1)); 
console.log($('li').eq(-1)); 
console.log($('li').eq(3));  
console.log($('li').eq(-4)); 

第一行傳入的參數i爲空，此時j爲當前對象數組長度（即3），因此，進棧的是一個空對象；
第二行傳入的參數爲1，進棧的爲第二個li對象；
第三行傳入的參數爲-1，此時將其加上對象數組長度（即3），得到2，因此進棧的是第三個li對象；
第四行和第五行進棧的都是空對象。

在FF瀏覽器中測試結果如下：

另外，jQuery對象中的first()和last()方法都是調用的eq()方法：

first: function() {
    return this.eq( 0 );
},

last: function() {
    return this.eq( -1 );
},

3、eq()與get()區別

首先，我查看一下通過eq()與get()得到的對象是什麼：

alert($("li").eq(1));
alert($("li").get(1));

eq()方法返回的是一個JQuery對象，也就是[object Object];

get()方法返回的是DOM對象組成的數組，也就是[object HTMLLIElement];

也就是說，由於通過eq()獲得的是一個jQuery對象，因此可以調用jQuery的方法，例如

$("li").eq(1).css("background","red");

改變第二個li標籤的背景顏色。

而如果這樣使用標籤：

$("li").get(1).css("background","red"); 

由於get()返回的是一個DOM對象，如果使用jQuery對象，因此會報錯：$(...).get(...).css is not a function。既然返回的是DOM對象，那麼我們可以使用原生的JS 方法對其樣式進行改變，如下：

$("li").get(1).style.background = "red";

但如果對get()方法情有獨鍾，而又要使用jQuery的方法，則可以這樣使用：

$($("li").get(1)).css("background","red");

另外還有一個我們在數組中常用到的就是：[]，這個東西如果在上述情況下是什麼結果呢？

alert($("li")[1]);

得到與get()方法得到是一樣，也是[object HTMLLIElement]，也就是說返回的也是DOM對象，所以這種方法跟get()方法的使用類似。如果需要使用[]來獲得DOM對象，又要使用jQuery的方法，可以如下使用：

$($("ul li")[1]).css("background","red");