Phi*_*enn 584 javascript jquery jquery-selectors
这是:
var contents = document.getElementById('contents');
与此相同:
var contents = $('#contents');
鉴于jQuery已加载？
Joh*_*ock 959
不完全是!!
document.getElementById('contents'); //returns a HTML DOM Object
var contents = $('#contents'); //returns a jQuery Object
在jQuery中,为了获得相同的结果document.getElementById,您可以访问jQuery Object并获取对象中的第一个元素(记住JavaScript对象的行为类似于关联数组).
var contents = $('#contents')[0]; //returns a HTML DOM Object
SLa*_*aks 131
没有.
调用document.getElementById('id')将返回原始DOM对象.
调用$('#id')将返回一个包装DOM对象的jQuery对象并提供jQuery方法.
因此,你只能调用jQuery方法一样css()或animate()在$()通话.
你也可以写$(document.getElementById('id')),这将返回一个jQuery对象,相当于$('#id').
您可以通过编写从jQuery对象获取底层DOM对象$('#id')[0].
Rig*_*red 30
关闭,但不一样.他们获得相同的元素,但jQuery版本包含在jQuery对象中.
相当于此
var contents = $('#contents').get(0);
或这个
var contents = $('#contents')[0];
这些将把元素从jQuery对象中拉出来.
nur*_*guy 25
关于速度差异的说明.将以下snipet附加到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));
}
替代评论一个,然后评论另一个.在我的测试中,
的document.getElementById平均大约为35ms(波动从
25ms最高52ms的约15 runs)
另一方面,
jQuery平均大约200毫秒(从大约
181ms到222ms大约15 runs).从这个简单的测试中你可以看到jQuery花了大约6倍的时间.
当然,这是10000迭代过程,所以在更简单的情况下,我可能会使用jQuery易用性和所有其他很酷的东西,如.animate和.fadeTo.但是,从技术上getElementById来说,速度要快得多.
Mat*_*att 17
不.第一个返回DOM元素,或null,而第二个返回一个jQuery对象.如果没有contents匹配id的元素,jQuery对象将为空.
返回的DOM元素document.getElementById('contents')允许您执行诸如更改.innerHTML(或.value)等操作,但是您需要在jQuery对象上使用jQuery方法.
var contents = $('#contents').get(0);
更等效,但是如果没有contents匹配id的元素,document.getElementById('contents')将返回null,但$('#contents').get(0)将返回undefined.
使用jQuery对象的一个好处是,如果没有返回任何元素,您将不会收到任何错误,因为始终返回一个对象.但是,如果您尝试对null返回的操作执行操作,则会出现错误document.getElementById
And*_*rey 15
不,实际上同样的结果是:
$('#contents')[0]
jQuery不知道从查询返回多少结果.你得到的是一个特殊的jQuery对象,它是与查询匹配的所有控件的集合.
使jQuery变得如此方便的一部分原因是调用此对象的MOST方法看起来像是用于一个控件,实际上是在一个循环调用所有成员的集合中
当您使用[0]语法时,您将从内部集合中获取第一个元素.此时,您将获得一个DOM对象
sda*_*gle 10
如果其他人遇到这个...这是另一个区别:
如果id包含HTML标准不支持的字符(请参阅此处的 SO问题),那么即使getElementById,jQuery也可能找不到它.
使用Chrome时,我发现我的ID包含"/"字符(例如:id ="a/b/c"):
var contents = document.getElementById('a/b/c');
能够找到我的元素但是:
var contents = $('#a/b/c');
没有.
顺便说一句,简单的解决方法是将id移动到name字段.JQuery使用以下方法找到元素没有问题:
var contents = $('.myclass[name='a/b/c']);
就像大多数人所说的那样,主要区别在于它使用jQuery调用包装在jQuery对象中,而使用直接JavaScript包含原始DOM对象.jQuery对象当然可以用它做其他jQuery函数,但是,如果你只需要做基本样式或基本事件处理之类的简单DOM操作,直接的JavaScript方法总是比jQuery快一点,因为你不要必须加载在JavaScript上构建的外部代码库.它节省了额外的一步.
小智 5
另一个区别：getElementById返回第一个匹配项，而$('#...')返回匹配项集合 - 是的，可以在 HTML 文档中重复相同的 ID。
此外，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 相同的 ID。jQuery 的选择性可以帮助你。
var contents = document.getElementById('contents');
var contents = $('#contents');
代码片段不一样.第一个返回一个Element对象(源).第二个,jQuery等价物将返回一个包含零个或一个DOM元素集合的jQuery对象.(jQuery文档).内部jQuery document.getElementById()用于提高效率.
在这两种情况下,如果找到多个元素,则只返回第一个元素.
当检查github项目的jQuery时,我发现以下行代码片段似乎使用了document.getElementById代码(https://github.com/jquery/jquery/blob/master/src/core/init.js第68行)
// HANDLE: $(#id)
} else {
elem = document.getElementById( match[2] );