jQuery 查找標簽

1 基本選擇器

2 基本篩選器

3 屬性選擇器

4 間接選擇

---

 

1 基本選擇器

//id選擇器：
$("#id")
//標簽選擇器：
$("tagName")
//class選擇器：
$(".className")
//配合使用：
$("div.c1")  // 找到有c1 class類的div標簽
//所有元素選擇器：
$("*")
//組合選擇器：
$("#id, .className, tagName")
//層級選擇器：
 //x和y可以為任意選擇器
   $("x y");// x的所有后代y（子子孫孫）
   $("x > y");// x的所有兒子y（兒子）
   $("x + y")// 找到所有緊挨在x后面的y
   $("x ~ y")// x之后所有的兄弟y

2、基本篩選器：

:first  // 第一個
:last  // 最后一個
:eq(index) // 索引等於index的那個元素
:even  // 匹配所有索引值為偶數的元素，從 0 開始計數
:odd  // 匹配所有索引值為奇數的元素，從 0 開始計數
:gt(index)// 匹配所有大於給定索引值的元素
:lt(index)// 匹配所有小於給定索引值的元素
:not(元素選擇器)// 移除所有滿足not條件的標簽
:has(元素選擇器)// 選取所有包含一個或多個標簽在其內的標簽(指的是從后代元素找

// 例子：
$("div:has(h1)")// 找到所有后代中有h1標簽的div標簽
$("div:has(.c1)")// 找到所有后代中有c1樣式類的div標簽
$("li:not(.c1)")// 找到所有不包含c1樣式類的li標簽
$("li:not(:has(a))")// 找到所有后代中不含a標簽的li標簽

3、屬性選擇器

[attribute]
[attribute=value]// 屬性等於
[attribute!=value]// 屬性不等於

// 示例
<input type="text">
<input type="password">
<input type="checkbox">
$("input[type='checkbox']");// 取到checkbox類型的input標簽
$("input[type!='text']");// 取到類型不是text的input標簽

4、間接選擇

//下一個元素
$("#id").next()// 找下一個兄弟標簽
$("#id").nextAll()// 找下所有兄弟標簽
$("#id").nextUntil("#i2")// 找下直到class=l4的兄弟標簽

//上一個元素
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")

//父親元素
$("#id").parent()
$("#id").parents()  // 查找當前元素的所有的父輩元素
$("#id").parentsUntil() // 查找當前元素的所有的父輩元素，直到遇到匹配的那個元//素為止。

//兒子和兄弟元素
$("#id").children();// 兒子們
$("#id").siblings();// 兄弟們

//查找元素：
$("#id").find("p")// 搜索后代所有與指定表達式匹配的元素。
$(".c1").children("p")// 搜索兒子與指定表達式匹配的元素。

//補充：
.first()// 獲取匹配的第一個元素
.last()// 獲取匹配的最后一個元素
.not()// 從匹配元素的集合中刪除與指定表達式匹配的元素
.has()// 保留包含特定后代的元素，去掉那些不含有指定后代的元素