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