在Javascript和Jquery中的array.eq（）与array []

Question

访问数组时，何时使用.eq（）函数是否合适？

例如，我有......

slides.eq(slidesLength-1).css("z-index", (slidesLength-1));

后来我......

for(i=0; i<slidesLength-1; i++) {
    $(slides[i]).css("left", "-100%");
}

在第一段代码中，如果我不使用.eq（）函数，幻灯片放映将停止运行。 但是，无论我是否使用.eq（）函数，第二部分似乎都起作用。 为什么是这样？

Answer 1

slides 不是数组。 这是一个jQuery对象。 .eq()方法将指定索引处的元素作为jQuery对象返回 。

虽然jQuery对象可能不是数组，但它们可以假装具有length属性以及与索引对应的属性。 （因为它们不是数组，所以不能在它们上调用.pop() .forEach()等方法。）

当你做slides[i] ，你实际上是在获取DOM元素 ，而不是jQuery对象。 $()函数将DOM元素转换为jQuery对象。

所以，当你执行slides.eq(1) ，内部jQuery正在执行$(slides[i]) 。

假装是数组的PS对象，如jQuery对象，被称为“类数组对象”。 如果你是console.log(slides) ，它可能看起来像一个数组。 这只是您的控制台，试图让您方便。 （有关更多信息，请参阅此问题： 在JavaScript中创建类似数组的对象 ）

Answer 2

.eq()是一个返回jQuery对象的jQuery方法，而通过index访问则返回plain DOM元素。 如果要在返回的选择上使用jQuery方法（在本例中为css() ，则应使用eq() 。

$(slides[i])工作的原因是因为你通过将plain元素传递给$()构造函数来构造一个jQuery对象。

Answer 3

您的slides变量不是Array ，而是jQuery对象。

.eq()返回一个jQuery对象，如果index超出范围，则最终为空，并且从末尾开始计算负index 。

.get()返回一个DOM元素，如果index超出范围，则返回undefined ，并从末尾开始计算负index 。

[]返回一个DOM元素，如果index超出范围则抛出一个错误。

...

此外，jQuery方法允许您单独与一组元素进行交互。 所以，如果你这样做：

slides.css("left", "-100%");

它应用于jQuery对象中包含的每个匹配元素。 没有必要循环它们。

...

循环匹配元素的首选方法是使用each()方法：

slides.each(function (i, el) {
    var $el = $(el);
});

...

另外，使用$符号为jQuery变量添加前缀是一个既定的约定。 它可以让您轻松区分DOM元素和jQuery对象。 但那只是品味问题。