javaweb/JQuery/src/select/Form.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
137
138
139
140
141
142
<!DOCTYPE html>
<html lang="en">
<head>
    <meta 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: #dddd14;
            border: black 1px solid;
            float: left;
            font-size: 15px;
            font-family: Roman;
        }

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

        div .mini01{
            width: 100px;
            height: 30px;
            background: #da9310;
            border-bottom: black 3px solid;
            font-size: 10px;
            font-family: Roman;
        }

        #job{
            margin: 30px;
        }

        #education{
            margin-top: 70px;
        }
    </style>

    <!--
    1. 可用元素选择器
        * 语法： :enabled 获得可用元素
    2. 不可用元素选择器
        * 语法： :disabled 获得不可用元素
    3. 选中选择器
        * 语法： :checked 获得单选/复选框选中的元素
    4. 选中选择器
        * 语法： :selected 获得下拉框选中的元素
    -->
    <script type="text/javascript">
        $(function () {
            //利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值
            $("#b1").click(function () {
                $("input[type='text']:enabled").val("可用元素的值");
            });

            //利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值
            $("#b2").click(function () {
                $("input[type='text']:disabled").val("不可用元素的值");
            });

            //利用 jQuery 对象的 length 属性获取复选框选中的个数
            $("#b3").click(function () {
                alert($("input[type='checkbox']:checked").length);
            });

            //利用 jQuery 对象的 length 属性获取下拉框选中的个数
            $("#b4").click(function () {
                alert($("#job > option:selected").length);
            });
        });
    </script>
</head>
<body>
    <input type="button" value="保存" class="mini" name="ok">
    <input type="button" value="利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值" id="b1">
    <input type="button" value="利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值" id="b2">
    <input type="button" value="利用 jQuery 对象的 length 属性获取复选框选中的个数" id="b3">
    <input type="button" value="利用 jQuery 对象的 length 属性获取下拉框选中的个数" id="b4">

    <br><br>

    <input type="text" value="不可用值1" disabled="disabled">
    <input type="text" value="可用值1">
    <input type="text" value="不可用值2" disabled="disabled">
    <input type="text" value="可用值2">

    <br><br>

    <input type="checkbox" name="cpu_code" value="美容"> 美容
    <input type="checkbox" name="cpu_code" value="IT">IT
    <input type="checkbox" name="cpu_code" value="金融">金融
    <input type="checkbox" name="cpu_code" value="管理">管理

    <br><br>

    <input type="radio" name="sex" value="男">男
    <input type="radio" name="sex" value="女">女

    <br><br>

    <select name="job" id="job" multiple="multiple" size="4">
        <option>程序员</option>
        <option>中级程序员</option>
        <option>高级程序员</option>
        <option>系统分析师</option>
    </select>

    <select name="education" id="education">
        <option>大专</option>
        <option>本科</option>
        <option>硕士</option>
        <option>博士</option>
    </select>

    <br>

    <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>