jQuery 選擇器的優化 從官方文件翻譯過來的

2021-06-22 22:15:11 字數 974 閱讀 9725

選擇器的優化在今天沒有比過去更重要了,因為很多瀏覽器實現了document.queryselectorall()這個方法,選擇器的負擔也從jquery轉向了瀏覽器。然而,有些要點依然需要記住。

基於id的選擇器

使用id選擇器總是最快的。

// fast:

$( "#container div.robotarm" );

// super-fast:

$( "#container" ).find( "div.robotarm" );

find()方法更快是因為其前面的選擇器沒有使用sizzle選擇器引擎進行處理。只有1個id的選擇器使用的是document.getelementbyid()進行處理,它非常快是因為這是瀏覽器固有的方法。

具體性

使你的右邊選擇器的具體性高於左邊選擇器,請看下面例子:

// unoptimized:

$( "div.data .gonzalez" );

// optimized:

$( ".data td.gonzalez" );

使用「標籤.類」在右邊選擇器,使用「.類」在左邊選擇器。(因為瀏覽器處理選擇器是從右到左)

避免過度具體

選擇器中如果包含了類似萬用字元的東西將會很慢。請看下面例子:

$( ".buttons > *" ); // extremely expensive.

$( ".buttons" ).children(); // much better.

$( ".category :radio" ); // implied universal selection.

$( ".category *:radio" ); // same thing, explicit now.

$( ".category input:radio" ); // much better.

優化jQuery選擇器

選擇優化比以前更加重要,因為越來越多的瀏覽器實現了queryselectorall 並承擔了將jquery選擇器轉移到瀏覽器的責任。記住這些小技巧可以讓你輕鬆突破學習選擇器時的瓶頸。如果可能的話,避免使用jquery擴充套件選擇器。這些擴充套件無法在效能讓原生的queryselectorall do...

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 選擇器

選擇器名稱 描述返回 示例 id id選擇器 根據給定的id匹配乙個元素 單個元素 box 選取id為box元素 class 類選擇器 根據給定的類名匹配元素 集合元素 box 選取所有類名為box元素 element 元素選擇器 根據給定的元素名稱匹配元素 集合元素 p 選取所有元素 萬用字元選擇...