为什么jquery选择器返回一个数组而不是元素本身

why does a jquery selector return an array instead of the element itself?

本文关键字：数组 元素 一个 选择器 jquery 返回 为什么      更新时间：2023-09-26

如果我有一些标记，看起来像：

<div class="box">
</div>

为什么执行jquery选择器$('.box')会返回数组中的元素？

我在控制台中得到一个输出：

[<div class="box"></div>]

而不是：

<div class="box"></div>

（有效）选择器不保证与单个元素匹配，但它保证表示一组匹配的元素，这可能会

  • 是空的
  • 具有一个元素，或者
  • 具有多个元素

此集合最好由包含零个或多个元素的集合对象表示。

如果您的标记由多个.box元素组成，那么如果jQuery不是由两个元素组成的集合，您希望jQuery返回什么？document.querySelector()的不同之处在于，方法被设计为根据规范返回第一个匹配元素，这就是document.querySelectorAll()存在的原因（这是jQuery在默认为自己的实现之前在内部使用的）。

来自Rick Strahl对的描述

选择器返回一个被称为"包装集"的jQuery对象，这是一个类似数组的结构，包含所有选定的DOM元素。您可以像数组一样对包装集进行迭代，也可以通过索引器访问单个元素（例如$（sel）[0]）。更重要的是，您还可以对所有选定的元素应用jQuery函数。

因为它不是数组，所以它是一个类似jQuery对象的数组。您可以使用$()返回的对象，就像您像$().css().append()那样将方法链接在一起时一样。

它类似数组的另一个原因是，您提供的选择器实际上可以获取许多不同的元素，并且您可以在jQuery对象上调用的大多数方法都会影响选择器选择的所有dom元素。

我希望这能有所帮助，我也希望你能对jQuery及其工作原理做更多的研究。这是一个非常有用的图书馆，你似乎还没有完全理解。

编辑：正如其他人所提到的，如果你只想要一个来自jQuery对象的元素，并且只使用jQuery作为选择器，你可以使用括号访问器$(...)[0]或get方法$(...).get(0)。

相关文章：