05- jQuery 基本选择器&层次选择器
2017-08-31 本文已影响0人
轻思维
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)代替
