一、基本选择器
1、标签选择器
语法:
$("html标签名"),获取所有匹配标签名称的元素
2、id选择器
$("#id值"),获取与指定id匹配的元素
3、类选择器
$(".class的属性值"),获取所有匹配.class的元素
4、代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-3.4.1.min.js"></script>
</head>
<body>
<div id="div1" class="d">大哥哥。。。</div>
<div id="div2" class="d">二哥哥。。。</div>
<input type="button" value="点我呀" id="btn">
</body>
<script type="text/javascript">
//1、标签选择器:$("html标签名"),获取所有匹配标签名称的元素
var $divs = $("div");
//2、id选择器:$("#id值"),获取与指定id匹配的元素
var $div1 = $("#div1,#div2,#btn");
//3、类选择器:$(".class的属性值"),获取所有匹配.class的元素
var $ds = $(".d");
</script>
</html>
二、层级选择器
1、后代选择器
语法:
示例:
$("div span");
图解:
2、子选择器
语法:
示例:
$("div > span");
图解:
3、代码演示
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-3.4.1.min.js"></script>
</head>
<body>
<div>
<span>
span1
<span>span1.1</span>
</span>
<span>span2</span>
<span>span3</span>
=================================<br/>
</div>
</body>
<script type="text/javascript">
//1、后代选择器:选取所有span,包含span1.1
var $spans = $("div span");
for (var i = 0; i < $spans.length; i++) {
document.write("第"+(i+1)+"个元素:<br/>");
document.write($spans[i].innerHTML+"<br/>")
}
document.write("===============<br/>");
//2、子选择器:选取子span,不包含span1.1
var $spans1 = $("div > span");
for (var j = 0; j < $spans1.length; j++) {
document.write("第"+(j+1)+"个元素:<br/>");
document.write($spans1[j].innerHTML+"<br/>");
}
</script>
</html>
运行结果:
三、属性选择器
支持正则表达式;
1、属性名称选择器
语法:
示例:
$("span[class]");
2、属性选择器
语法:
示例:
$("span[class='s']");
3、复合属性选择器
语法:
示例:
$("span[class][content='zb']");
4、代码演示
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-3.4.1.min.js"></script>
</head>
<body>
<div>
<span id="s1" class="s1" content="zb">
span1
<span id="s11" class="s">span1.1</span>
</span>
<span class="s2" content="zb">span2</span>
<span id="s" content="zb">span3</span>
<br/>
</div>
</body>
<script type="text/javascript">
//1、属性名称选择器
document.write("============所有class===========<br/>");
var $spans1 = $("span[class]");
for (var i = 0; i < $spans1.length; i++) {
document.write("第"+(i+1)+"个元素:<br/>");
document.write($spans1[i].innerHTML+"<br/>");
}
//2、属性选择器
document.write("============所有值为s的class===========<br/>");
var $spans2 = $("span[class='s']");
for (var j = 0; j < $spans2.length; j++) {
document.write("第"+(j+1)+"个元素:<br/>");
document.write($spans2[j].innerHTML+"<br/>");
}
//3、符合属性选择器
document.write("============所有带有content属性且值为zb的class===========<br/>");
var $spans3 = $("span[class][content='zb']");
for (var k = 0; k < $spans3.length; k++) {
document.write("第"+(k+1)+"个元素:<br/>");
document.write($spans3[k].innerHTML+"<br/>");
}
</script>
</html>
运行结果:
四、过滤选择器
代码演示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-3.4.1.min.js"></script>
</head>
<body>
<div>
<h1>一级标题</h1>
<h2>二级标题</h2>
<span>span1</span>
<span>span2</span>
<span>span3</span>
<span id="s4">span4</span>
<span>span5</span>
<span>span6</span>
<br/>
</div>
</body>
<script type="text/javascript">
//1、首元素选择器
document.write("======首元素选择器======<br/>");
var $div1 = $("div > span:first");
document.write($div1.text()+"<br/>");
//2、尾元素选择器
document.write("======尾元素选择器======<br/>");
var $div2 = $("div > span:last");
document.write($div2.text()+"<br/>");
//3、非元素选择器
document.write("======非元素选择器======<br/>");
var $div3 = $("div > span:not(#s4)");
for (var i = 0; i < $div3.length; i++) {
document.write($div3.get(i).innerHTML+"<br/>");
}
//4、奇数选择器
document.write("======偶数选择器:索引值======<br/>");
var $div4 = $("div > span:even");
for (var j = 0; j < $div4.length; j++) {
document.write($div4.get(j).innerHTML+"<br/>");
}
//5、偶数选择器
document.write("======奇数选择器:索引值======<br/>");
var $div5 = $("div > span:odd");
for (var k = 0; k < $div5.length; k++) {
document.write($div5.get(k).innerHTML+"<br/>");
}
//6、等于索引选择器
document.write("======等于索引选择器======<br/>");
var $div6 = $("div > span:eq(0)");
document.write($div6.text()+"<br/>");
//7、大于索引选择器
document.write("======大于索引选择器======<br/>");
var $div7 = $("div > span:gt(3)");
for (var p = 0; p < $div7.length; p++) {
document.write($div7.get(p).innerHTML+"<br/>");
}
//8、小于索引选择器
document.write("======小于索引选择器======<br/>");
var $div8 = $("div > span:lt(3)");
for (var u = 0; u < $div8.length; u++) {
document.write($div8.get(u).innerHTML+"<br/>");
}
//9、标题选择器
document.write("======标题选择器======<br/>");
var $header = $(":header");
$header.text("统一设置内容");
</script>
</html>
运行结果:
五、表单过滤选择器
代码演示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-3.4.1.min.js"></script>
</head>
<body>
<div>
<label>
<input type="text" placeholder="输入框1,可用"/>
<input type="text" placeholder="输入框2,不可用" disabled="disabled"/>
<input type="text" placeholder="输入框3,不可用" disabled="disabled"/>
<input type="text" placeholder="输入框4,可用"/>
爱好(多选):<br />
运动<input type="checkbox" name="radio" value="运动"/>
读书<input type="checkbox" name="radio" value="读书"/>
Java<input type="checkbox" name="radio" value="Java"/>
<br />
地区:<br />
<select>
<option value ="0">--请选择--</option>
<option value ="1">北京</option>
<option value ="2">上海</option>
<option value ="3">杭州</option>
</select>
<br />
<input id="hobby" type="button" value="爱好">
<br />
<input id="place" type="button" value="地区">
</label>
<br/>=======================================<br/>
</div>
</body>
<script type="text/javascript">
//1、可用元素选择器
document.write("===可用元素选择器===<br/>");
var $inputs1 = $("input:enabled");
document.write("可用元素有"+$inputs1.length+"个<br/>");
//2、不可用元素选择器
document.write("===不可用元素选择器===<br/>");
var $inputs2 = $("input:disabled");
document.write("不可用元素"+$inputs2.length+"个<br/>");
//3、选中选择器-单/多选
$("#hobby").click(function () {
var $inputs3 = $("input:checked");
alert($inputs3.length);
})
//4、选中选择器-下拉框
$("#place").click(function () {
var $inputs4 = $("option:selected");
alert($inputs4.text());
})
</script>
</html>
运行结果: