javaweb/JQuery/src/select/Basis.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
<!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>

    <!--
    1. 标签选择器（元素选择器）
        * 语法： $("html标签名") 获得所有匹配标签名称的元素
    2. id选择器
        * 语法： $("#id的属性值") 获得与指定id属性值匹配的元素
    3. 类选择器
        * 语法： $(".class的属性值") 获得与指定的class属性值匹配的元素
    4. 并集选择器：
        * 语法： $("选择器1,选择器2....") 获取多个选择器选中的所有元素
	-->

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

        div .mini{
            width: 100px;
            height: 40px;
            background: #AA11FF;
            border: #000000 2px solid;
            font-size: 12px;
            font-family:Roman;
        }

        div .mini01{
            width: 50px;
            height: 50px;
            background: #11AAFF;
            border: #000000 3px solid;
            font-size: 10px;
            font-family:Roman;
        }

    </style>

    <script type="text/javascript">
        $(function () {
            // 改变 id 为 one 的元素的背景色为 白色
            $("#b1").click(function () {
                $("#one").css("backgroundColor","white");
            });

            //改变元素名为 <div> 的所有元素的背景色为 蓝色
            $("b2").click(function () {
                $("div").css("backgroundColor", "blue");
            });

            //改变 class 为 mini id = two 的所有元素的背景色为 红色
            $("#b3").click(function () {
                $(".mini, #two").css("backgroundColor","red");
            });

            //改变所有的<span>元素和 mini01 的元素的背景色为粉色
            $("#b4").click(function () {
                $(".mini01, span").css("backgroundColor", "pink");
            })

        });
    </script>
</head>
<body>
    <input type="button" value="保存 class = mini " class="mini" name="ok" />
    <input type="button" value="改变 id 为 one 的元素的背景色为 白色" id="b1" >
    <input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 蓝色"  id="b2"/>
    <input type="button" value=" 改变 class 为 mini id = two 的所有元素的背景色为 红色"  id="b3"/>
    <input type="button" value=" 改变所有的<span>元素和 mini01 的元素的背景色为粉色"  id="b4"/>

    <h1>基本选择器</h1>
    <h2>cpu_code</h2>

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

    <div id="two" class="mini01">
        id = two   class = mini01
        <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="one">
        class = one
        <div class="mini">class = mini</div>
        <div class="mini">class = mini</div>
    </div>

    <spon class="spanone">class为spanone的span元素</spon>

    <span class="mini">class为mini的span元素</span>

    <input type="text" value="text_cpu" id="username" name="username">
</body>
</html>