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

Answer 2

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

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

希望这有帮助

Answer 3

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

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

存储JQuery变量可能吗？

3 个答案: