我是靠谱客的博主 单薄御姐,这篇文章主要介绍jQuery选择器——表单过滤器,现在分享给大家,希望可以做个参考。


实例:

复制代码
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
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>     <title></title>     <style>           #dv-2 {               width: 200px;               height: 230px;               margin: 5px;               background: #aaa;               border: #000 1px solid;               float: left;               font-size: 17px;                font-family: Arial;               font-family: Verdana;           }         </style>     <script src="Scripts/jquery-1.11.3.js"></script>     <script type="text/javascript">         $(function () {             //对表单内可用的input元素赋值操作         $("#Button2").on("click", function () {             $(":text:enabled").val("可用");         });             //对表单内不可用的input元素赋值操作         $("#Button3").click(function () {             $(":text:disabled").val("不可用");         });             //计算有多少个多选框被选中,并显示在div中         $(":checkbox").change(function () {                          var cher=  $(":checkbox:checked").length               $("#dv-2").text("有"+cher+"个多选框被选中了");                     });             //在div中显示选择的下拉框中的选项         $("select").change(function () {                            var sele = "";                 $("select option:selected").each(function (index, docxml) {                  sele += $(docxml).text();                  $(".one").html ("<p>你选中的人是" + sele + ",</p>");                                               })          });         });     </script>  <meta charset="utf-8" /> </head> <body>     <div>              <p>表单对象属性过滤选择器</p><br />             <input id="Button1" type="button" value="重置所有表单元素" /><br />             <input id="Button2" type="button" value="对表单内可用的input元素赋值操作" />             <input id="Button3" type="button" value="对表单内不可用的input元素赋值操作" /><br />             可用元素:<input id="Text1" type="text" value="可用文本框" /><br />             不可用元素:<input id="Text2" type="text" value="不可用文本框" disabled="disabled" /><br />             可用元素:<input id="Text3" type="text" value="可用文本框" /><br />             不可用元素:<input id="Text4" type="text" value="不可用文本框"  disabled="disabled"/> <br />             多选框:             <div >             <table>                 <tr>                     <td><div id="dv-2"></div></td>                     <td>                         <input id="Checkbox1" type="checkbox" value="ADC" />ADC                         <input id="Checkbox2" type="checkbox"  value="辅助"/>辅助                         <input id="Checkbox3" type="checkbox"  value="法师"/>法师                         <input id="Checkbox4" type="checkbox"  value="打野"/>打野                         <input id="Checkbox5" type="checkbox"  value="战士"/>战士                         <br />                         下拉列表:<br />                         <select id="Select1" multziple style="max-height:100px;">                             <option>女警</option>                             <option>金克斯</option>                             <option>E2</option>                             <option>奥巴马</option>                             <option>飞机</option>                             <option>寒冰</option>                         </select><br />                         下拉列表辅助:<br />                         <select id="Select2">                             <option>机器人</option>                             <option>机器人1</option>                             <option>机器人2</option>                             <option>机器人3</option>                             <option>机器人4</option>                                                    </select><br />                     </td>                 </tr>                 <tr>                     <td><div id="dv-2" class="one"></div></td>                     <td></td>                 </tr>             </table>             </div>         </form>     </div> </body> </html>

最后

以上就是单薄御姐最近收集整理的关于jQuery选择器——表单过滤器的全部内容,更多相关jQuery选择器——表单过滤器内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(109)

评论列表共有 0 条评论

立即
投稿
返回
顶部