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

Question

如果我有一些类似的标记：

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

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

我在控制台中得到的输出为：

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

并不是：

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

Answer 1

A（有效）选择器不能保证匹配单个元件，但它保证以表示一组匹配的元素 ，其可以

• 空着，
• 有一个元素，或
• 有一个以上的要素。

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

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

Answer 2

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

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

我希望这会有所帮助，也希望您对jQuery及其工作方式进行更多研究。 这是一个非常有用的库，看来您还没有完全理解。

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

Answer 3

来自Rick Strahl的描述

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