【代码片段】jQuery测试表单选择器 

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>第2章示例8</title>
 6 <style type="text/css">
 7     body { width:760px; }                                                                
 8     label,textarea,select { display:block; }
 9     textarea { width:600px; }
10     div button { font:bold 16px/1 Arial,Helvetica,sans-serif; margin:1px 3px; padding:2px 0; cursor:pointer; width:160px; }
11 </style>
12 <script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
13 <script type="text/javascript">
14     $(document).ready(function(){
15         $("#btn1").click(function(){alert("表单内<input>、<textarea>、<select>、<button>共有："+$("form :input").length+"个");});    
16         $("#btn2").click(function(){alert("<input type='text'>有："+$(":text").length+"个");});
17         $("#btn3").click(function(){alert("<input type='password'>有："+$(":password").length+"个");});
18         $("#btn4").click(function(){alert("<input type='radio'>有："+$(":radio").length+"个");});
19         $("#btn5").click(function(){alert("<input type='checkbox'>有："+$(":checkbox").length+"个");});    
20         $("#btn6").click(function(){alert("<input type='image'>有："+$(":image").length+"个");});
21         $("#btn7").click(function(){alert("<input type='file'>有："+$(":file").length+"个");});
22         $("#btn8").click(function(){alert("<input type='hidden'>有："+$("input:hidden").length+"个");});    
23         $("#btn9").click(function(){alert("表单内<input type='button'>和<button>共有："+$("form :button").length+"个");});    
24         $("#btn10").click(function(){alert("表单内<input type='reset'>和<button type='reset'>共有："+$("form :reset").length+"个");});
25         $("#btn11").click(function(){alert("表单内<input type='submit'>和<button type='submit'>共有："+$("form :submit").length+"个");});                                                    
26     });
27 </script>
28 </head>
29 <body>
30     <form id="test">
31     &lt;form id="test"&gt;<br/>
32         <input type="hidden"/>
33         <label><input type="text"/>&lt;input type="text"/&gt;</label>
34         <label><input type="password"/>&lt;input type="password"/&gt;</label>
35         <label><input type="file"/>&lt;input type="file"/&gt;</label>    
36         <label><input type="image"/>&lt;input type="image"/&gt;</label>    
37         <label><input type="radio" value="radio1" checked="checked"/>&lt;input type="radio" value="radio1" checked="checked"/&gt;</label>
38         <label><input type="radio" value="radio2"/>&lt;input type="radio" value="radio2"/&gt;</label>
39         <label><input type="radio" value="radio3"/>&lt;input type="radio" value="radio3"/&gt;</label>
40         <label><input type="radio" value="radio4" disabled="disabled"/>&lt;input type="radio" value="radio4" disabled="disabled"/&gt;</label>
41         <label><input type="checkbox" value="checkbox1" checked="checked"/>&lt;input type="checkbox" value="checkbox1" checked="checked"/&gt;</label>
42         <label><input type="checkbox" value="checkbox2" checked="checked"/>&lt;input type="checkbox" value="checkbox2" checked="checked"/&gt;</label>
43         <label><input type="checkbox" value="checkbox3"/>&lt;input type="checkbox" value="checkbox3"/&gt;</label>
44         <label><input type="checkbox" value="checkbox4" disabled="disabled"/>&lt;input type="checkbox" value="checkbox4" disabled="disabled"/&gt;</label>
45         <textarea disabled="disabled">&lt;textarea disabled="disabled"&gt;&lt;/textarea&gt;</textarea>
46         &lt;select&gt;<br/>
47         <select>        
48             <option value="option1" selected="selected">&lt;option value="option1" selected="selected"&gt;&lt;/option&gt;</option>
49             <option value="option2">&lt;option value="option2" selected="selected"&gt;&lt;/option&gt;</option>
50             <option value="option3">&lt;option value="option3" selected="selected"&gt;&lt;/option&gt;</option>
51             <option value="option4" disabled="disabled">&lt;option value="option4" selected="selected"&gt;&lt;/option&gt;</option>    
52         </select>
53         &lt;/select&gt;    <br/>
54         &lt;select multiple="multiple"&gt;<br/>    
55         <select multiple="multiple">        
56             <option value="option1" selected="selected">&lt;option value="option1" selected="selected"&gt;&lt;/option&gt;</option>
57             <option value="option2" selected="selected">&lt;option value="option2" selected="selected"&gt;&lt;/option&gt;</option>
58             <option value="option3">&lt;option value="option3" selected="selected"&gt;&lt;/option&gt;</option>
59             <option value="option4" disabled="disabled">&lt;option value="option4" selected="selected"&gt;&lt;/option&gt;</option>        
60         </select>
61         &lt;/select&gt;    <br/>
62         <input type="button" value="&lt;input type=&quot;button&quot; value=&quot;**&quot;/&gt;"/><br />
63         <input type="reset" value="&lt;input type=&quot;reset&quot; value=&quot;**&quot;/&gt;"/><br />
64         <input type="submit" disabled="disabled" value="&lt;input type=&quot;submit&quot; value=&quot;**&quot; disabled=&quot;disabled&quot;/&gt;"/><br />
65         <button type="button">&lt;button type="button"&gt;&lt;/button&gt;</button><br />    
66         <button type="reset">&lt;button type="reset"&gt;&lt;/button&gt;</button><br />
67         <button type="submit" disabled="disabled">&lt;button type="submit" disabled="disabled"&gt;&lt;/button&gt;</button><br/>
68     &lt;/form&gt;
69     </form>
70     <div>
71         <button type="button" id="btn1">$("form :input")</button>
72         <button type="button" id="btn2">$(":text")</button>
73         <button type="button" id="btn3">$(":password")</button>
74         <button type="button" id="btn4">$(":radio")</button><br/>
75         <button type="button" id="btn5">$(":checkbox")</button>
76         <button type="button" id="btn6">$(":image")</button>
77         <button type="button" id="btn7">$(":file")</button>
78         <button type="button" id="btn8">$("input:hidden")</button><br/>
79         <button type="button" id="btn9">$("form :button")</button>
80         <button type="button" id="btn10">$("form :reset")</button>
81         <button type="button" id="btn11">$("form :submit")</button>
82     </div>
83 </body>
84 </html>

posted @ 2013-03-05 18:45  KOJYA  阅读(133)  评论(0)  编辑  收藏  举报