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

时间:2013-01-24 15:16:47

标签: javascript jquery

如果我只想将jQuery数组中的第一项作为DOM元素使用$(selector).get(0),那么使用jQuery是否有任何好处?

HTML:

$(selector)[0]

使用Javascript:

<form id="myForm"></form>
  • var selector = '#myForm'; var domElement = $(selector).get(0); //Returns [object HTMLFormElement] //Or var domElement = $(selector)[0]; //Also returns [object HTMLFormElement] 是要输入的更多字符。
  • 如果.get()为空($(selector)
  • ,则两种方法都会返回相同的结果
  • The jQuery documentation on .get()注意到您可以简单地使用索引访问器来获取第n个元素,但是您没有获得undefined的其他好处,例如使用负数来从最后返回项目数组。
  • 此外,您可以不带参数调用.get()来返回jQuery数组的所有DOM元素。

4 个答案:

答案 0 :(得分:22)

.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]);
},

答案 1 :(得分:6)

为了速度,我创造了一个循环超过10,000,000次的jsfiddle。我创建了两个测试,在文档的开头有一个表单,最后有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

看起来速度没有显着差异。但是,您必须检查不同的浏览器才能确定。

你可以在这里查看小提琴:http://jsfiddle.net/AFfYx/(大约需要一分钟才能运行)

答案 2 :(得分:6)

我对ericbowden的答案评论太低了,但这是一个比较两个操作的jsperf测试:

http://jsperf.com/selector-get-0-vs-selector-0

共识(在Chrome 32上):对[0]

基本相同,非常小的优势

答案 3 :(得分:2)

作为人类对代码可读性的热衷者,我建议这两种方法都不令人满意。 .get(0)[0]看起来很像容器索引。将jQuery对象转换为DOM对象时,会有更多风险。因此,我向name介绍了一个函数。

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

像这样使用:

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