怎么使用jQuery選擇器

本篇內(nèi)容介紹了“怎么使用jQuery選擇器”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！

先在每個測試頁面的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標簽內(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)勢是非常地。

2. 在選擇標簽時，層級選擇器用得也非常頻繁，這次對比測試直接子標簽符號“>”和children。

將以下代碼放入body標簽內(nèi)，并將其中的li標簽復(fù)制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)于直接子標簽符號選擇器。

“怎么使用jQuery選擇器”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！