jQuery 基本選擇器&層次選擇器
作者：曾慶林
jQuery選擇器的優勢
- 寫法簡單
- 支持CSS1至CSS3選擇器
- 完善的處理機制
CSS選擇器回顧
| 選擇器 | 語法 |
|---|---|
| ID選擇器 | #ID{CSS規則} |
| 類選擇器 | .className{CSS規則} |
| 分組選擇器 | E1,E2,E3{CSS規則} |
| 包含選擇器 | E F{CSS規則} |
| 通配符選擇器 | *{CSS規則} |
jQuery選擇器的分類
- 基本選擇器
- 層次選擇器
- 過濾選擇器
- 基本過濾選擇器
- 內容過濾選擇器
- 可見性過濾選擇器
- 屬性過濾選擇器
- 子元素過濾選擇器
- 表單對象屬性過濾選擇器
- 表單選擇器
jQuery基本選擇器
| 選擇器 1 | 描述 | 返回 | 示例 |
|---|---|---|---|
| #id | 根據指定的id匹配元素 | 單個元素 | $(“#hel”)選擇id=hel的元素 |
| .class | 根據類匹配元素 | 集合元素 | $(“.hel”)選擇class=hel的元素 |
| Element | 根據元素名匹配元素 | 集合元素 | $(“div”)選擇所有的div元素 |
| * | 匹配所有元素 | 集合元素 | $(“*”)選擇所有元素 |
| E1,E2,E3 | 分組匹配元素 | 集合元素 | $(“div,span,.hotclass”)選擇所有div，span,和class為hotcalss的元素 |
層次選中器
| 選擇器 | 描述 | 返回值 | 示例 |
|---|---|---|---|
| $("E1 E2") | 選擇E1下所有E2 | 集合元素 | $"div span")選擇div下所有span |
| $("E1> E2") | 選擇E1下的子E2,不包含E2下滿足的元素 | 集合元素 | $("div > span”)選擇div下的span元素，不包含span下的span元素 |
| $("E1+ E2") | 選擇E1后緊相鄰的E2 | 集合元素 | $(".one + div")選擇class=one的下一個div元素 |
| $("E1~ E2") | 選擇E1之后的所有E2 | 集合元素 | $("#one ~ div")選擇id為one后的所有div元素 |
補充說明：
$("E1 + E2")可以用$(E1).next(E2)代替
$("E1 ~ E2")可以用$(E1).nextAll(E2)代替
