为什么使用jQuery(selector).get(0)而不是jQuery(selector)[0]来获取DOM元素？

Question

如果我只想将jQuery数组中的第一个项目作为DOM元素获取，那么使用$(selector).get(0)和$(selector)[0]之间是否有任何好处？

HTML：

<form id="myForm"></form>

Javascript:

var selector = '#myForm';
var domElement = $(selector).get(0); //Returns [object HTMLFormElement]

//Or
var domElement = $(selector)[0]; //Also returns [object HTMLFormElement]

• .get() 敲起来更长。
• 如果 $(selector) 是空的 (undefined)，两种方法返回相同的结果。
• jQuery文档关于.get()指出你可以使用索引访问器直接获取第n个元素，但不会得到.get() 的其他好处，例如使用负数从数组末尾返回项目。
• 此外，你可以调用 .get() ，不带参数，以返回jQuery 数组的所有DOM元素。

- Aaron Blenkush

---

我认为你已经回答了自己的问题。 - nice ass

从风格上讲，我更喜欢使用.get(0)，因为[0]对于如此重要的转换来说太晦涩了。 - Bob Stein

Answer 1

.get允许您使用负数索引。例如：

<span>1</span>
<span>2</span>
<span>3</span>

$("span").get(-1); 指的是第三个 span。

但如果你不需要这个功能，只想选择一个元素，.get(0) 和 [0] 是相同的。注意 this[num]：

// jQuery code
get: function (num) {
    return num == null ?

    // Return a 'clean' array
    this.toArray() :

    // Return just the object
    (num < 0 ? this[this.length + num] : this[num]);
},

- Matt Zeunert

---

Matt - 你的回答仍然很有价值，因为你指出了 jQuery 的源代码。我应该考虑直接查看它！ - Aaron Blenkush

虽然代码很有帮助，但是多行三元运算符让我想起了这个或者这个。 - Bob Stein

Answer 2

我声望太低无法评论ericbowden的回答，但这里有一个jsperf测试，比较了两种操作的性能：http://jsperf.com/selector-get-0-vs-selector-0。在Chrome 32上的共识是：基本相同，[0]略微占优。

- mtoor

Answer 3

为了提高速度，我创建了一个jsfiddle，它循环了1000万次。我创建了两个测试用例，在文档开头和结尾都放置了一个表单，中间有1200行虚拟HTML。以下是一些初步结果：

Test1
form at beginning with .get(0): 15981ms - faster
form at beginning with [0]:     16089ms
form at end with .get(0):       16554ms
form at end with [0]:           15969ms - faster

Test2
form at beginning with .get(0): 14137ms
form at beginning with [0]:     14034ms - faster
form at end with .get(0):       13756ms - faster
form at end with [0]:           14492ms

Test3
form at beginning with .get(0): 15952ms - faster
form at beginning with [0]:     16810ms
form at end with .get(0):       15905ms
form at end with [0]:           15532ms - faster

看起来速度上没有明显的差异。但是为了确定，您需要在不同的浏览器中进行检查。

您可以在这里查看fiddle：http://jsfiddle.net/AFfYx/（运行大约需要一分钟）

- ericbowden

Answer 4

作为一个热衷于代码易读性的粉丝，我认为这两种方法都不够令人满意。.get(0) 和 [0] 看起来太像容器索引了。在将 jQuery 对象转换为 DOM 对象时，有更多的事情需要考虑。因此，我介绍了一个函数来解释 name 正在发生的事情。

function dom_from_$($jquery_object) {
    var dom_object = $jquery_object.get(0);
    return dom_object;
}

Used like this:

var dom = dom_from_$($(selector));

我还有一个命名转换函数的策略，采用 x_from_y 的形式，例如 x = x_from_y(y); 请注意美元符号 $ 是相互靠近的。

- Bob Stein