jQuery常用選擇器

什么是選擇器？
就是選中到我們的dom節點 或者說 選中我們頁面中的元素的工具 不管是你的css選擇器也好 還是jq選擇器也好都是為了選中我們頁面中的元素

一.基礎選擇器

1. 標簽選擇器: $(“p”)選中所有的p標簽
2. id選擇器：$("#test1")選中id是test1的標簽
3. 類選擇器: $(".test2")選中類名是test2的標簽
4. 交集選擇器: $(“p.test3”)選中的就是類名為test3的p標簽
5. 分組選擇器: $(“h1,h2,h3”)選中的是我們所有的h1,h2,h3標簽
6. 后代選擇器: $(".test4 p")選中的是我們類名為test4的內容中的p標簽
7. 通配符選擇器: $("*")選中我們頁面上所有標簽
8. 兒子選擇器: $(".test5>p")選中的是我們類名為test5的兒子p標簽
9. 兄弟選擇器: $(".test5+h1")選中的是我們類名為test5的后面一個兄弟h1 如果后面的兄弟不是h1 那么他就不起作用
10. N兄弟選擇器: $(".test6~p")選中的是我們類名為test6的后面的所有的p標簽

二.子元素過濾選擇器

1. :root 選中根標簽 也就是html標簽
2. :nth-child(2) 選中每個標簽下的第二個
3. :first-child 選中每個標簽下的第一個 和:nth-child(1)一樣
4. :last-child 選中每個標簽的最后一個
5. :nth-last-child(2) 選中標簽下的倒數第二個
6. :only-child 選中標簽下只有一個元素的元素
7. :nth-child(2n) 和 :nth-child(even) 一樣 選中每個標簽下的偶數的元素 從1開始算
8. :nth-child(2n+1) 和 :nth-child(odd) 一樣 選中每個標簽下奇數的元素 從1開始算
9. :last-of-type 選中某一個型別標簽的最后一個
10. :only-of-type選中每個標簽下的只有一個的元素
11. :nth-of-type(2n-1) / (odd) 表示選中每個標簽排行為奇數的元素 索引從1開始

三.基礎選擇過濾器

1. li:eq(0) 表示選中第一個li eq里面加的是 索引 默認是0開始
2. li:first 表示選中第一個li
3. li:last 表示選中最后一個li
4. li:even 表示選中偶數個的li 注意:我們這里起使坐標是0
5. li:odd 表示選中奇數個的li
6. li:gt(2)：表示索引大于2的
7. li:lt(2)：表示索引小于2的
8. :header 表示選中所有的標題標題標簽
9. li:not(:eq(1)) 選中除了第二個li(索引為1的li)之外的所有li

四.屬性選擇器

1. [attribute] h1[title] 就是選中具有title這個屬性的h1標簽
2. [attribute=value] h1[title=world] 這就是選中title屬性值為world的標簽
3. [attribute!=value] h1[title!=world] 這就是選中title屬性值不為world的標簽
4. [attribute^=value] h1[title^=hello] 這就是選中title屬性值以hello開頭的
5. [attribute = v a l u e ] h 1 [ t i t l e =value] h1[title =value]h1[title=hello]這就是選中title屬性值以jq結尾的
6. [attribute*=value] h1[title*=wangcai]這就是選中title屬性值有wangcai的屬性
7. [attribute][id] h1[title][id]這表示選中既有title屬性的 又有id屬性的

五.內容過濾選擇器

1. :contains(text) $(“li:contains(Jquery)”)選中內容包含Jquery的li
2. li:has(a) 這表示 內容有a標簽的
3. li:empty 這是選中內容為空的li標簽
4. li:not(:empty) 這是選中內容不為空的li標簽
5. li:parent 這是匹配子元素或者文本元素的

六.可見性選擇器

:visible 選中看得到得元素
:hidden 選中隱藏得元素

七.表單相關的選擇器

1. 選擇所有的表單元素 :input

 $('button:eq(0)').click(function(){
        $(":input").css("outline","3px solid red")
    })

2. 選擇所有的文本框 :text

  $('button:eq(1)').click(function(){
        $(":text").css("outline","3px solid red")
    })

3. 選擇所有的密碼框 :password

 $('button:eq(2)').click(function(){
        $(":password").css("outline","3px solid red")
    })

4. 選擇所有的單選框 :radio

$('button:eq(3)').click(function(){
        $(":radio").css("outline","3px solid red")
    })

5. 選擇復選框 :checkbox

  $('button:eq(4)').click(function(){
        $(":checkbox").css("outline","3px solid red")
    })

6. 選擇所有的提交按鈕

 $('button:eq(5)').click(function(){
        $(":submit").css("outline","3px solid red")
    })

7. 選擇所有的圖片按鈕 :image

  $('button:eq(6)').click(function(){
        $(":image").css("outline","3px solid red")
    })

8. 選擇重置按鈕

 $('button:eq(7)').click(function(){
        $(":reset").css("outline","3px solid red")
    })

9. 選擇所有得普通按鈕

  $('button:eq(8)').click(function(){
        $(":button").css("outline","3px solid red")
    })

10. 選擇所有得檔案上傳按鈕

   $('button:eq(9)').click(function(){
        $(":file").css("outline","3px solid red")
    })

11. 選擇所有可用的表單元素 input:enabled

$("button:eq(0)").click(function () {
        $("input:enabled").css("outline","3px solid red")
    });

12. 選擇所有不可用的表單元素 input:disabled

 $("button:eq(1)").click(function () {
        $("input:disabled").css("outline","3px solid red")
    });

13. 選擇選中的單選框和復選框 :checked

 $("button:eq(2)").click(function () {
        $(":checked").css("outline","3px solid red")
    });

14. 選擇選中的下拉串列項

  $("button:eq(3)").click(function () {
        $(":selected").css("color","red")
    });