jQuery选择器之表单对象属性过滤选择器Demo
测试代码:
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 <!-- 引入jQuery --> 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 <!-- Resources from http://down.liehuo.net --> 105 </body> 106 </html>
本文转自SummerChill博客园博客，原文链接：http://www.cnblogs.com/DreamDrive/p/5780082.html，如需转载请自行联系原作者