是这样的:

var contents = document.getElementById('contents');

和这个一样:

var contents = $('#contents');

jQuery加载?


当前回答

No.

调用document.getElementById('id')将返回一个原始DOM对象。

调用$('#id')将返回一个jQuery对象,该对象包装DOM对象并提供jQuery方法。

因此,只能在$()调用中调用css()或animate()等jQuery方法。

你也可以写$(document.getElementById('id')),它将返回一个jQuery对象,等价于$('#id')。

你可以通过编写$('#id')[0]从jQuery对象中获得底层DOM对象。

其他回答

接近,但不一样。它们得到相同的元素,但jQuery版本被包装在jQuery对象中。

等价的是这个

var contents = $('#contents').get(0);

或者这个

var contents = $('#contents')[0];

这将把元素从jQuery对象中拉出来。

不,实际上结果是一样的:

$('#contents')[0] 

jQuery不知道该查询将返回多少结果。返回的是一个特殊的jQuery对象,它是与查询匹配的所有控件的集合。

jQuery如此方便的部分原因是,在这个对象上调用的大多数方法看起来是针对一个控件的,实际上是在一个循环中调用集合中的所有成员

当您使用[0]语法时,您从内部集合中获取第一个元素。此时,您将得到一个DOM对象

不完全是! !

document.getElementById('contents'); //returns a HTML DOM Object

var contents = $('#contents');  //returns a jQuery Object

在jQuery中,获得与document相同的结果。getElementById,您可以访问jQuery对象并获得对象中的第一个元素(记住JavaScript对象的行为类似于关联数组)。

var contents = $('#contents')[0]; //returns a HTML DOM Object

var contents = document.getElementById('contents');

Var contents = $('#contents');

代码片段是不一样的。第一个返回一个Element对象(source)。 第二个是jQuery等效函数,返回一个包含0个或1个DOM元素的集合的jQuery对象。(jQuery文档)。jQuery内部使用document.getElementById()来提高效率。

在这两种情况下,如果找到多个元素,则只返回第一个元素。


当检查github项目的jQuery时,我发现下面的行片段似乎正在使用文档。getElementById代码(https://github.com/jquery/jquery/blob/master/src/core/init.js第68行起)

// HANDLE: $(#id)
} else {
    elem = document.getElementById( match[2] );

以上所有答案都是正确的。如果你想看到它的运行,不要忘记你在浏览器中有控制台,在那里你可以清楚地看到实际的结果:

我有一个HTML:

<div id="contents"></div>

转到控制台(cntrl+shift+c),使用这些命令可以清楚地看到结果

document.getElementById('contents')
>>> div#contents

$('#contents')
>>> [div#contents,
 context: document,
 selector: "#contents",
 jquery: "1.10.1",
 constructor: function,
 init: function …]

正如我们所看到的,在第一种情况下,我们得到了标签本身(也就是说,严格地说,一个HTMLDivElement对象)。在后者中,我们实际上没有一个普通对象,而是一个对象数组。正如上面其他答案所提到的,你可以使用以下命令:

$('#contents')[0]
>>> div#contents