是这样的:
var contents = document.getElementById('contents');
和这个一样:
var contents = $('#contents');
jQuery加载?
是这样的:
var contents = document.getElementById('contents');
和这个一样:
var contents = $('#contents');
jQuery加载?
当前回答
接近,但不一样。它们得到相同的元素,但jQuery版本被包装在jQuery对象中。
等价的是这个
var contents = $('#contents').get(0);
或者这个
var contents = $('#contents')[0];
这将把元素从jQuery对象中拉出来。
其他回答
不,实际上结果是一样的:
$('#contents')[0]
jQuery不知道该查询将返回多少结果。返回的是一个特殊的jQuery对象,它是与查询匹配的所有控件的集合。
jQuery如此方便的部分原因是,在这个对象上调用的大多数方法看起来是针对一个控件的,实际上是在一个循环中调用集合中的所有成员
当您使用[0]语法时,您从内部集合中获取第一个元素。此时,您将得到一个DOM对象
以上所有答案都是正确的。如果你想看到它的运行,不要忘记你在浏览器中有控制台,在那里你可以清楚地看到实际的结果:
我有一个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
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.
另一个区别是:getElementById返回第一个匹配项,而$('#…')返回一个匹配项的集合——是的,相同的ID可以在HTML文档中重复出现。
此外,getElementId从文档中调用,而$('#…')可以从选择器中调用。因此,在下面的代码中,document.getElementById('content')将返回整个主体,但$('form #content')[0]将返回表单内部。
<body id="content">
<h1>Header!</h1>
<form>
<div id="content"> My Form </div>
</form>
</body>
使用重复的id可能看起来很奇怪,但如果你使用像Wordpress这样的东西,模板或插件可能会使用与你在内容中使用的相同的id。jQuery的选择性可以帮助您解决这个问题。
No.
调用document.getElementById('id')将返回一个原始DOM对象。
调用$('#id')将返回一个jQuery对象,该对象包装DOM对象并提供jQuery方法。
因此,只能在$()调用中调用css()或animate()等jQuery方法。
你也可以写$(document.getElementById('id')),它将返回一个jQuery对象,等价于$('#id')。
你可以通过编写$('#id')[0]从jQuery对象中获得底层DOM对象。