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]的元素 -> 選擇器("div[id]")
選擇屬性attribute的值等於value的元素 -> 選擇器("input[name=password]")
選擇屬性attribute的值不等於value的元素 -> 選擇器("input[name!=password]")
選擇屬性attribute的值以value開始的元素 -> 選擇器("input[name^=password]")
選擇屬性attribute的值以value結尾的元素 -> 選擇器=value]") -> =password]")
選擇屬性attribute的值含有value的元素 -> 選擇器("input[name*=password]")
多個屬性選擇器的合併 -> 選擇器("div style")
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")
3、表單選擇器
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")