jQuery

本文列举了 jQuery 所有的选择器类型.

基本选择器

#id id 选择器

// id 选择器
$('#demo').css('border', '2px solid green')

element 元素名选择器

// 元素名选择器
$('li').css('border', '2px solid orange')

.class class 选择器

// class 选择器
$('.box2').css('border', '2px solid red')

* 通配符选择器

// 通配符选择器
$('*').css('border', '2px solid pink')

selector1, selector2, selectorN 分组选择器

// 分组选择器
$('#demo, .box2, ul').css('border', '2px solid blue')

层级选择器

ancestor descendant 后代选择器

// 后代选择器
$('ul li').css('border', '2px solid yellow')

parent > child 直接子元素选择器

// 直接子元素选择器
$('ul > li').css('border', '2px solid purple')

prev + next 相邻兄弟选择器

// 相邻兄弟选择器
$('#demo + li').css('border', '2px solid green')

prev ~ sibings 后续兄弟选择器

// 后续兄弟选择器
$('#demo ~ li').css('border', '2px solid red')

基本筛选器

:first 选择指定的元素是同级元素中的第一个的元素

// 选择指定的元素是同级元素中的第一个的元素
$('li:first').css('border', '2px solid red')

:not(selector) 在指定的元素范围中排除元素

// 在指定的元素范围中排除元素
$('li:not(.box2)').css('border', '2px solid green')

:even 选择指定的元素范围中为奇数行的元素

// 选择指定的元素范围中为奇数行的元素
$('li:even').css('border', '2px solid yellow')

:odd 选择指定的元素范围中为偶数行的元素

// 选择指定的元素范围中为偶数行的元素
$('li:odd').css('border', '2px solid blue')

:eq(index) 选择指定的元素范围中给定索引的元素（索引从 0 开始）

// 选择指定的元素范围中指定索引的元素（索引从0开始）
$('li:eq(0)').css('border', '2px solid purple')

:gt(index) 选择指定的元素范围中大于给定索引值的元素

// 选择指定的元素范围中大于给定索引值的元素
$('li:gt(0)').css({ border: '2px solid orange', 'background-color': 'pink' })

:lt(index) 选择指定的元素范围中小于给定索引值的元素

// 选择指定的元素范围中大于给定索引值的元素
$('li:lt(2)').css('border', '2px solid green')

:last 选择指定的元素范围中的最后一个元素

// 选择指定的元素范围中的最后一个元素
$('li:last').css('border', '2px solid orange')

:lang() 选择元素的属性 lang 为给定值的元素

// 选择元素的属性 lang 为给定值的元素
$('li:lang(en)').css('border', '2px solid pink')

:header 选择所有的标题元素（h1 ~ h6）

// 选择所有的标题元素（h1 ~ h6）
$(':header').css({
 border: '2px solid orange',
 'background-color': 'pink'
})

:focus 过滤出当前获取焦点的元素

:root 选择该文档的根元素，即元素

// 选择根元素
$(':root').css('background-color', 'pink')

:target 过滤出锚点正在指向的元素

$(':target').css('border', '2px solid red')

:animated 获取正在执行动画的元素

内容选择器

:contains(text) 获取包含指定内容的元素

$("li:contains('2')").css('border', '2px solid orange')

:has(selector) 获取后代元素拥有满足指定的选择器条件的元素

$("li:has('.box')").css('border', '2px solid yellow')

:empty 获取既没有内容，又没有子元素的元素

$('li:empty').css('border', '2px solid orange')

:parent 获取要么有内容，要么有子元素的元素（跟 empty 相反）

$('li:parent').css('border', '2px solid orange')

可见性选择器

:visible 选择所有可见的元素

$(':visible').css('border', '2px solid orange')

:hidden 选择所有不可见的元素

$(':hidden').css('border', '2px solid orange')

属性选择器

[attr] 选择包含方括号中属性的元素

$('li[name]').css('border', '2px solid green')

[attr='value'] 选择属性值为指定的值的元素

$("li[name='test']").css('border', '2px solid green')

[attr!='value'] 选择属性值不为指定的值的元素

$("li[name!='test']").css('border', '2px solid green')

[attr^='v'] 选择属性值为指定的字符开头的元素

$("li[name^='t']").css('border', '2px solid green')

[attr$='e'] 选择属性值为指定的字符结尾的元素

$("li[name$='t']").css('border', '2px solid green')

[attr*='l'] 选择属性值中包含指定的字符的元素

$("li[name*='t']").css('border', '2px solid green')

子元素选择器

:first-child 选择是所有兄弟元素中的第一个的元素

$('li:first-child').css('border', '2px solid red')

:last-child 选择是所有兄弟元素中的最后一个的元素（与 first-child 相反）

$('li:last-child').css('border', '2px solid orange')

:nth-child(n) 选择是所用兄弟元素中第 n 个的元素（从前往后数）

$('li:nth-child(3)').css('border', '2px solid pink')

:nth-last-child(n) 选择是所有兄弟元素中倒数第 n 个的元素（从后往前数，跟 nth-child 相反）

$('li:nth-last-child(3)').css('border', '2px solid yellow')

:only-child 选择没有兄弟元素的元素

$('li:only-child').css('border', '2px solid green')

:first-of-type 选择所有兄弟元素里面相同标签的第一个元素

$('li:first-of-type').css('border', '2px solid blue')

:last-of-type 选择所有兄弟元素里面相同标签的最后一个元素

$('li:last-of-type').css('background-color', 'blue')

:nth-of-type(n) 选择所有兄弟元素里面相同标签的第 n 个元素（从前往后数）

$('li:nth-of-type(3)').css('border', '2px solid red')

:nth-last-child(n) 选择所有兄弟元素里面相同标签的倒数第 n 个元素（从后往前数）

$('li:nth-last-of-type(3)').css('background-color', 'green')

:only-of-type 选择所有兄弟元素标签中没有相同标签的元素

$('li:only-of-type').css('border', '2px solid orange')

表单选择器

:input 选择所有的表单元素（input select testarea button ......）

$(':input').width(40).height(40).css('border', '1px solid red')

:text 选择 type 属性为 text 的 input 元素

$(':text').css('border', '1px solid green')

:password 选择 type 属性为 password 的 input 元素

$(':text').css('border', '1px solid green')

:radio 选择 type 属性为 radio 的 input 元素

$(':radio').width(100).height(100)

:checkbox 选择 type 属性为 checkbox 的 input 元素

$(':checkbox').width(100).height(100)

:file 选择 type 属性为 file 的 input 元素

$(':file').css('border', '2px solid orange')

:submit 选择具有提交功能的按钮

$(':submit').css('border', '2px solid orange')

:reset 选择具有重置功能的按钮

$(':reset').css('border', '2px solid red')

:button 选择 botton 标签、<input type='button'>

$(':button').css('border', '2px solid red')

表单对象选择器

:disabled 选择所有禁用的表单元素

$(':disabled').css('background-color', 'orange')

:enabled 选择所有启用的表单元素

$(':enabled').css('background-color', 'orange')

:checked 选择默认选中的表单元素

$(':checked').width(100).height(100)

:selected 选中默认选中的 option 元素

$(':selected').css('border', '2px solid orange')

混淆选择器

$.escapeSelecotr(selector) 用于选择 className 或 idName 是有特殊符号的

$('#' + $.escapeSelector('#item')).css('background-color', 'green')

# jQuery

# 基本选择器

# 层级选择器

# 基本筛选器

# 内容选择器

# 可见性选择器

# 属性选择器

# 子元素选择器

# 表单选择器

# 表单对象选择器

# 混淆选择器