jQuery選擇器大全

jQuery基本選擇器:

$(“#elem”) ——選取id爲elem的元素,返回單個元素。

$(“.test”)——獲取元素集合,返回class爲test的元素集合。

$(“P”)—— 獲取標籤集合,返回所有的p標籤。

$(“*”) —— 返回所有的元素。

$(“p,div,td.myClass”) —— 返回p標籤,div,和class爲myClass的元素集合。

jQuery層次選擇器:

$(“ancestor descendant”)——選取ancestor元素裏的所有descendant元素。$(“div span”)選取<div>裏的所有的<span>元素。

$(“parent>child”)——選取parent元素下的child(子)元素。$(“div>span”)選取<div>元素下元素名是<span>的子元素。

$(“prev+next”)——選取緊接在prev元素後的next元素。$(“.one + div”)選取class爲one的下一個<div>元素。

$(“prev~siblings”)——選取prev元素之後的所有兄弟元素。$(“#elemId~div”)選取id爲elemId的元素後的所有<div>兄弟元素。

jQuery過濾選擇器:

  基本過濾選擇器:

         :first——選取第一個元素,$(“div:first”)選取所有<div>元素中第一個<div>元素

         :last——選取最後一個元素,$(“div:last”)選取所有<div>元素中最後一個<div>元素

         :not(selector)——去除所有與給定選擇器匹配的元素,$(“input:not(.myClass)”選取class不是myClass的<input>元素。

         :eves——選取索引是偶數的所有元素,索引從0開始。$(“input:even”)選取索引是偶數<input>元素。

         :odd——選取索引是奇數的所有元素,索引從0開始。$(“input:odd”)選取索引是奇數<input>元素。

         :eq(index)——選取索引等於index的元素,index從0開始。$(“input:eq(1)”)選取索引等於1的元素。

    :gt(index)——選取索引大於index的所有元素,index從0開始。$(“input:gt(1)”)選取索引大於1的元素。

   :lt(index)——選取索引小於index的所有元素,index從0開始。$(“input:lt(1)”)選取索引小於1的元素。

        :header——選取所有的標題元素,例如h1,h2..hn等等。$(“:header”)選取網頁中所有的<h1>,<h2>,<h3>….

         :animated——選取當前正在執行動畫的所有元素。$(“div:animated”)選取正在執行動畫的<div>元素。

         內容過濾器:

         :contains(text)——選取含有文本內容爲“text”的所有元素。$(“div:contains(“helloKitty”)”)選取含有文本爲“helloKitty”的<div>元素。

         :empty——選取不包含子元素或者文本的空元素。$(“div:empty”)選取不包含子元素(包括文本元素)的<div>空元素。

         :has(selector)——選取含有選擇器所匹配的元素的元素。$(“div:has(p)”)選取含有<p>元素的<div>元素。

         :parent——選取含有子元素或者文本的元素。$(“div:parent”)選取用友子元素(包括文本元素)的<div>元素。

  可見性過濾選擇器:

  :hidden——選取所有不可見的元素。 $(“:hidden”)選取所有的不可見的元素。包括<input type=”hidden”/>,<div style=”displey:none;”>和<div style=”visibility:hidden;”>等元素,如果只想選取<input>元素,使用$(“input:hidden”).

  :visible——選取所有可見的元素。$(“div:visible”)選取所有可見的<div>元素。

  屬性過濾選擇器:

  [attribute]——選取擁有此屬性的元素。$(“div[id]”)選取用id屬性的div元素。

  [attribute=value]——選取屬性的值爲value的元素。$(“div[name=hellokitty]”)選取屬性name爲“hellokitty”的<div>元素。

  [attribute!=value]——選取屬性的值不等於value的元素。$(“div[name!=hellokitty]”)選取屬性name不等於“hellokitty”,或者沒有name屬性的<div>元素。

  [attribute^=value]——選取屬性的值以value開始的元素。$(“div[name^=hellokitty]”)選取屬性name以“hellokitty”開始的<div>元素。

  [attribute$=value]——選取屬性的值以value結尾的元素。$(“div[name=hellokitty]”)選取屬性name以“hellokitty”結尾的<div>元素。

  [attribute*=value]——選取屬性的值爲包含value的元素。$(“div[name=hellokitty]”)選取屬性name包含“hellokitty”的<div>元素。

  [selector1][selector2][selectorN]——用屬性選擇器合併成一個複合屬性選擇器,滿足多個條件,每個選擇一次,縮小一次的範圍。$(“div[id][title$=’helloKitty’]”)選取擁有屬性id,並且屬性title以“hellokitty”結束的<div>元素。


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章