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)代替
网友评论