javaweb/JQuery/src/select/filter.html at master · CPU-Code/javaweb · GitHub

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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>过滤选择器</title>
    <script src="../js/jquery-3.3.1.min.js"></script>

    <style type="text/css">
        div, span{
            width: 150px;
            height: 150px;
            margin: 20px;
            background: #44aa00;
            border: black 1px solid;
            float: left;
            font-size: 15px;
            font-family: Roman;
        }

        div .mini{
            width: 100px;
            height: 40px;
            background: gray;
            border: black 2px solid;
            font-family: Roman;
        }

        div .mini01{
            width: 100px;
            height: 30px;
            background: magenta;
            font-size: 10px;
            font-family: Roman;
        }
    </style>

    <!--
    1. 首元素选择器
        * 语法： :first 获得选择的元素中的第一个元素
    2. 尾元素选择器
        * 语法： :last 获得选择的元素中的最后一个元素
    3. 非元素选择器
        * 语法： :not(selector) 不包括指定内容的元素
    4. 偶数选择器
        * 语法： :even 偶数，从 0 开始计数
    5. 奇数选择器
        * 语法： :odd 奇数，从 0 开始计数
    6. 等于索引选择器
        * 语法： :eq(index) 指定索引元素
    7. 大于索引选择器
        * 语法： :gt(index) 大于指定索引元素
    8. 小于索引选择器
        * 语法： :lt(index) 小于指定索引元素
    9. 标题选择器
        * 语法： :header 获得标题（h1~h6）元素，固定写法
    -->

    <script type="text/javascript">
        $(function () {
            //改变第一个 div 元素的背景色为 粉色
            $("#b1").click(function () {
                $("div:first").css("backgroundColor", "pink");
            });

            //改变最后一个 div 元素的背景色为 绿色
            $("#b2").click(function () {
                $("div:last").css("backgroundColor", "green");
            });

            //改变class不为 one 的所有 div 元素的背景色为 红色
            $("#b3").click(function () {
                $("div:not(.one)").css("backgroundColor", "red");
            });

            //改变索引值为偶数的 div 元素的背景色为 蓝色
            $("#b4").click(function () {
                $("div:even").css("backgroundColor","blue");
            });
            //改变索引值为奇数的 div 元素的背景色为 橙色
            $("#b5").click(function () {
                $("div:odd").css("backgroundColor", "orange");
            });
            //改变索引值为大于 3 的 div 元素的背景色为 紫色
            $("#b6").click(function () {
                $("div:gt(3)").css("backgroundColor", "purple");
            });
            //改变索引值为等于 3 的 div 元素的背景色为 白色
            $("#b7").click(function () {
                $("div:eq(3)").css("backgroundColor", "white");
            });
            //改变索引值为小于 3 的 div 元素的背景色为 黑色
            $("#b8").click(function () {
                $("div:lt(3)").css("backgroundColor", "black");
            });
            //改变所有的标题元素的背景色为 红色
            $("#b9"). (function () {
                $(":header").css("backgroundColor", "red");
            });
        });
    </script>
</head>
<body>
    <input type="button" value="保存" class="mini" name="ok" >
    <input type="button" value="改变第一个 div 元素的背景色为 粉色" id="b1">
    <input type="button" value="改变最后一个 div 元素的背景色为 绿色" id="b2">
    <input type="button" value="改变class不为 one 的所有 div 元素的背景色为 红色" id="b3">
    <input type="button" value="改变索引值为偶数的 div 元素的背景色为 蓝色" id="b4">
    <input type="button" value="改变索引值为奇数的 div 元素的背景色为 橙色" id="b5">
    <input type="button" value="改变索引值为大于 3 的 div 元素的背景色为 紫色" id="b6">
    <input type="button" value="改变索引值为等于 3 的 div 元素的背景色为 白色" id="b7">
    <input type="button" value="改变索引值为小于 3 的 div 元素的背景色为 黑色" id="b8">
    <input type="button" value="改变所有的标题元素的背景色为 红色" id="b9">

    <h1>过滤选择器</h1>
    <h2>cpu_code</h2>

    <div id="one"> id = "one"</div>

    <div id="two" class="mini">
        id="two" class="mini"
        <div class="mini">class="mini"</div>
    </div>

    <div class="one">
        class="one"
        <div class="mini">class="mini"</div>
        <div class="mini01">class="mini01"</div>
    </div>

    <div class="two">
        class="two"
        <div class="mini">class="mini"</div>
        <div class="mini01">class="mini01"</div>
    </div>
</body>
</html>