JQuery獲取元素的方法總結


jQuery定位元素的方法有兩種,一種是通過jQuery 選擇器來選擇元素,可以直接獲取單個或批量的元素;另一種是通過jQuery 遍歷相關來選擇元素,這種方法常用在獲取層級較復雜的頁面中的元素。

1. jQuery選擇器

1.1 元素選擇器

通過元素的性質,id,class等獲取元素,常見語法為 $("#idName"),$(".className"),$("p")等。

1.2 元素屬性選擇器

以元素屬性為基准,選擇包含該屬性或者是該屬性值為“XX”的元素,常見語法 $("[href]") ,$("[href='#']")

 

1.3 元素定位(基本過濾器)選擇器

嚴格來說這不是選擇器的一種,鑒於定位方式較多,將其提取出來。需要結合上述兩種選擇器使用,適用於在上述兩種選擇器選擇出來元素之后,如果元素數量較多,對元素再進行細化定位。由於這種方式需要先選擇出所有同類型元素,再在其中進行選擇(過濾),也稱為基本過濾器選擇器。如定位頁面中第三個p元素,需要先使用元素選擇器選出頁面中的p元素,再根據索引查找 $("p:eq(2)") ,即過濾索引非第三的元素。

1.4 內容過濾器選擇器

根據元素的內容進行選擇

 

1.5 可見性過濾器選擇器

根據元素是否可見進行選擇

 

1.6 表單選擇器

1.6.1 表單類型選擇器

根據表單中的input元素類型選擇

 

1.6.2 表單狀態(過濾器)選擇器

 

2. jQuery遍歷相關

jQuery 遍歷,意為“移動”,用於根據其相對於其他元素的關系來“查找”(或選取)HTML 元素。以某項選擇開始,並沿着這個選擇移動,直到抵達您期望的元素為止。

2.1 層級選擇器

我們可以把文檔中的所有的節點節點之間的關系,用傳統的家族關系來描述,可以把文檔樹當作一個家譜,那么節點與節點直接就會存在父子,兄弟,祖孫的關系了。 

  • >(大於號)緊跟父子關系 如$("div > p")表示選擇div下的直接層是p的節點。 
  • +(加號) 緊跟兄弟關系 如$("div + p")表示選擇div同層的左右相鄰的p節點。 
  • ~ (波浪線)任意距離兄弟關系 如$("div + p")表示選擇div同層的p節點。

 

2.2 子元素過濾器選擇器

對子元素進行選擇(過濾),用法同 1.3 元素定位(基本過濾器)選擇器

 

 

部分參考w3school:http://www.w3school.com.cn/jquery/jquery_selectors.asp


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM