是这样的:
var contents = document.getElementById('contents');
和这个一样:
var contents = $('#contents');
jQuery加载?
是这样的:
var contents = document.getElementById('contents');
和这个一样:
var contents = $('#contents');
jQuery加载?
当前回答
不。第一个返回一个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返回的空值执行操作,将会得到错误
其他回答
不。第一个返回一个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返回的空值执行操作,将会得到错误
以防别人撞到…这是另一个不同之处:
如果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']);
以上所有答案都是正确的。如果你想看到它的运行,不要忘记你在浏览器中有控制台,在那里你可以清楚地看到实际的结果:
我有一个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
接近,但不一样。它们得到相同的元素,但jQuery版本被包装在jQuery对象中。
等价的是这个
var contents = $('#contents').get(0);
或者这个
var contents = $('#contents')[0];
这将把元素从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