jQuery
jQuery

jQuery 选择器

# jQuery 选择器

# 1. jQuery 基础选择器

基础选择器用于选择特定的 HTML 元素，常用的基础选择器包括：

选择器	说明
`*`	选取所有元素
`#id`	选取带有指定 ID 的元素
`.class`	选取所有带有指定类的元素
`element`	选取所有指定的元素

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 基础选择器示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function() {
            // 选择所有元素
            $("*").css("border", "1px solid red");

            // 选择带有指定 ID 的元素
            $("#myId").css("background-color", "yellow");

            // 选择所有带有指定类的元素
            $(".myClass").css("color", "blue");

            // 选择所有指定的元素
            $("p").css("font-weight", "bold");
        });
    </script>
</head>
<body>
    <div id="myId">ID 选择器</div>
    <p class="myClass">Class 选择器</p>
    <p>Element 选择器</p>
</body>
</html>

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

# 2. jQuery 层级选择器

层级选择器用于选择具有特定层级关系的元素。

选择器	说明
`parent > child`	选择所有属于父元素的直接子元素
`ancestor descendant`	选择所有属于指定祖先的后代元素
`prev + next`	选择前一个元素之后的相邻兄弟元素
`prev ~ siblings`	选择前一个元素之后的所有兄弟元素

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 层级选择器示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function() {
            // 选择所有属于父元素的直接子元素
            $("div > p").css("background-color", "yellow");

            // 选择所有属于指定祖先的后代元素
            $("div p").css("color", "blue");

            // 选择前一个元素之后的相邻兄弟元素
            $("h1 + p").css("font-weight", "bold");

            // 选择前一个元素之后的所有兄弟元素
            $("h1 ~ p").css("border", "1px solid red");
        });
    </script>
</head>
<body>
    <div>
        <p>直接子元素选择器</p>
        <p>后代元素选择器</p>
    </div>
    <h1>前一个元素</h1>
    <p>相邻兄弟元素选择器</p>
    <p>所有兄弟元素选择器</p>
</body>
</html>

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

# 3. 筛选选择器用于根据特定条件筛选元素。

选择器	说明
`:first`	选择第一个元素
`:last`	选择最后一个元素
`:even`	选择索引为偶数的元素
`:odd`	选择索引为奇数的元素
`:eq(index)`	选择索引等于 index 的元素
`:gt(index)`	选择索引大于 index 的元素
`:lt(index)`	选择索引小于 index 的元素

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 筛选选择器示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function() {
            // 选择第一个元素
            $("p:first").css("background-color", "yellow");

            // 选择最后一个元素
            $("p:last").css("background-color", "blue");

            // 选择索引为偶数的元素
            $("p:even").css("color", "green");

            // 选择索引为奇数的元素
            $("p:odd").css("color", "red");

            // 选择索引等于 1 的元素
            $("p:eq(1)").css("font-weight", "bold");

            // 选择索引大于 1 的元素
            $("p:gt(1)").css("border", "1px solid black");

            // 选择索引小于 1 的元素
            $("p:lt(1)").css("font-style", "italic");
        });
    </script>
</head>
<body>
    <p>第一个段落</p>
    <p>第二个段落</p>
    <p>第三个段落</p>
    <p>第四个段落</p>
</body>
</html>

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

# 4. jQuery 筛选方法（重点）

方法	说明
`filter(selector)`	筛选出与选择器匹配的元素
`not(selector)`	从匹配的元素中删除与选择器匹配的元素
`has(selector)`	保留包含选择器匹配元素的元素
`eq(index)`	选择匹配元素集合中索引值为 index 的元素
`first()`	选择匹配元素集合中的第一个元素
`last()`	选择匹配元素集合中的最后一个元素
`slice(start, end)`	选择匹配元素集合中从 start 到 end 之间的元素

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 筛选方法示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function() {
            // 筛选出与选择器匹配的元素
            $("p").filter(".special").css("background-color", "yellow");

            // 从匹配的元素中删除与选择器匹配的元素
            $("p").not(".special").css("color", "blue");

            // 保留包含选择器匹配元素的元素
            $("div").has("p.special").css("border", "1px solid red");

            // 选择匹配元素集合中索引值为 1 的元素
            $("p").eq(1).css("font-weight", "bold");

            // 选择匹配元素集合中的第一个元素
            $("p").first().css("font-style", "italic");

            // 选择匹配元素集合中的最后一个元素
            $("p").last().css("text-decoration", "underline");

            // 选择匹配元素集合中从索引值 1 到 3 之间的元素
            $("p").slice(1, 3).css("background-color", "green");
        });
    </script>
</head>
<body>
    <div>
        <p class="special">第一个段落</p>
        <p>第二个段落</p>
        <p class="special">第三个段落</p>
        <p>第四个段落</p>
    </div>
</body>
</html>

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

# 5. jQuery 里的排他思想

排他思想：当前元素设置样式，其余的兄弟元素清除样式。

示例：

$(this).css('color', 'red');
$(this).siblings().css('color', '');

1
2

# 6. 链式编程

在 jQuery 中，可以通过链式编程来连续调用多个方法，使代码更加简洁和易读。

示例：

$(this).css('color', 'red').siblings().css('color', '');

通过链式编程，可以在一行代码中完成多个操作，而无需每次都重新选择元素。

编辑此页

上次更新: 2024/12/28, 18:32:08

← jQuery 入门 jQuery 样式操作→