JQuery选择器
选择器：类似于 CSS 的选择器，可以帮助我们获取元素。例如：id 选择器、类选择器、元素选择器、属性选择器等等。 jQuery 中选择器的语法：$();
一、jQuery的选择器
（一）基本选择器
1.元素选择器 语法： $("元素的名称") 作用：根据元素名称获取元素对象们。
let divs = $("div");
2.id选择器 语法： $("#id的属性值") 作用：根据ID属性值获取元素对象。
let div1 = $("#div1");
3.类选择器 语法： $(".class的属性值") 作用：根据class属性值获取对象们。
let cls = $(".cls");
示例代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>基本选择器</title>
</head>
<body><div id="div1">div1</div><div class="cls">div2</div><div class="cls">div3</div>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>//1.元素选择器 $("元素的名称")let divs = $("div");//alert(divs.length);//2.id选择器 $("#id的属性值")let div1 = $("#div1");alert(div1);//3.类选择器 $(".class的属性值")let cls = $(".cls");//alert(cls.length);</script>
</html>（二）层级选择器
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");
示例代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>层级选择器</title>
</head>
<body><div><span>sp1<span>sp1-1</span><span>sp1-2</span></span><span>sp2</span></div><div>div2</div><p>p1</p><p>p2</p>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>// 1. 后代选择器 $("A B"); A下的所有B(包括B的子级)let spans1 = $("div span");// alert("后代选择器 个数:"+spans1.length);// 4个// 2. 子选择器 $("A > B"); A下的所有B(不包括B的子级)let spans2 = $("div > span");
// alert("子选择器 个数:"+spans2.length); //2个// 3. 兄弟选择器 $("A + B"); A相邻的下一个Blet ps1 = $("div + p");
// alert("兄弟选择器 个数:"+ps1.length);//1个
// alert(ps1.html());// 4. 兄弟选择器 $("A ~ B"); A相邻的所有Blet ps2 = $("div ~ p");alert("兄弟选择器 个数:"+ps2.length); //2个</script>
</html>（三）属性选择器
1.属性名选择器 语法: $("元素[属性名]"); 作用:根据指定名称获取元素对象们。
let in1 = $("input[type]");
2.属性值选择器,语法 $("元素[属性名=属性值]") ;作用:根据制定属性名和属性值获取元素对象们。
let in2 = $("input[type='password']");
示例代码:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>属性选择器</title>
</head>
<body><input type="text" value="text1"><input type="password" value="pwd1"><input type="password" value="pwd2">
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>//1.属性名选择器 $("元素[属性名]")let in1 = $("input[type]");alert(in1.length);//2.属性值选择器 $("元素[属性名=属性值]")let in2 = $("input[type='password']");alert(in2.length);</script>
</html>（四）过滤器选择器
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)");
示例代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>过滤器选择器</title>
</head>
<body><div>div1</div><div id="div2">div2</div><div>div3</div><div>div4</div>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>// 1.首元素选择器 $("A:first");let div1 = $("div:first");alert(div1.html());// 2.尾元素选择器 $("A:last");let div4 = $("div:last");//alert(div4.html());// 3.非元素选择器 $("A:not(B)");let divs1 = $("div:not(#div2)");
// alert(divs1.length);// 4.偶数选择器 $("A:even");let divs2 = $("div:even");
// alert(divs2.length);
// alert(divs2[0].innerHTML);//div1
// alert(divs2[1].innerHTML);//div3// 5.奇数选择器 $("A:odd");let divs3 = $("div:odd");
// alert(divs3.length);
// alert(divs3[0].innerHTML);//div2
// alert(divs3[1].innerHTML);//div4// 6.等于索引选择器 $("A:eq(index)");let div3 = $("div:eq(2)");// alert(div3.html());//div3// 7.大于索引选择器 $("A:gt(index)");let divs4 = $("div:gt(1)");
// alert(divs4.length);
// alert(divs4[0].innerHTML);//div3
// alert(divs4[1].innerHTML);//div4// 8.小于索引选择器 $("A:lt(index)");let divs5 = $("div:lt(2)");
// alert(divs5.length);
// alert(divs5[0].innerHTML);//div1
// alert(divs5[1].innerHTML);//div2</script>
</html>（五）表单属性选择器
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");
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表单属性选择器</title>
</head>
<body><input type="text" disabled><br /><input type="text" ><br /><input type="radio" name="gender" value="men" checked>男<input type="radio" name="gender" value="women" >女<br /><input type="checkbox" name="hobby" value="study" checked>学习<input type="checkbox" name="hobby" value="work" checked>工作<br /><select><option>---请选择---</option><option selected>本科</option> <!----><option>专科</option></select>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>// 1.可用元素选择器 $("A:enabled");let ins1 = $("input:enabled");alert(ins1.length);//5// 2.不可用元素选择器 $("A:disabled");let ins2 = $("input:disabled");//alert(ins2.length);//1// 3.单选/复选框被选中的元素 $("A:checked");let ins3 = $("input:checked");
// alert(ins3.length);//3
// alert(ins3[0].value);//man
// alert(ins3[1].value);//stydy
// alert(ins3[2].value);//work// 4.下拉框被选中的元素 $("A:selected");let select = $("select option:selected");// alert(select.html());//本科</script>
</html>二、总结
选择器：类似于 CSS 的选择器，可以帮助我们获取元素。 jQuery 中选择器的语法：$();
- 基本选择器
- $("元素的名称");
- $("#id的属性值");
- $(".class的属性值");
- 层级选择器
- $("A B");
- $("A > B");
- 属性选择器
- $("A[属性名]");
- $("A[属性名=属性值]");
- 过滤器选择器
- $("A:even");
- $("A:odd");
- 表单属性选择器
- $("A:disabled");
- $("A:checked");
- $("A:selected");
