jQuery选择器

选择器是jQuery的根基, 在jQuery中, 对事件处理, 遍历DOM和Ajax操作都依赖于选择器

jQuery选择器的优点:

  • 写法简洁
  • 完善的事件处理机制

一.基本选择器

基本选择器是jQuery中最常用的选择器, 也是最简单的选择器, 它通过元素的id, class 和标签名来查找DOM元素(注意: 在一个网页中id只能用一次, class允许重复)

选择器 描述 返回
$("#id") 根据id匹配一个元素 单个元素
$(".class") 根据class匹配多个元素 集合元素
$(“element”) 根据元素名匹配元素 集合元素
$("*") 匹配所有元素 集合元素
$(“selector1,…,selectorn”) 将每一个选择器匹配到的元素合并一起返回 集合元素

上述选择器直接放在 $("") 的引号之间

1.基本选择器示例

html部分:

One More Thing 👇
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<head>
<meta charset="UTF-8">
<title>index</title>
<script src="js/jquery-3.4.0.min.js"></script>
<style type="text/css">
div, span, p {
width: 140px;
height: 140px;
margin: 5px;
background: #aaa;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Verdana;
}
div.mini {
width: 55px;
height: 55px;
background-color: #aaa;
font-size: 12px;
}
div.hide {
display: none;
}
</style>
</head>
<body>
<input type="button" value="选择 id 为 one 的元素" id="btn1" />
<input type="button" value="选择 class 为 mini 的所有元素" id="btn2" />
<input type="button" value="选择 元素名是 div 的所有元素" id="btn3" />
<input type="button" value="选择 所有的元素" id="btn4" />
<input type="button" value="选择 所有的 span 元素和id为two的元素" id="btn5" />
<br><br>
<div class="one" id="one">
id 为 one,class 为 one 的div
<div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test">
id为two,class为one,title为test的div
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div style="display:none;" class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<div>
包含input的type为"hidden"的div<input type="hidden" size="8">
</div>
<span id="span">^^span元素^^</span>
</body>

JS部分:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//一定不要忘记引入jQuery库
$(function(){
$("#btn1").click(function(){
$("#one").css("background-color","#bfa");
});
$("#btn2").click(function(){
$(".mini").css("background-color","#bfa");
});
$("#btn3").click(function(){
$("div").css("background-color","#bfa");
});
$("#btn4").click(function(){
$("*").css("background-color","#bfa");
});
$("#btn5").click(function(){
$("span,#two").css("background-color","#bfa");
});
});

二.层次选择器

若想通过DOM元素之间的层次关系来获取特定的元素, 例如: 后代元素 子元素 相邻元素 兄弟元素等, 则需要用层次选择器.

选择器 描述 返回
$(“ancestor descendant”) 选取ancestor的所有descendant(后代)元素 集合元素
$(“parent > child”) 选取parent的所有child(子)元素 集合元素
$(“prev + next”) 选取紧接在prev元素后的下一个next元素 集合元素
$(“prev ~ siblings”) 选取prev元素后的所有siblings元素 集合元素

注意: $(“prev ~ siblings”)选择器只能选择#prev元素后的同辈元素; 而jQuery中的 siblings()方法与前后位置无关, 只要是同辈节点即可选取.

> + - ~ 前后都有一个空格

1.层次选择器示例

html部分:

One More Thing 👇
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<head>
<meta charset="UTF-8">
<title>index</title>
<script src="js/jquery-3.4.0.min.js"></script>
<style type="text/css">
div, span, p {
width: 140px;
height: 140px;
margin: 5px;
background: #aaa;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Verdana;
}
div.mini {
width: 55px;
height: 55px;
background-color: #aaa;
font-size: 12px;
}
div.hide {
display: none;
}
</style>
</head>
<body>
<input type="button" value="选择 body 内的所有 div 元素" id="btn1" />
<input type="button" value="在 body 内, 选择子元素是 div 的." id="btn2" />
<input type="button" value="选择 id 为 one 的下一个 div 元素" id="btn3" />
<input type="button" value="选择 id 为 two 的元素后面的所有 div 兄弟元素" id="btn4" />
<input type="button" value="选择 id 为 two 的元素所有 div 兄弟元素" id="btn5" />
<input type="button" value="选择 id 为 one 的下一个 span 元素" id="btn6" />
<input type="button" value="选择 id 为 two 的元素前边的所有的 div 兄弟元素" id="btn7" />
<br><br>
<div class="one" id="one">
id 为 one,class 为 one 的div
<div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test">
id为two,class为one,title为test的div
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div style="display:none;" class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<div>
包含input的type为"hidden"的div<input type="hidden" size="8">
</div>
<span id="span">^^span元素^^</span>
<span id="span">--span元素--</span>
</body>

JS部分:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
$(function(){
$("#btn1").click(function(){
$("body div").css("background-color","#bfa");
});
$("#btn2").click(function(){
$("body > div").css("background-color","#bfa");
});
$("#btn3").click(function(){
$("#one + div").css("background-color","#bfa");
});
$("#btn4").click(function(){
$("#two ~ div").css("background-color","#bfa");
});
$("#btn5").click(function(){
$("#two").siblings("div").css("background-color","#bfa");
});
$("#btn6").click(function(){
//下面的选择器选择的是与 #one 相邻的 span 元素
//若 span 与 #one 不相邻,则选择器无效
//$("#one + span").css("background-color","#bfa");
$("#one").nextAll("span:first").css("background-color","#bfa");
});
$("#btn7").click(function(){
$("#two").prevAll("div").css("background-color","#bfa");
});
});

三.过滤选择器

通过特定的规则来筛选出所需的DOM元素, 该选择器都以 “:” 开头

按不同过滤规则, 过滤选择器可分为: 基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器.

1.基本过滤选择器

选择器 描述 返回
:first 选取第一个元素 单个元素
:last 选取最后一个元素 集合元素
:not(selector) 去除所有与给定选择器匹配的元素 集合元素
:even 选取索引为偶数的所有元素, 索引从0开始 集合元素
:odd 选取索引为奇数的所有元素, 索引从0开始 集合元素
:eq(index) 选取索引等于index, 索引从0开始 集合元素
:gt(index) 选取索引大于index, 索引从0开始 集合元素
:lt(index) 选取索引小于index, 索引从0开始 集合元素
:header 选取所有的标题元素, 如: h1,h2等 集合元素
:animated 选取当前正在执行动画的所有元素 集合元素

示例: html部分:

One More Thing 👇
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<head>
<meta charset="UTF-8">
<title>index</title>
<script src="js/jquery-3.4.0.min.js"></script>
<style type="text/css">
div, span, p {
width: 140px;
height: 140px;
margin: 5px;
background: #aaa;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Verdana;
}
div.mini {
width: 55px;
height: 55px;
background-color: #aaa;
font-size: 12px;
}
div.hide {
display: none;
}
</style>
</head>
<body>
<input type="button" value="选择第一个 div 元素" id="btn1" />
<input type="button" value="选择最后一个 div 元素" id="btn2" />
<input type="button" value="选择class不为 one 的所有 div 元素" id="btn3" />
<input type="button" value="选择索引值为偶数的 div 元素" id="btn4" />
<input type="button" value="选择索引值为奇数的 div 元素" id="btn5" />
<input type="button" value="选择索引值为大于 3 的 div 元素" id="btn6" />
<input type="button" value="选择索引值为等于 3 的 div 元素" id="btn7" />
<input type="button" value="选择索引值为小于 3 的 div 元素" id="btn8" />
<input type="button" value="选择所有的标题元素" id="btn9" />
<input type="button" value="选择当前正在执行动画的所有元素" id="btn10" />
<input type="button" value="选择 id 为 two 的下一个 span 元素" id="btn11" />
<h3>基本选择器.</h3>
<br><br>
<div class="one" id="one">
id 为 one,class 为 one 的div
<div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test">
id为two,class为one,title为test的div
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div style="display:none;" class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<div>
包含input的type为"hidden"的div<input type="hidden" size="8">
</div>
<span id="span">^^span元素 111^^</span>
<span id="span">^^span元素 222^^</span>
<div id="mover">正在执行动画的div元素.</div>
</body>

JS部分:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
$(document).ready(function(){
//之后会说jQuery的动画
function anmateIt(){
$("#mover").slideToggle("slow", anmateIt);
}
anmateIt();
$("#btn1").click(function(){
$("div:first").css("background", "#bfa");
});
$("#btn2").click(function(){
$("div:last").css("background", "#bfa");
});
$("#btn3").click(function(){
$("div:not(.one)").css("background", "#bfa");
});
$("#btn4").click(function(){
$("div:even").css("background", "#bfa");
});
$("#btn5").click(function(){
$("div:odd").css("background", "#bfa");
});
$("#btn6").click(function(){
$("div:gt(3)").css("background", "#bfa");
});
$("#btn7").click(function(){
$("div:eq(3)").css("background", "#bfa");
});
$("#btn8").click(function(){
$("div:lt(3)").css("background", "#bfa");
});
$("#btn9").click(function(){
$(":header").css("background", "#bfa");
});
$("#btn10").click(function(){
$(":animated").css("background", "#bfa");
});
$("#btn11").click(function(){
$("#two").nextAll("span:first").css("background", "#bfa");
});
});

评论