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

Aar*_*ush 14 javascript jquery

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

HTML:

<form id="myForm"></form>
Run Code Online (Sandbox Code Playgroud)

使用Javascript:

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

//Or
var domElement = $(selector)[0]; //Also returns [object HTMLFormElement]
Run Code Online (Sandbox Code Playgroud)
  • .get() 是更多要输入的字符.
  • 如果$(selector)为空(undefined),则两种方法都返回相同的结果
  • 关于.get()注释的jQuery文档,您可以简单地使用索引访问器来获取第n个元素,但是您没有获得其他好处,.get()例如使用负数来从数组末尾返回项目.
  • 此外,您可以.get()不带参数调用来返回jQuery数组的所有DOM元素.

Mat*_*ert 24

.get允许您使用负指数.例如:

<span>1</span>
<span>2</span>
<span>3</span>
Run Code Online (Sandbox Code Playgroud)

$("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]);
},
Run Code Online (Sandbox Code Playgroud)

  • 马特 - 您的回答仍然很有价值,因为您指出了 jQuery 源代码。我应该想到只是看着它! (3认同)

eri*_*den 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
Run Code Online (Sandbox Code Playgroud)

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

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


mto*_*oor 6

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

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

共识(在Chrome 32上):基本相同,非常小的优势 [0]