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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/14504662/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-24 17:02:07  来源:igfitidea点击:

Why use jQuery(selector).get(0) instead of jQuery(selector)[0] to get DOM element?

javascriptjquery

提问by Aaron Blenkush

Using jQuery is there any benefit to using $(selector).get(0)over $(selector)[0]if I just want to get the first item in the jQuery array as a DOM element?

使用jQuery是没有使用任何好处$(selector).get(0)$(selector)[0],如果我只是想获得jQuery的数组作为一个DOM元素中的第一项?

HTML:

HTML:

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

Javascript:

Javascript:

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

//Or
var domElement = $(selector)[0]; //Also returns [object HTMLFormElement]
  • .get()is more characters to type.
  • Both methods return the same result if the $(selector)is empty (undefined)
  • The jQuery documentation on .get()notes that you can simply use the index accessor to get the nth element, but you don't get the other benefits of .get()such as using a negative number to return items from the end of the array.
  • Also, you can call .get()with no arguments to return all the DOM elements of the jQuery array.
  • .get()需要输入更多字符。
  • 如果$(selector)为空 ( undefined),两种方法都返回相同的结果
  • jQuery 文档.get()说明您可以简单地使用索引访问器来获取第 n 个元素,但您无法获得其他好处,.get()例如使用负数从数组末尾返回项目。
  • 此外,您可以.get()不带参数调用以返回 jQuery 数组的所有 DOM 元素。

回答by Matt Zeunert

.getallows you to use negative indices. For example:

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

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

$("span").get(-1);refers to the third span.

$("span").get(-1);指第三span

But if you don't need that feature and only want to select one element .get(0)and [0]are the same. Notice the this[num]:

但是,如果您不需要该功能并且只想选择一个元素.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]);
},

回答by mtoor

I have too low a rep to comment on ericbowden's answer, but here is a jsperf test comparing the two operations:

我的代表太低了,无法评论 ericbowden 的回答,但这里有一个 jsperf 测试比较了这两个操作:

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

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

Consensus (on Chrome 32): Basically the same, very minor advantage towards [0]

共识(在 Chrome 32 上):基本上相同,对 [0]

回答by ericbowden

In the interest of speed I created a jsfiddle that loops over each 10,000,000 times. I created two tests with a form at the beginning of the document and the end with 1200 lines of dummy HTML between. Here are some preliminary results:

为了提高速度,我创建了一个 jsfiddle,每 10,000,000 次循环。我创建了两个测试,在文档的开头有一个表单,结尾有 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

It looks like no significant difference in speed can be seen. However you would have to check in different browsers to be sure.

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

You can check out the fiddle here: http://jsfiddle.net/AFfYx/(takes about a minute to run)

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