javaweb/JQuery/src/select/property.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
<!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: 100px;
            margin: 20px;
            background: #99aa11;
            border: #000000 1px solid;
            float: left;
            font-size: 15px;
            font-family: Roman;
        }

        div .mini{
            width: 100px;
            height: 50px;
            background: #11aa99;
            border: #000000 2px solid;
            font-size: 13px;
            font-family: Roman;
        }

        div .mini01{
            width: 150px;
            height: 40px;
            background: #6611dd;
            border: black 3px solid;
            font-size: 10px;
            font-family: Roman;
        }

        div .visible{
            display:none;
        }
    </style>

    <!--
    1. 属性名称选择器
        * 语法： $("A[属性名]") 包含指定属性的选择器
    2. 属性选择器
        * 语法： $("A[属性名='值']") 包含指定属性等于指定值的选择器
    3. 复合属性选择器
        * 语法： $("A[属性名='值'][]...") 包含多个属性条件的选择器
	-->

    <script type="text/javascript">
        $(function () {
            //含有属性title 的div元素背景色为粉色
            $("#b1").click(function () {
                $("div[title]").css("backgroundColor","pink");
            });

            //属性title值等于test的div元素背景色为蓝色
            $("#b2").click(function () {
                $("div[title='test']").css("backgroundColor","blue");
            });

            //属性title值不等于test的div元素(没有属性title的也将被选中)背景色为黄色
            $("#b3").click(function () {
                $("div[title!='test']").css("backgroundColor","yellow");
            });

            //属性title值 以te开始 的div元素背景色为绿色
            $("#b4").click(function () {
                $("div[title^='te']").css("backgroundColor", "green");
            });

            //属性title值 以est结束 的div元素背景色为橙色
            $("#b5").click(function () {
                $("div[title$=est]").css("backgroundColor", "orange");
            });
            //属性title值 含有es的div元素背景色为紫色
            $("#b6").click(function () {
                $("div[title*=es]").css("backgroundColor", "purple");
            });

            //选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素背景色为白色
            $("#b7").click(function () {
                $("div[id][title*=es]").css("backgroundColor","white");
            });

        });
    </script>
</head>
<body>
    <input type="button" value="保存 class = mini " class="mini" name="ok">
    <input type="button" value="含有属性title 的div元素背景色为粉色" id="b1">
    <input type="button" value="属性title值等于test的div元素背景色为蓝色" id="b2">
    <input type="button" value="属性title值不等于test的div元素(没有属性title的也将被选中)背景色为黄色" id="b3">
    <input type="button" value="属性title值 以te开始 的div元素背景色为绿色" id="b4">
    <input type="button" value="属性title值 以est结束 的div元素背景色为橙色" id="b5">
    <input type="button" value="属性title值 含有es的div元素背景色为紫色" id="b6">
    <input type="button" value="选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素背景色为白色" id="b7">

    <h1>层级选择器</h1>
    <h2>cpu_code</h2>

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

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

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

    <div class="one" title="test02">
        div class="one" title="test02"
        <div class="mini">class="mini"</div>
        <div class="mini" style="margin-top:0px;">class="mini"</div>
    </div>

    <div class="visible">class="visible"</div>

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

    <div id="mover">id="mover"</div>

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