文档。getElementById vs jQuery $()

是这样的:

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

2014-02-08 14:44:07

其他回答

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

等价的是这个

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

或者这个

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

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

2010-11-01 14:57:24

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

2015-03-19 16:56:12

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

$('#contents')[0]

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

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

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

2010-11-01 14:56:58

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

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

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

2019-12-24 07:58:19

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] );

2014-07-23 13:17:09

文档。getElementById vs jQuery $()

推荐文章

最新文章

标签