jQuery入门（二）jQuery选择器
JQuery选择器
选择器：类似于 CSS 的选择器，可以帮助我们获取元素。例如：id 选择器、类选择器、元素选择器、属性选择器等等。 jQuery 中选择器的语法：$();
一、jQuery的选择器
（一）基本选择器
1.元素选择器 语法： $("元素的名称") 作用：根据元素名称获取元素对象们。
let divs = $("div");
2.id选择器 语法： $("#id的属性值") 作用：根据ID属性值获取元素对象。
let div1 = $("#div1");
3.类选择器 语法： $(".class的属性值") 作用：根据class属性值获取对象们。
let cls = $(".cls");
示例代码：
基本选择器 div1 div2 div3 （二）层级选择器
1. 后代选择器 $("A B"); A下的所有B(包括B的子级)。
let spans1 = $("div span");
2. 子选择器 $("A > B"); A下的所有B(不包括B的子级)。
let spans2 = $("div > span");
3. 兄弟选择器 $("A + B"); A相邻的下一个B。
let ps1 = $("div + p");
4. 兄弟选择器 $("A ~ B"); A相邻的所有B。
let ps2 = $("div ~ p");
示例代码：
层级选择器 sp1 sp1-1 sp1-2 sp2 div2 p1
p2
（三）属性选择器
1.属性名选择器 语法: $("元素[属性名]"); 作用:根据指定名称获取元素对象们。
let in1 = $("input[type]");
2.属性值选择器,语法 $("元素[属性名=属性值]") ;作用:根据制定属性名和属性值获取元素对象们。
let in2 = $("input[type='password']");
示例代码:
属性选择器 （四）过滤器选择器
1.首元素选择器 语法: $("A:first"); 作用 : 获得选择的元素中的第一个元素。
let div1 = $("div:first");
2.尾元素选择器 语法: $("A:last");作用 : 获得选择的元素中的最后一个元素。
let div4 = $("div:last");
3.非元素选择器 语法: $("A:not(B)");作用 : 不包括指定内容的元素。
let divs1 = $("div:not(#div2)");
4.偶数选择器 语法: $("A:even");作用:偶数 , 从0开始计数。
let divs2 = $("div:even");
5.奇数选择器 语法: $("A:odd");作用: 奇数 , 从0开始计数。
let divs3 = $("div:odd");
6.等于索引选择器 语法: $("A:eq(index)");作用 : 指定索引元素。
let div3 = $("div:eq(2)");
7.大于索引选择器 语法: $("A:gt(index)");作用 : 大于指定索引元素。
let divs4 = $("div:gt(1)");
// 8.小于索引选择器 语法: $("A:lt(index)");作用 : 小于指定索引元素。
let divs5 = $("div:lt(2)");
示例代码：
过滤器选择器 div1 div2 div3 div4 （五）表单属性选择器
1.可用元素选择器 语法： $("A:enabled"); 作用：获得可用元素
let ins1 = $("input:enabled");
2.不可用元素选择器 语法： $("A:disabled"); 作用：获得不可用元素
let ins2 = $("input:disabled");
3.单选/复选框被选中的元素 语法： $("A:checked"); 作用：获得单选复选框选中的元素
let ins3 = $("input:checked");
4.下拉框被选中的元素 语法： $("A:selected"); 作用：获得下拉框选中的元素
let select = $("select option:selected");
表单属性选择器
男 女
学习 工作
二、总结
选择器：类似于 CSS 的选择器，可以帮助我们获取元素。 jQuery 中选择器的语法：$();
- 基本选择器
- $("元素的名称");
- $("#id的属性值");
- $(".class的属性值");
- 层级选择器
- $("A B");
- $("A > B");
- 属性选择器
- $("A[属性名]");
- $("A[属性名=属性值]");
- 过滤器选择器
- $("A:even");
- $("A:odd");
- 表单属性选择器
- $("A:disabled");
- $("A:checked");
- $("A:selected");
上一篇：vue-router小结
下一篇：word为什么没有高级选项