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开始 |