到處都是jQuery選擇器的年代 不了解它們的性能，行嗎
更新時(shí)間：2012年06月18日 16:23:49 作者：
如今jQuery在網(wǎng)站上普及的程度越來(lái)越高，所以，對(duì)于jQuery的使用，即使再小的一點(diǎn)認(rèn)識(shí)、一點(diǎn)優(yōu)勢(shì)、一點(diǎn)不足，也顯得越來(lái)越值得研究和探討
最近，我就對(duì)jQuery的選擇器使用做了一些個(gè)小小的實(shí)驗(yàn)，用來(lái)說(shuō)明jQuery的不同選擇器在不同的情況下，哪個(gè)效率更高，更值得使用。
先在每個(gè)測(cè)試頁(yè)面的head中引入google提供的jquery文件和用于測(cè)試的小插件firejspt。
<!-- 引入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)。
<div id="ilian">比較id選擇器和class選擇器</div>
<div class="ilian">比較id選擇器和class選擇器</div>
用于本次測(cè)試的JS代碼如下：
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é)果如下：
將以下代碼放入body標(biāo)簽內(nèi)，并將其中的li標(biāo)簽復(fù)制500次。
<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代碼如下：
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é)果：
先在每個(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ì)是非常地。。。。。
將以下代碼放入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é)果：
由此可見(jiàn)children選擇器要優(yōu)于直接子標(biāo)簽符號(hào)選擇器。
限于文章長(zhǎng)度，本文只展示了最基本的測(cè)試，且以上測(cè)試，均是在簡(jiǎn)單環(huán)境中測(cè)試的，測(cè)試效果并不代表絕對(duì)的結(jié)論。
相關(guān)文章
JQERY limittext 插件0.2版(長(zhǎng)內(nèi)容限制顯示)
JQERY limittext 插件為長(zhǎng)內(nèi)容增加一個(gè)顯示更多的功能2010-08-08
jQuery插件FusionCharts繪制2D環(huán)餅圖效果示例【附demo源碼】
這篇文章主要介紹了jQuery插件FusionCharts繪制2D環(huán)餅圖效果,結(jié)合實(shí)例形式分析了jQuery使用插件FusionCharts載入xml數(shù)據(jù)繪制2D環(huán)餅圖的相關(guān)步驟與操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-04-04
jQuery插件MixItUp實(shí)現(xiàn)動(dòng)畫(huà)過(guò)濾和排序
MixItUp過(guò)濾排序jQuery插件是一款鼠標(biāo)滑過(guò)圖片顯示描述的jQuery過(guò)濾排序插件。是一款輕量，但功能強(qiáng)大的 jQuery 插件，提供了對(duì)分類和有序內(nèi)容的美麗的動(dòng)畫(huà)過(guò)濾和排序功能。特別適合用于作品集網(wǎng)站，畫(huà)廊，圖片博客以及任何的分類或有序內(nèi)容。2015-04-04
jquery實(shí)現(xiàn)的3D旋轉(zhuǎn)木馬特效代碼分享
這篇文章主要介紹了jquery實(shí)現(xiàn)的3D旋轉(zhuǎn)木馬特效，功能實(shí)現(xiàn)非常簡(jiǎn)單，推薦給大家，有需要的小伙伴可以參考下。2015-08-08
jQuery封裝placeholder效果實(shí)現(xiàn)方法,讓低版本瀏覽器支持該效果
下面小編就為大家?guī)?lái)一篇jQuery封裝placeholder效果實(shí)現(xiàn)方法,讓低版本瀏覽器支持該效果。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
jQuery 實(shí)現(xiàn)ajax傳入?yún)?shù)含有特殊字符的方法總結(jié)
在做ajax登錄時(shí)候遇到的一個(gè)問(wèn)題，當(dāng)傳入?yún)?shù)含有特殊字符，比如：“$'#@”等。參數(shù)傳遞會(huì)有問(wèn)題，無(wú)法正確獲取。本文章向碼農(nóng)介紹jQuery ajax特殊字符參數(shù)解決方法，需要的朋友可以參考一下。2016-10-10
JQuery發(fā)送ajax請(qǐng)求時(shí)中文亂碼問(wèn)題解決
這篇文章主要介紹了JQuery發(fā)送ajax請(qǐng)求時(shí)中文亂碼問(wèn)題解決,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-11-11
jQuery實(shí)現(xiàn)仿騰訊迷你首頁(yè)選項(xiàng)卡效果代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)仿騰訊迷你首頁(yè)選項(xiàng)卡效果代碼,可實(shí)現(xiàn)tab切換按鈕的左右滑動(dòng)顯示及點(diǎn)擊切換效果,涉及jQuery基于鼠標(biāo)事件實(shí)現(xiàn)頁(yè)面元素動(dòng)態(tài)操作技巧,需要的朋友可以參考下2015-09-09
jQuery定義背景動(dòng)態(tài)切換效果的方法
這篇文章主要介紹了jQuery定義背景動(dòng)態(tài)切換效果的方法,實(shí)例分析了jQuery操作圖片的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
jquery實(shí)現(xiàn)可橫向和豎向展開(kāi)的動(dòng)態(tài)下滑菜單效果
這篇文章主要介紹了jquery實(shí)現(xiàn)可橫向和豎向展開(kāi)的動(dòng)態(tài)下滑菜單效果,以實(shí)例形式較為詳細(xì)的分析了jquery實(shí)現(xiàn)橫向與豎向展開(kāi)菜單的相關(guān)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-08-08