在jQuery中查找元素的最有效方法

前端之家收集整理的这篇文章主要介绍了在jQuery中查找元素的最有效方法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
如果我有一个CSS类,我只将其应用于表单元素,例如:
<form class="myForm">

这两个jQuery选择器中哪一个最有效,为什么?

a) $('form.myForm')

b) $('.myForm')

解决方法

正如redsquare已经提到的,选择算法在后来的jQuery版本中发生了变化(部分原因是由于getElementsByClassName支持).此外,我使用迄今为止最新的jQuery版本(v1.6)对此进行了测试,并且还添加了对document.getElementsByClassName的测试以进行比较(至少在Firefox 4和Chrome中有效).

Firefox 4中的结果是:

// With 100 non-form elements:
$('.myForm') : 366ms
$('form.myForm') : 766ms
document.getElementsByClassName('myForm') : 11ms

// Without any other elements:
$('.myForm') : 365ms
$('form.myForm') : 583ms
document.getElementsByClassName('myForm') : 11ms

接受的答案已经过时(并且仍然可以通过搜索“在jquery中找到元素的有效方法”来找到)并且可以误导人,所以我觉得我必须写这个.

另外,看看jQuery和本机浏览器选择器函数之间的时差.在jQuery 1.2.6中,$(‘.myForm’)比getElementsByClassName慢300多倍,而在jQuery 1.6中它只慢了约20倍,但仍比$(‘form.myForm’)快(与过时的相反)回答).

注意:结果是使用Firefox 4获得的(与Chrome类似的结果).在Opera 10中,使用标记名称进行查询的速度稍快一些,但Opera也支持更快的本机getElementsByClassName.

测试代码http://jsbin.com/ijeku5

猜你在找的jQuery相关文章