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");
    });
});

博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议

本文永久链接是：https://crainyday.gitee.io/jQuery1-1.html

相关文章

评论