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 对象时，即 ie images[0]，您将取回选定的 DOM 元素之一。毕竟，jQuery 对象只是 DOM 元素的集合。

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

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

因为images是一个 jQuery 对象。

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

也许您认为方法链接^[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');

Answer 2

每当您使用 jQuery 查找对象时，总是会返回一个数组。如果没有找到元素，则返回一个空数组。数组中的每个元素都代表 HTML 页面中的原始 DOM 对象。

您只能在 jQuery 数组上调用 jQuery 事件，而不能直接在元素上调用。DOM 元素是 HTML 对象类型，不包含 jQuery 函数。要在 DOM 元素上调用像 attr 这样的 jQuery 函数，您必须通过调用 $(object) 将其转换为 jQuery 对象

希望这可以帮助

Answer 3

首先：你不需要这样做。images.attr("src")相反，它几乎与（甚至$(images[0]).attr('src')更快）相同。

其次，jQuery 存储在类似数组的对象中找到的元素集合，这就是它不起作用的原因。
当您使用时，images[0]您直接处理的是 DOM 对象，而不是 jQuery，有时可能会更痛苦。