JQuery的常用選擇器

 剛開始學JQuery寫的如有錯誤歡迎批評指正

JQuery擁有的選擇器可以讓我們更快更方便找到想要的元素,然后對相應的元素進行操作

簡單介紹一下一些常用的選擇器:

1.基本選擇器:

1. 標簽名選擇器: $("div")  匹配所有的div
2. id選擇器: $("#id")  匹配id="id"的元素
3. 類選擇器: $(".class")  匹配所有class="class"的元素
4. 分組選擇器: $("#id,.class,div") 匹配id="id"的元素、所有class="class"的元素和所有的div

2.層級選擇器:

1. $("div span")  匹配div下所有的span子元素
2. $("div>span")  匹配div下的span元素
3. $("div+span")  匹配div后面相鄰的span元素
4. $("div~span")  匹配div后面所有的span元素

 

層級函數

 

1. 獲取某個元素的所有兄弟元素:$("#d1").siblings("div");參數可以不寫,不寫代表所有的兄弟元素
2. 獲取某個元素的哥哥元素:$("#d1").prev("div");參數不寫是獲取相鄰的上一個元素,寫的話指定上一個元素類型
3. 獲取某個元素的所有哥哥元素:$("#d1").prevAll("div");
4. 獲取某個元素的弟弟元素:$("#d1").next("div");參數不寫是獲取相鄰的下一個元素,寫的話指定上一個元素類型
5. 獲取某個元素的所有弟弟元素:$("#d1").nextAll("div");

 

3.過濾選擇器:

1. $("div:first")  匹配第一個div
2. $("div:last")  匹配最后一個div
3. $("div:even")  匹配所有索引值為偶數數div(第一個div的索引值為0)
4. $("div:odd")  匹配所有索引值為奇數div
5. $("div:eq(n)")  匹配索引值為n的div
6. $("div:lt(n)")  匹配索引值小於n的div
7. $("div:gt(n)")  匹配索引值大於n的div
8. $("div:not(.one)")  匹配類名不為"one"的div

4.內容選擇器:

1. $("div:has(p)")  匹配包含p子元素的div元素
2. $("div:empty")  匹配空元素div(既不包含文本也不包含子元素)
3. $("div:parent")  匹配非空div元素
4. $("div:contains('aa')")  匹配含有文本 'aa' 的 div 元素

5.屬性選擇器:

1. $("div[id]") 匹配包含id屬性的 div元素
2. $("div[id='aa']")  匹配包含屬性id='aa' 的div元素
3. $("div[id!='aa']")  匹配id屬性不等於aa的div元素

6.子元素選擇器:

1. $("div:first-child")  匹配div 第一個子元素
2. $("div:last-child")  匹配div 最后一個子元素
3. $("div:nth-child(n)")  匹配div 第n個子元素

7.表單選擇器:

 

1. $(":input") 匹配所有input
2. $(":password")  匹配所有密碼框
3. $(":radio")  匹配所有單選
4. $(":checkbox")  匹配所有多選框
5. $(":check")  匹配所有單選,多選,下拉選
6. $(":input:check")  匹配所有單選,多選
7. $(":selected")  匹配所有下拉選