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");