到處都是jQuery選擇器的年代 不了解它們的性能,行嗎
更新時間:2012年06月18日 16:23:49 作者:
如今jQuery在網(wǎng)站上普及的程度越來越高,所以,對于jQuery的使用,即使再小的一點認(rèn)識、一點優(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選擇器
將以下代碼復(fù)制200次,置于body標(biāo)簽內(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標(biāo)簽內(nèi),并將其中的li標(biāo)簽復(fù)制500次。
<ul id="ilian">
<li>比較直接子標(biāo)簽符號“>”和children</li>
<li>比較直接子標(biāo)簽符號“>”和children</li>
<li>比較直接子標(biāo)簽符號“>”和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。
復(fù)制代碼 代碼如下:
<!-- 引入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選擇器
將以下代碼復(fù)制200次,置于body標(biāo)簽內(nèi)。
復(fù)制代碼 代碼如下:
<div id="ilian">比較id選擇器和class選擇器</div>
<div class="ilian">比較id選擇器和class選擇器</div>
用于本次測試的JS代碼如下:
復(fù)制代碼 代碼如下:
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標(biāo)簽內(nèi),并將其中的li標(biāo)簽復(fù)制500次。
復(fù)制代碼 代碼如下:
<ul id="ilian">
<li>比較直接子標(biāo)簽符號“>”和children</li>
<li>比較直接子標(biāo)簽符號“>”和children</li>
<li>比較直接子標(biāo)簽符號“>”和children</li>
<!-- 省略497次 -->
</ul>
用于本次測試的JS代碼如下:
復(fù)制代碼 代碼如下:
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)于直接子標(biāo)簽符號選擇器。
限于文章長度,本文只展示了最基本的測試,且以上測試,均是在簡單環(huán)境中測試的,測試效果并不代表絕對的結(jié)論。
相關(guān)文章
關(guān)于event.cancelBubble和event.stopPropagation()的區(qū)別介紹
cancelBubble用于ie的阻止冒泡事件,event.stopPropagation()用于firefox和chrome等其他瀏覽器的疑惑介紹。2011-12-12淺談jQuery頁面的滾動位置scrollTop、scrollLeft
官方文檔的解釋有點含糊,其實換個角度就很容易理解了,scrollTop獲取的是內(nèi)部元素超出外部容器的高度。 例如:$('window').scrollTop()獲取的就是當(dāng)前這個頁面超出窗口最上端的高度,scrollLeft與此同理2015-05-052012年開發(fā)人員的16款新鮮的jquery插件體驗分享
jQuery的是一個多瀏覽器的Javascript集合,以輕松地簡化了客戶端腳本的HTML;使用這些插件方法可以創(chuàng)建高效強大的網(wǎng)頁和Web程序2012-12-12淺談ajax在jquery中的請求和servlet中的響應(yīng)
下面小編就為大家分享一篇淺談ajax在jquery中的請求和servlet中的響應(yīng),具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01