jQuery選擇器大全

jQuery選擇器

1、做用: 選擇要操做的DOM元素

步驟:

   　　第一步: 選擇要操做的節點(元素,標籤)對象(JQuery對象)

  　　 第二步: 使用JQuery對象中的方法和屬性進行相關的操做

2、種類

一、基本選擇器

  　　 1) ID選擇器 -> $("#ID名稱") -> 返回0個或1個節點

 　　  2) 類選擇器 -> $(".類名") -> 返回0個或多個節點(包裝集,數組)

 　　  3) 標記選擇器 -> $("標記名") -> 返回0個或多個節點(包裝集,數組)

 　　  4) 組合選擇器 -> $("選擇器1","選擇器2",....) -> 返回0個或多個幾點(包裝集,數組)

 　　  5) 通配符選擇器 -> $("*") -> 返回所有的元素節點

二、層次選擇器(父子,兄弟)

　　   1) (全部)後代元素 -> $("祖先元素 後代元素")

   　　2) (直接)子元素 -> $("父元素 > 子元素")

 　　  3) (相鄰)弟弟元素 -> $("哥哥元素 + 弟弟元素")

  　　 4) (全部)弟弟元素 -> $("哥哥元素 ~ 弟弟元素")

三、過濾選擇器 -> 包裝集中進行相應的過濾操做

 1) 基本過濾選擇器

          包裝集中的第一個元素 -> $("包裝集選擇器:first")

          包裝集中的最後一個元素 -> $("包裝集選擇器:last")

          去除全部與給定選擇器匹配的元素 -> $("包裝集選擇器:not(選擇器)")

          包裝集中的下標索引爲偶數的元素 -> $("包裝集選擇器:even")

          包裝集中的下標索引爲奇數的元素 -> $("包裝集選擇器:odd")

          包裝集中指定下標索引的元素 -> $("包裝集選擇器:eq(下標索引)")

          包裝集中大於指定下標索引的元素 -> $("包裝集選擇器:gt(下標索引)")

          包裝集中小於指定下標索引的元素 -> $("包裝集選擇器:lt(下標索引)")

          選擇標題標籤 -> $(":header")

          匹配全部正在執行動畫效果的元素 -> $("包裝類選擇器:animated")

2) 內容過濾選擇器

          選擇包裝集中包含某文本內容的元素 -> $("選擇器:contains('文本內容')")

          選擇空元素的節點對象 -> $("選擇器:empty")

          匹配含有選擇器所匹配的元素的元素 -> $("選擇器:has(選擇器)")

          匹配含有子元素或者文本的元素 -> $("選擇器:parent")

 3) 可見性過濾選擇器

          匹配全部不可見元素(包括type爲hidden的元素) -> $("選擇器:hidden")

          匹配全部課件元素 -> $("選擇器:visible")

 4) 屬性過濾選擇器

          選擇擁有屬性[attribute]的元素 -> $("選擇器[attribute]") -> $("div[id]")

          選擇屬性attribute的值等於value的元素 -> $("選擇器[attribute=value]") -> $("input[name=password]")

          選擇屬性attribute的值不等於value的元素 -> $("選擇器[attribute!=value]") -> $("input[name!=password]")

          選擇屬性attribute的值以value開始的元素 -> $("選擇器[attribute^=value]") -> $("input[name^=password]")

          選擇屬性attribute的值以value結尾的元素 -> $("選擇器[attribute$=value]") -> $("input[name$=password]")

          選擇屬性attribute的值含有value的元素 -> $("選擇器[attribute*=value]") -> $("input[name*=password]")

          多個屬性選擇器的合併 -> $("選擇器[[selector1][selector2][selectorN]]) -> $("div[style][id='text']")

5) 子元素過濾選擇器 -> 下標從1開始

　　  :nth-child(index/even/odd/equation) 區別:eq(index) -> 只選擇一個元素,下標索引從0開始;而:nth-child(index) -> 可選擇多個元素,下標索引從1開始

         :first-child -> 第一個子元素

  　　:last-child -> 最後一個子元素

  　　:only-child -> 匹配某個元素是父元素中惟一的子元素 

6) 表單對象屬性過濾選擇器

  　　:enabled -> 選擇可用元素 -> $("選擇器:enabled")

  　　:disabled -> 選擇不可用元素 -> $("選擇器:disabled")

  　　:checked -> 匹配全部選中的被選中元素(複選框、單選框等，不包括select中的option) -> $("選擇器:checked")

  　　:selected -> 選擇中元素(下拉列表框->匹配全部選中的option元素) -> $("select option:selected")

四、表單選擇器

  　　1) :input -> 匹配全部 input, textarea, select 和 button 元素 ->$(":input")

  　　2) :text -> 匹配全部的單行文本框 -> $(":text")

  　　3) :password -> 匹配全部密碼框 -> $(":password")

 　　 4) :radio -> 匹配全部單選按鈕 -> $(":radio")

  　　5) :checked -> 匹配全部複選框 -> $(":checkbox")

  　　6) :submit -> 匹配全部提交按鈕 -> $(":submit")

  　　7) :image -> 匹配全部圖像域 -> $(":image")

  　　8) :reset -> 匹配全部重置按鈕 -> $(":reset")

  　　9) :button -> 匹配全部按鈕 -> $(":button")

  　　10) :file -> 匹配全部文件域 -> $(":file")

  　　11) :hidden -> 匹配全部不可見元素，或者type爲hidden的元素 -> $("選擇器:hidden")