最近，我就對(duì)jQuery的選擇器使用做了一些個(gè)小小的實(shí)驗(yàn)，用來(lái)說(shuō)明jQuery的不同選擇器在不同的情況下，哪個(gè)效率更高，更值得使用。

先在每個(gè)測(cè)試頁(yè)面的head中引入google提供的jquery文件和用于測(cè)試的小插件firejspt。

復(fù)制代碼代碼如下:

 
<!-- 引入FireJSPT的庫(kù)文件 --> 
<script type="text/javascript" src="firejspt.js"></script> 
<!-- 引入google提供的1.44版的jQuery的庫(kù)文件，其實(shí)哪個(gè)版本都無(wú)所謂了，呵呵 --> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 

1. 最常用的id選擇器和class選擇器
將以下代碼復(fù)制200次，置于body標(biāo)簽內(nèi)。

復(fù)制代碼代碼如下:

 
<div id="ilian">比較id選擇器和class選擇器</div> 
<div class="ilian">比較id選擇器和class選擇器</div> 

用于本次測(cè)試的JS代碼如下：

復(fù)制代碼代碼如下:

 
function ilianTest01(){ 
$('#ilian').click(function() { alert('Hello World'); }); 
} 

function ilianTest02(){ 
$('.ilian').click(function() { alert('Hello World'); }); 
} 

/*調(diào)用2個(gè)函數(shù)進(jìn)行測(cè)試*/ 
$(function(){ 
jspt.test(function(){ ilianTest01(); }); 
jspt.test(function(){ ilianTest02(); }); 
}); 

測(cè)試結(jié)果如下：

由圖可以id選擇器相比于class選擇器的效率優(yōu)勢(shì)是非常地。。。。。

2. 在選擇標(biāo)簽時(shí)，層級(jí)選擇器用得也非常頻繁，這次對(duì)比測(cè)試直接子標(biāo)簽符號(hào)“>”和children。

將以下代碼放入body標(biāo)簽內(nèi)，并將其中的li標(biāo)簽復(fù)制500次。

復(fù)制代碼代碼如下:

 
<ul id="ilian"> 
<li>比較直接子標(biāo)簽符號(hào)“>”和children</li> 
<li>比較直接子標(biāo)簽符號(hào)“>”和children</li> 
<li>比較直接子標(biāo)簽符號(hào)“>”和children</li> 
<!-- 省略497次 --> 
</ul> 

用于本次測(cè)試的JS代碼如下：

復(fù)制代碼代碼如下:

 
function ilianTest01(){ 
$('#ilian > li').click(function() { alert('Hello World'); }); 
} 

function ilianTest02(){ 
$('#ilian').children('li').click(function() { alert('Hello World'); }); 
} 

/*調(diào)用2個(gè)函數(shù)進(jìn)行測(cè)試*/ 
$(function(){ 
jspt.test(function(){ ilianTest01(); }); 
jspt.test(function(){ ilianTest02(); }); 
}); 

測(cè)試結(jié)果：