是这样的:

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

和这个一样:

var contents = $('#contents');

jQuery加载?


当前回答

不完全是! !

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

其他回答

以防别人撞到…这是另一个不同之处:

如果id包含HTML标准不支持的字符(参见这里的SO问题),那么即使getElementById可以找到它,jQuery也可能找不到它。

这发生在我的id包含“/”字符(例如:id=“a/b/c”),使用Chrome:

var contents = document.getElementById('a/b/c');

能找到我的元素,但是

var contents = $('#a/b/c');

没有。

顺便说一句,简单的修复是移动id到名称字段。JQuery使用以下方法轻松找到元素:

var contents = $('.myclass[name='a/b/c']);

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] );

不。第一个返回一个DOM元素或null,而第二个总是返回一个jQuery对象。如果没有匹配到id为contents的元素,jQuery对象将为空。

document.getElementById('contents')返回的DOM元素允许你做一些事情,比如改变. innerhtml(或.value)等,但是你需要在jQuery对象上使用jQuery方法。

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

是更等价的,但是如果没有与内容id匹配的元素,document.getElementById('contents')将返回null,但$('#contents').get(0)将返回undefined。

使用jQuery对象的一个好处是,如果没有返回任何元素,也不会得到任何错误,因为对象总是返回的。但是,如果试图对document.getElementById返回的空值执行操作,将会得到错误

Just like most people have said, the main difference is the fact that it is wrapped in a jQuery object with the jQuery call vs the raw DOM object using straight JavaScript. The jQuery object will be able to do other jQuery functions with it of course but, if you just need to do simple DOM manipulation like basic styling or basic event handling, the straight JavaScript method is always a tad bit faster than jQuery since you don't have to load in an external library of code built on JavaScript. It saves an extra step.

截至2019年,所有的答案都是旧的,你可以直接在javascript中访问id键域,只需尝试一下

<p id="mytext"></p>
<script>mytext.innerText = 'Yes that works!'</script>

在线演示! ——https://codepen.io/frank-dspeed/pen/mdywbre