1. 程式人生 > >JQuery獲取元素的方法總結

JQuery獲取元素的方法總結

clas 內容 存在 過濾器 put ID .class 元素選擇器 IV

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

1. jQuery選擇器

1.1 元素選擇器

通過元素的性質,id,class等獲取元素,常見語法為 $("#id"),$(".class"),$("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

JQuery獲取元素的方法總結