• 【代码片段】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>

  • 相关阅读:
    String数组转换成Integer数组
    码云远程仓库用户名和密码修改了,本地如何删除修改?
    Git操作过程(码云)
    SpringCloud应用之配置中心Nacos
    SpringCloud应用之网关GateWay
    SpringCloud应用之熔断器Hystrix
    SpringCloud应用之服务调用Feign
    装饰者设计模式
    Spring 自动装配及其注解
    Spring Bean自动装配有哪些方式?
  • 原文地址:https://www.cnblogs.com/kojya/p/2944891.html
Copyright © 2020-2023  润新知