发布于 

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 许可协议,转载请注明出处。