jQuery源码学习 之 get与eq的区别

1. 理解

.eq(); 减少匹配元素的集合，根据index索引值，精确指定索引对象，返回jQuery对象；

.get(); 通过检索匹配jQuery对象得到对应的DOM元素，返回的是DOM对象。

2. 说明

二者之间的区别主要是：eq返回的是一个jQuery对象，get返回的是一个DOM对象，例如：

$("li").get(0).css("color", "red"); // 错误
$("li").eq(0).css("color", "red"); // 正确

get方法本质上是把jQuery对象转换成DOM对象，但是css是属于jQuery构造器的，DOM是不存在这个方法的，如果需要用jQuery方法，必须使用如下方法：

var li = $("li").get(0);
$(li).css("color", "red"); // 用$包装

取出DOM对象li，然后用$再次包装，使之转变成jQuery对象，才能调用css方法，这样要分2步写比较麻烦，所以，jQuery给我们提供了一个便捷的方法eq()。

eq()的实现原理就是在上面代码中的eq方法把内部转成jQuery对象：

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

上面实现代码的逻辑就是跟get是一样的，区别就是通过了pushStack产生了一个新的jQuery对象。

jQuery的考虑很周到，通过eq方法只能产生一个新的对象，但是如果需要的是一个合集对象要怎么处理？因此，jQuery便提供了一个slice方法。

语法：

.slice(start [, end]);

作用：

根据指定的下标范围，过滤匹配的元素集合，并生成一个新的jQuery对象。

因为是数组对象，意味着我们可以用slice来直接取值了，所以针对合集对象可以这样写：

var arr = [];
arr.push(this.slice(start[, end]));
this.pushStack(arr);

上面的this指的是jQuery对象，因为jQuery对象是数组集合，所以我们可以通过原生的slice方法直接取到集合数，然后通过包装处理即可。

slice: function() {
  return this.pushStack( slice.apply(this, arguments) );
},