jQuery入门（二）jQuery选择器

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>