文档。getElementById vs jQuery $()

是这样的:

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

和这个一样:

var contents = $('#contents');

jQuery加载?

当前回答

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

如果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返回的空值执行操作，将会得到错误

不，实际上结果是一样的:

$('#contents')[0]

jQuery不知道该查询将返回多少结果。返回的是一个特殊的jQuery对象，它是与查询匹配的所有控件的集合。

jQuery如此方便的部分原因是，在这个对象上调用的大多数方法看起来是针对一个控件的，实际上是在一个循环中调用集合中的所有成员

当您使用[0]语法时，您从内部集合中获取第一个元素。此时，您将得到一个DOM对象

接近，但不一样。它们得到相同的元素，但jQuery版本被包装在jQuery对象中。

等价的是这个

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

或者这个

var contents = $('#contents')[0];

这将把元素从jQuery对象中拉出来。

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

如果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']);

推荐文章