JQuery选择器
JQuery选择器:原生 JS 获取元素方式很多,很杂,而且兼容性情况不一致,因此 jQuery 做了封装,使获取元素统一标准。
基础选择器:
1 | $('选择器') // 直接写css选择器,需加引号 |
| 名称 | 用法 | 描述 |
|---|---|---|
| ID选择器 | $(“#id”) | 获取指定的ID的元素 |
| 全选选择器 | $(‘*’) | 匹配所有元素 |
| 类选择器 | $(‘.class’) | 获取同一类class的元素 |
| 标签选择器 | $(‘div’) | 获取同一类标签的全有元素 |
| 并集选择器 | $(‘div,p,li’) | 选取多个元素 |
| 交集选择器 | $(‘li.current’) | 交集元素 |
层级选择器:后代选择器和子代选择器
| 名称 | 用法 | 描述 |
|---|---|---|
| 自带选择器 | $(‘ul>li’) | 使用>号获取亲儿子层级的元素;注:并不会获取孙子层级的元素 |
| 后代选择器 | $(‘ul li’) | 使用空格,代表后代选择器,获取ul下的所有li元素,包括孙子等 |
筛选选择器:选择满足条件进行筛选选择
| 语法 | 用法 | 描述 |
|---|---|---|
| :first | $(‘li:first’) | 获取第一个li元素 |
| :last | $(‘li:last’) | 获取最后一个li元素 |
| :eq(index) | $(‘li:eq(2)’) | 获取到的li元素中,选择索引号为2的元素,索引号index从0开始 |
| :odd | $(‘li:odd’) | 获取到li元素中,选择索引号为奇数的元素 |
| :even | $(‘li:even’) | 获取到的li元素中,选择索引号为偶数的元素 |
扩展:
| 语法 | 用法 | 说明 |
|---|---|---|
| parent() | $(‘li’).parent() | 查找父级 |
| children(selector) | $(‘ul’).children(‘li’) | 相当于$(‘ul>li’),最近一级 |
| find(selector) | $(‘ul’).find(“li”) | 相当于$(“ul li”),后代选择器 |
| siblings(selector) | $(‘.first’).siblings(“li”) | 查找兄弟节点,不包括本身 |
| nextAll([expr]) | $(‘.first’).nextAll() | 查找当前元素之后所有的同辈元素 |
| prevtAll([expr]) | $(‘.last’).prevtAll() | 查找当前元素之前所有的同辈元素 |
| hasClass(class) | $(‘div’).hasClass(‘protected’) | 检查当前的元素是否有某个特定的类 |
| eq(index) | $(‘li’).eq(2) | 相当于$(‘li:eq(2)’),index从0开始 |