是这样的:

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

和这个一样:

var contents = $('#contents');

jQuery加载?


当前回答

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

等价的是这个

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

或者这个

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

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

其他回答

另一个区别是: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的选择性可以帮助您解决这个问题。

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

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

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

等价的是这个

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

或者这个

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

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

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

$('#contents')[0] 

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

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

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

jQuery是基于JavaScript构建的。这意味着它只是javascript。

document.getElementById ()

getelementbyid()方法返回具有指定值的ID属性的元素,如果不存在具有指定ID的元素则返回null。一个ID在一个页面中应该是唯一的。

Jquery(美元)

以id选择器作为参数调用jQuery()或$()将返回一个包含0个或1个DOM元素的集合的jQuery对象。每个id值在文档中只能使用一次。如果多个元素被分配了相同的ID,使用该ID的查询将只选择DOM中第一个匹配的元素。