是这样的:

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

和这个一样:

var contents = $('#contents');

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

其他回答

No.

调用document.getElementById('id')将返回一个原始DOM对象。

调用$('#id')将返回一个jQuery对象,该对象包装DOM对象并提供jQuery方法。

因此,只能在$()调用中调用css()或animate()等jQuery方法。

你也可以写$(document.getElementById('id')),它将返回一个jQuery对象,等价于$('#id')。

你可以通过编写$('#id')[0]从jQuery对象中获得底层DOM对象。

截至2019年,所有的答案都是旧的,你可以直接在javascript中访问id键域,只需尝试一下

<p id="mytext"></p>
<script>mytext.innerText = 'Yes that works!'</script>

在线演示! ——https://codepen.io/frank-dspeed/pen/mdywbre

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

不完全是! !

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

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