jquery - 可以存储 JQuery 变量吗？

Question

我想知道将 JQuery 选择存储到变量中会做什么。我尝试了下面的例子。

var images = $('div').find('img');
alert($(images[0]).attr('src'));

这有效。但是，如果我使用 images[0] 而不是 $(images[0])，则代码将无法工作。我的结论是，上面的代码创建了一个包含 div img 元素的 DOM 元素的数组。我错过了什么吗？

谢谢

Answer 1

jQuery 对象是一个类似数组的对象。您可以像访问数组一样访问它(它具有数字属性)，并且它具有 .length 属性，但它不是数组(它不继承自 Array.prototype)。

当您访问这样的 jQuery 对象时，即 images[0]，您将返回选定的 DOM 元素之一。毕竟，jQuery 对象只是 DOM 元素的集合。

在这种情况下，你可以简单地这样做

alert(images.attr('src'));

因为 images 是一个 jQuery 对象。

不返回 jQuery 对象的方法通常适用于第一个选定元素，因此相当于 $(images[0]).attr(...) 或 images.eq(0).attr(...).

也许你认为 method chaining ^[Wikipedia] (即a.b().c())是一些“神奇”的东西，但事实并非如此。每个方法都会返回一个对象，您无需将返回值保存在变量中，而是立即对其调用另一个函数。

<小时/>

总结一下:所有选择方法都返回jQuery 对象。这些对象是类似数组的对象。您可以根据需要将它们存储在变量中。

以下所有示例都是等效的:

// 1
$('div').find('img').attr('src');

// 2
var divs = $('div');
divs.find('img').attr('src');

// 3
var images = $('div').find('img');
images.attr('src');

// 4
var divs = $('div');
var images = divs.find('img');
images.attr('src');