发布于 

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

本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议,转载请注明出处。

唯獨少了個字.