用對(duì)選擇器

在jQuery中，可以用多種選擇器，選擇同一個(gè)網(wǎng)頁(yè)元素。每種選擇器的性能是不一樣的，應(yīng)該了解它們的性能差異

1、最快的選擇器：id選擇器和元素標(biāo)簽選擇器

舉例來(lái)說(shuō)，下面的語(yǔ)句性能最佳：

$('#id')$('form')$('input')

遇到這些選擇器的時(shí)候，jQuery內(nèi)部會(huì)自動(dòng)調(diào)用瀏覽器的原生方法（比如getElementById()），所以它們的執(zhí)行速度快。

2、較慢的選擇器：class選擇器

$('.className')的性能，取決于不同的瀏覽器。Firefox、Safari、Chrome、Opera瀏覽器，都有原生方法getElementByClassName()，所以速度并不慢。但是，IE5-IE8都沒有部署這個(gè)方法，所以這個(gè)選擇器在IE中會(huì)相當(dāng)慢

3、最慢的選擇器：偽類選擇器和屬性選擇器

找出網(wǎng)頁(yè)中所有的隱藏元素，就要用到偽類選擇器：

$(':hidden')

屬性選擇器的例子則是：

$('[attribute=value]')

這兩種語(yǔ)句是最慢的，因?yàn)闉g覽器沒有針對(duì)它們的原生方法。但是，一些瀏覽器的新版本，增加了querySelector()和querySelectorAll()方法，因此會(huì)使這類選擇器的性能有大幅提高

理解父子關(guān)系

下面六個(gè)選擇器，都是從父元素中選擇子元素

$('.child', $parent)$parent.find('.child')$parent.children('.child')$('#parent > .child')$('#parent .child')$('.child', $('#parent'))

1、下面這條語(yǔ)句的意思是，給定一個(gè)DOM對(duì)象，然后從中選擇一個(gè)子元素。jQuery會(huì)自動(dòng)把這條語(yǔ)句轉(zhuǎn)成$.parent.find('child')，這會(huì)導(dǎo)致一定的性能損失。它比最快的形式慢了5%-10%

$('.child', $parent)

2、這條是最快的語(yǔ)句。.find()方法會(huì)調(diào)用瀏覽器的原生方法（getElementById，getElementByName，getElementByTagName等等），所以速度較快

$parent.find('.child')

3、這條語(yǔ)句在jQuery內(nèi)部，會(huì)使用$.sibling()和javascript的nextSibling()方法，一個(gè)個(gè)遍歷節(jié)點(diǎn)。它比最快的形式大約慢50%

$parent.children('.child')

4、jQuery內(nèi)部使用Sizzle引擎，處理各種選擇器。Sizzle引擎的選擇順序是從右到左，所以這條語(yǔ)句是先選.child，然后再一個(gè)個(gè)過(guò)濾出父元素#parent，這導(dǎo)致它比最快的形式大約慢70%

$('#parent > .child')

5、這條語(yǔ)句與上一條是同樣的情況。但是，上一條只選擇直接的子元素，這一條可以選擇多級(jí)子元素，所以它的速度更慢，大概比最快的形式慢了77%

$('#parent .child')

6、jQuery內(nèi)部會(huì)將這條語(yǔ)句轉(zhuǎn)成$('#parent').find('.child')，比最快的形式慢了23%

$('.child', $('#parent'))

所以，最佳選擇是$parent.find('.child')。而且，由于$parent往往在前面的操作已經(jīng)生成，jQuery會(huì)進(jìn)行緩存，所以進(jìn)一步加快了執(zhí)行速度