是这样的:
var contents = document.getElementById('contents');
和这个一样:
var contents = $('#contents');
jQuery加载?
当前回答
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
关于速度差异的注释。将以下代码片段附加到onclick调用:
function myfunc()
{
var timer = new Date();
for(var i = 0; i < 10000; i++)
{
//document.getElementById('myID');
$('#myID')[0];
}
console.log('timer: ' + (new Date() - timer));
}
交替地注释掉一个，然后注释掉另一个。在我的测试中
文档。getElementbyId平均约为35ms(在大约15次运行时，从25ms到52ms波动)
另一方面，
jQuery平均大约200ms(在大约15次运行中，范围从181ms到222ms)。 从这个简单的测试中，您可以看到jQuery花费了大约6倍的时间。
当然，这是超过10000次迭代，所以在一个更简单的情况下，我可能会使用jQuery，以方便使用和所有其他很酷的东西，如.animate和. fadeto。但是是的，技术上getElementById要快得多。
不，实际上结果是一样的:
$('#contents')[0]
jQuery不知道该查询将返回多少结果。返回的是一个特殊的jQuery对象，它是与查询匹配的所有控件的集合。
jQuery如此方便的部分原因是，在这个对象上调用的大多数方法看起来是针对一个控件的，实际上是在一个循环中调用集合中的所有成员
当您使用[0]语法时，您从内部集合中获取第一个元素。此时，您将得到一个DOM对象
以防别人撞到…这是另一个不同之处:
如果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']);
另一个区别是: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的选择性可以帮助您解决这个问题。
