jQuery选择器

1.基本选择器

• ID

$('#firstList').css('border','2px solid red');

• class

$('.item').css('border','2px solid red');

• 标签名选择器

$('li').css('background-color','green');

• 全局选择器

$('*').css('border','2px solid green');

• 组合选择器

$('li.item').css('border','2px solid red');

• 多个选择器

$('li,p').css('border','2px solid yellow');

2.层级选择器

• 选择器 选择器(后代)
• 选择器>选择器(子元素)
• 选择器+选择器(下一个兄弟)
• 选择器~选择器(后面所有兄弟元素)

3.筛选选择器

:前面所选中的是一个集和

• :first

$('#secondList li:first').css('border','2px solid pink');

• :last
• :eq(index) 从0开始
• :lt(index) <
• :gt(index) >
• :odd 奇数
• :even 偶数
• :not(index) 排除
• :header 标题标签
• :focus 过滤 获取焦点的元素
• :root (html元素)
• :target 锚点正在指向的元素

4.内容选择器

• :contains(text) 包含指定文本
• :has(selector) 包含满足条件的后代元素的元素
• :empty 没有内容也没有子元素
• :parent 与empty相反

5.可见性选择器

• :visible (可见元素)
• :hidden (不可见元素)

6.属性选择器

$("img[alt]").css('border','5px solid pink');

//^=以什么开头 $=以什么结尾 *=包含什么
$("img[alt != 'abc']").css('border','5px solid green');

$("img[alt][title]").css('border','5px solid blue');

7.子元素选择器

• :first-child

//选择一个 是所有兄弟元素里面第一个并且是li元素
$("li:first-child").css('border','2px solid red');

• :last-child

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

• :nth-child(index) 从1开始

//从1开始
$("li:nth-child(1)").css('border','2px solid green');

• :nth-last-child(index) 从后往前数

• :only-child

//没有兄弟元素的li
$("li:only-child").css('border','2px solid yellow');

• :first-of-type

//所有li兄弟元素里面的第一个
$("li:first-of-type").css('border','2px solid pink');

• :last-of-type
• :nth-of-type(index) 从1开始
• :nth-last-of-type(index)

8.表单选择器

• :input 所有的表单控件
• :text / :password / :radio / :checkbox / :file / :reset (根据input的type值)
• :submit 所有具有提交功能的按钮
• :button button元素 input:button

9.表单对象选择器

• :disabled
• :enabled
• :checked
• :selected

10.混淆选择器

• $.escapeSelector(selector) class和id中有特殊字符

jquery详细操作:jQuery API 3.2.0 中文版