jQuery选择器之表单对象属性过滤选择器Demo

╰+哭是因爲堅強的太久メ 2022-03-29 15:36 258阅读 0赞

测试代码:

08-表单对象属性过滤选择器.html

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      2 <html xmlns="http://www.w3.org/1999/xhtml">
      3 <head>
      4  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      5  <title>08-表单对象属性过滤选择器.html</title>
      6  
      7  <script src="../js/jquery-1.4.2.js" type="text/javascript"></script>
      8  <script src="./script/assist.js" type="text/javascript"></script>
      9  <link rel="stylesheet" type="text/css" href="./css/style.css" />  
     10  
     11   <script type="text/javascript">
     12       $(document).ready(function(){
     13           //<button id="btn1">对表单内 可用input 赋值操作.</button>
     14           $("#btn1").click(function(){
     15                   $("input:enabled").val("李冠男")
     16           });
     17           
     18           //<button id="btn2">对表单内 不可用input 赋值操作.</button>
     19           $("#btn2").click(function(){
     20                   $("input:disabled").val("小强");
     21           });
     22           
     23           //<button id="btn3">获取多选框选中的个数.</button>
     24           $("#btn3").click(function(){
     25               alert( $("input:checked").length)
     26                 
     27           });
     28           
     29           //<button id="btn4">获取下拉框选中的内容.</button>
     30           $("#btn4").click(function(){
     31                   /**
     32                    * 1:要遍历的元素的角标
     33                    * 
     34                    * 2：遍历出来的对应的dom
     35                    */
     36                   $("select>option:selected").each(function(index,docxml){
     37                     //dom 不熟悉
     38                     //alert(docxml.value);
     39                      alert($(docxml).text());
     40                       
     41                 })
     42           });
     43           
     44     });
     45   </script>
     46 
     47 </head>
     48 <body>
     49   <h3> 表单对象属性过滤选择器.</h3>
     50    <form id="form1" action="#">
     51     <button type="reset">重置所有表单元素</button>
     52     <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label>    
     53     <br /><br />
     54   <button id="btn1">对表单内 可用input 赋值操作.</button>
     55   <button id="btn2">对表单内 不可用input 赋值操作.</button>
     56   <button id="btn3">获取多选框选中的个数.</button>
     57   <button id="btn4">获取下拉框选中的内容.</button>
     58  
     59 
     60  
     61   <br /><br />
     62     
     63      可用元素：<input name="add" value="可用文本框" />  <br/>
     64      不可用元素：<input name="email" disabled="disabled" value="不可用文本框"/><br/>
     65      可用元素： <input name="che" value="可用文本框" /><br/>
     66      不可用元素：<input name="name" disabled="disabled"  value="不可用文本框"/><br/>
     67      <br/>
     68      多选框：<br/>
     69      <input type="checkbox" name="newsletter" checked="checked" value="test1" />test1
     70      <input type="checkbox" name="newsletter" value="test2" />test2
     71      <input type="checkbox" name="newsletter" value="test3" />test3
     72      <input type="checkbox" name="newsletter" checked="checked" value="test4" />test4
     73      <input type="checkbox" name="newsletter" value="test5" />test5
     74      <div></div>
     75 
     76      <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
     77      下拉列表1：<br/>
     78     <select name="test" multiple="multiple" style="height:100px">
     79         <option>浙江</option>
     80         <option selected="selected" value="湖南">hunan</option>
     81         <option>北京</option>
     82         <option selected="selected" value="天津">tianj</option>
     83         <option>广州</option>
     84         <option>湖北</option>
     85     </select>
     86     
     87      <br/><br/>
     88      下拉列表2：<br/>
     89      <select name="test2" >
     90     <option>浙江</option>
     91     <option>湖南</option>
     92     <option selected="selected" value="北京">beijing</option>
     93     <option>天津</option>
     94     <option >广州</option>
     95     <option>湖北</option>
     96     </select>
     97     <br/><br/>
     98 
     99      <div></div>
    100   </form>
    101 
    102 
    103 
    104 
    105 </body>
    106 </html>