jquery優化 遍歷

2021-06-15 02:26:49 字數 1537 閱讀 2952

與使用選擇符查詢頁面中的元素相對應,jquery遍歷操作背後的工作機制也很有特色。了解了jquery對dom進行遍歷背後的工作機制,可以在編寫**時有意識地避免一些不必要的重複操作,從而提公升**的效能。本文就從jquery的遍歷機制入手簡單**一下優化jquery**的問題。

jquery內部維護著乙個jquery物件棧。每個遍歷方法都會找到一組新元素(乙個jquery物件),然後jquery會把這組元素推入到棧中。而每個jquery物件都有三個屬性:context、selector和prevobject,其中的prevobject屬性就指向這個物件棧中的前乙個物件,而通過這個屬性可以回溯到最初的dom元素集。

jquery為我們操作這個內部物件棧提供了兩個非常有用的方法:

呼叫第乙個方法只是簡單地彈出乙個物件(結果就是回到前乙個jquery物件)。第二個方法更有意思,呼叫它會在棧中回溯乙個位置,然後把兩個位置上的元素集組合起來,並把這個新的、組合之後的元素集推入棧的上方。

利用這個dom元素棧可以減少重複的查詢和遍歷的操作,而減少重複操作也正是優化jquery**效能的關鍵所在。

下面是乙個函式(省略了前後**),用於實現**行條紋效果:

function

stripe

());

}

stripe()函式兩次使用了id選擇符#news查詢元素:一次是為了從帶有alt類的行中刪除該類,另一次是為了給新選中的行新增這個類。

優化這個函式的方法有兩個,一是連綴

連綴優化利用的就是jquery的內部物件棧和.end()方法。優化後的**如下:

function

stripe

());

}

第一次呼叫.find()會把**行推到棧上,然後的.end()方法則把這些行彈出,從而讓下一次呼叫.find()仍然是在#news**上執行操作。這樣就把兩次選擇符查詢減少為一次。

另乙個優化方法是快取

所謂快取,在這裡就是把之前操作的結果儲存起來,以便將來重用。優化後的**如下:

var

$news =$

('#news'

);function

stripe

());

}

與連綴的方法相比,快取方式稍嫌冗長,因為額外建立了乙個用於儲存jquery物件的變數。但從另乙個角度來看,這種方式在**中可以實現對選中元素的兩次操作完全分離,而這也許可以滿足我們其他情況下的需求。同樣,因為可以把選中的元素儲存在stripe()函式之外,也就避免了每次呼叫函式時重複查詢選擇符的操作。

利用jquery的內部物件棧和快取,可以減少重複的dom查詢及遍歷,從而提高指令碼執行速度。

因為根據id在頁面中選擇元素速度極快,以上兩個例子在優化前後不會有明顯的效能差異。在實際編碼中,應該選擇可讀性最好、最容易維護的方式。如果真的遇到了效能瓶頸,以上優化技術都可以起到立竿見影的效果。

(注:本文基於《jquery基礎教程(第3版)》相關章節內容編撰而成。)

原文:

jQuery 遍歷函式

jquery 遍歷函式包括了用於篩選 查詢和串聯元素的方法。函式描述 add 將元素新增到匹配元素的集合中。andself 把堆疊中之前的元素集新增到當前集合中。children 獲得匹配元素集合中每個元素的所有子元素。closest 從元素本身開始,逐級向上級元素匹配,並返回最先匹配的祖先元素。c...

jQuery 遍歷 同胞

同胞擁有相同的父元素。通過 jquery,您能夠在 dom 樹中遍歷元素的同胞元素。有許多有用的方法讓我們在 dom 樹進行水平遍歷 siblings 方法返回被選元素的所有同胞元素。下面的例子返回p 效果圖 您也可以使用可選引數來過濾對同胞元素的搜尋。下面的例子返回屬於 next 方法返回被選元素...

jQuery 遍歷 (筆記)

遍歷 對物件進行迭代 意為 移動 用於根據其相對於其他元素的關係來 查詢 或選取 html 元素。以某項選擇開始,並沿著這個選擇移動,直到抵達您期望的元素為止。遍歷方法中最大的種類是樹遍歷。過濾方法 first last eq filter 自定義標準 ex.p filter in not 祖先 p...