選擇優化比以前更加重要，因為越來越多的瀏覽器實現了queryselectorall()並承擔了將jquery選擇器轉移到瀏覽器的責任。記住這些小技巧可以讓你輕鬆突破學習選擇器時的瓶頸。
如果可能的話，避免使用jquery擴充套件選擇器。這些擴充套件無法在效能讓原生的queryselectorall() dom提供的方法更有效，所以還是用jquery提供的常規選擇器吧。12
345// slower (the zero-based :even selector is a jquery extension)
$( "#my-table tr:even" );
// better, though not exactly equivalent
$( "#my-table tr:nth-child(odd)" );
記住，許多jquery的擴充套件，包括在上面的例子中的:even，沒有在css規範準確的對應。在某些情況下，這些擴充套件的方便性可能會超過其效能成本。12
34$( ".data table.attendees td.gonzalez" );
// better: drop the middle if possible.
$( ".data td.gonzalez" );
減少dom節點同樣可以提高選擇器的效率，因為這樣可以使尋找元素時減少遍歷的層數。
使用以id選擇器開始的選擇器確保萬無一失。12
345// fast:
$( "#container div.robotarm" );
// super-fast:
$( "#container" ).find( "div.robotarm" );
第一種方法 dom 使用document.queryselectorall(). 第二種方法 jquery 使用效率更高的document.getelementbyid(), 儘管提高的效率會受後續的.find()的影響。
使用就瀏覽器比如ie8或ie8-時有必要考慮一下建議
右邊的選擇器盡可能明確，左邊的不用。12
345// unoptimized:
$( "div.data .gonzalez" );
// optimized:
$( ".data td.gonzalez" );
如果可能的話，在你的右邊選擇器使用tag.class形式，左邊使用tag或.class。
通用選擇器放在任何地方效率都不高。12
3456
$( ".buttons > *" ); // extremely expensive.
$( ".buttons" ).children(); // much better.
$( ":radio" ); // implied universal selection.
$( "*:radio" ); // same thing, explicit now.
$( "input:radio" ); // much better.
jQuery選擇器的優化選擇
1.1 屬性選擇器 var div id 選中擁有該屬性的元素 var div id div 選中該屬性值為div的元素 var div id div 選中該屬性值不為div的元素 html body 等節點也會被選中 var div id div 選中該屬性值以div開頭的元素 var div i...
JQuery選擇器 選擇器簡介
在開始學習jquery選擇器之前，有必要了解一下css 層疊樣式表 技術。css是一項出色的技術，它使得網頁的結構和表現樣式完全分離。利用css選擇器能夠輕鬆的對某個元素新增樣式而不改變html結構，只需通過新增不同的css規則，就可以得到各種不同樣式的網頁。常用的css選擇器分類如下表 選擇器語法...
Jquery選擇器 基本選擇器
jquery作為我們常用前端工具之一，實際專案中常用的的選擇器有id選擇器 id 元素選擇器 element 樣式選擇器 class 概述 根據給定的id匹配乙個元素。使用任何的元字元 如 作為名稱的文字部分，它必須被兩個反斜槓轉義 引數 id,用於搜尋的，通過元素的 id 屬性中給定的值。示例 查...