关于速度差异的注释。将以下代码片段附加到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对象

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

document.getElementById ()

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

Jquery(美元)

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

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

等价的是这个

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

或者这个

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

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

以上所有答案都是正确的。如果你想看到它的运行，不要忘记你在浏览器中有控制台，在那里你可以清楚地看到实际的结果:

我有一个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

不完全是! !

document.getElementById('contents'); //returns a HTML DOM Object

var contents = $('#contents');  //returns a jQuery Object

在jQuery中，获得与document相同的结果。getElementById，您可以访问jQuery对象并获得对象中的第一个元素(记住JavaScript对象的行为类似于关联数组)。

var contents = $('#contents')[0]; //returns a HTML DOM Object