1.表单过滤器的介绍
- :input 所有表单元素(<input>/<select>/<textarea>/<button>)
- :text 文本框<input type='text'>
- :password 密码框<input type='password'>
- :radio 单选框<input type='radio'>
- :checkbox 复选框<input type='checkbox'>
- :submit 提交按钮<input type='submit'>
- :image 图片按钮<input type='image' src=''>
- :reset 重置按钮<input type='text'>
- :file 文本上传<input type='file'>
- :hidden 隐藏域<input type='hidden'> <xxx style='display:none'>
- :button 所有普通按钮 或者<input type='button'/>
- :enabled 可用
- :disabled 不可用
- :checked 选中（单选框redio，复选框checkbox）
- :selected 选择（下拉列表 select option）
2.代码实例1
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>09-表单选择器.html</title> 6 <!-- 引入jQuery --> 7 <script src="../js/jquery-1.8.3.js" type="text/javascript"></script> 8 <script type="text/javascript"> 9 //<![CDATA[ 10 $(document).ready(function(){ 11 12 var $alltext = $("#form1 :text"); 13 var $allpassword= $("#form1 :password"); 14 var $allradio= $("#form1 :radio"); 15 var $allcheckbox= $("#form1 :checkbox"); 16 17 var $allsubmit= $("#form1 :submit"); 18 var $allimage= $("#form1 :image"); 19 var $allreset= $("#form1 :reset"); 20 var $allbutton= $("#form1 :button"); // <input type=button /> 和 <button ></button>都可以匹配 21 var $allfile= $("#form1 :file"); 22 var $allhidden= $("#form1 :hidden"); // <input type="hidden" />和<div style="display:none">test</div>都可以匹配. 23 var $allselect = $("#form1 select"); 24 var $alltextarea = $("#form1 textarea"); 25 26 var $AllInputs = $("#form1 :input"); 27 var $inputs = $("#form1 input"); 28 29 $("div").append(" 有" + $alltext.length + " 个（ :text 元素）<br/>") 30 .append(" 有" + $allpassword.length + " 个（ :password 元素）<br/>") 31 .append(" 有" + $allradio.length + " 个（ :radio 元素）<br/>") 32 .append(" 有" + $allcheckbox.length + " 个（ :checkbox 元素）<br/>") 33 .append(" 有" + $allsubmit.length + " 个（ :submit 元素）<br/>") 34 .append(" 有" + $allimage.length + " 个（ :image 元素）<br/>") 35 .append(" 有" + $allreset.length + " 个（ :reset 元素）<br/>") 36 .append(" 有" + $allbutton.length + " 个（ :button 元素）<br/>") 37 .append(" 有" + $allfile.length + " 个（ :file 元素）<br/>") 38 .append(" 有" + $allhidden.length + " 个（ :hidden 元素）<br/>") 39 .append(" 有" + $allselect.length + " 个（ select 元素）<br/>") 40 .append(" 有" + $alltextarea.length + " 个（ textarea 元素）<br/>") 41 .append(" 表单有 " + $inputs.length + " 个（input）元素。<br/>") 42 .append(" 总共有 " + $AllInputs.length + " 个(:input)元素。<br/>") 43 .css("color", "red") 44 45 //显示所有的隐藏标签名称 46 $allhidden.each(function(){ 47 $("div").append("<br/>").append($(this).get(0).nodeName); 48 }); 49 50 $("form").submit(function () { return false; }); // return false;不能提交. 51 52 }); 53 //]]> 54 </script> 55 </head> 56 <body> 57 <form id="form1" action="#"> 58 <input type="button" value="Button"/><br/> 59 <input type="checkbox" name="c"/>1<input type="checkbox" name="c"/>2<input type="checkbox" name="c"/>3<br/> 60 <input type="file" /><br/> 61 <input type="hidden" /><div style="display:none">test</div><br/> 62 <input type="image" /><br/> 63 <input type="password" /><br/> 64 <input type="radio" name="a"/>1<input type="radio" name="a"/>2<br/> 65 <input type="reset" /><br/> 66 <input type="submit" value="提交"/><br/> 67 <input type="text" /><br/> 68 <select><option>Option</option></select><br/> 69 <textarea rows="5" cols="20"></textarea><br/> 70 <button>Button</button><br/> 71 </form> 72 73 <div></div> 74 </body> 75 </html>
2.代码实例2
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.8.3.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 $(function(){ 13 // <button id="btn1">对表单内 可用input 赋值操作.</button> 14 $("#btn1").click(function(){ 15 $("input:enabled").val("可用的"); 16 }); 17 // <button id="btn2">对表单内 不可用input 赋值操作.</button> 18 $("#btn2").click(function(){ 19 $("input:disabled").val("不可用"); 20 }); 21 // <button id="btn3">获取多选框选中的个数.</button> 22 $("#btn3").click(function(){ 23 var count = $("input[type='checkbox'][name='newsletter']:checked").length; 24 alert(count); 25 }); 26 // <button id="btn4">获取下拉框选中的内容.</button> 27 $("#btn4").click(function(){ 28 //如果有value值，val()函数就获得value的值，如果没有就获得text的值 29 $(":selected").each(function(){ 30 var text = $(this).val(); 31 alert(text); 32 }); 33 }); 34 }) 35 </script> 36 37 </head> 38 <body> 39 <h3> 表单对象属性过滤选择器.</h3> 40 <button type="reset">重置所有表单元素</button> 41 <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label> 42 <br /><br /> 43 <button id="btn1">对表单内 可用input 赋值操作.</button> 44 <button id="btn2">对表单内 不可用input 赋值操作.</button> 45 <button id="btn3">获取多选框选中的个数.</button> 46 <button id="btn4">获取下拉框选中的内容.</button> 47 48 <br /><br /> 49 50 可用元素：<input name="add" value="可用文本框"/> <br/> 51 不可用元素：<input name="email" disabled="disabled" value="不可用文本框"/><br/> 52 可用元素： <input name="che" value="可用文本框" /><br/> 53 不可用元素：<input name="name" disabled="disabled" value="不可用文本框"/><br/> 54 <br/> 55 多选框：<br/> 56 <input type="checkbox" name="newsletter" checked="checked" value="test1" />test1 57 <input type="checkbox" name="newsletter" value="test2" />test2 58 <input type="checkbox" name="newsletter" value="test3" />test3 59 <input type="checkbox" name="newsletter" checked="checked" value="test4" />test4 60 <input type="checkbox" name="newsletter" value="test5" />test5 61 <div id="checkboxDivId"></div> 62 63 <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 64 下拉列表1：<br/> 65 <select name="test" multiple="multiple" style="height:100px"> 66 <option>浙江</option> 67 <option selected="selected">湖南</option> 68 <option>北京</option> 69 <option selected="selected">天津</option> 70 <option>广州</option> 71 <option>湖北</option> 72 </select> 73 74 <br/><br/> 75 下拉列表2：<br/> 76 <select name="test2" > 77 <option>浙江</option> 78 <option>湖南</option> 79 <option selected="selected">北京</option> 80 <option>天津</option> 81 <option>广州</option> 82 <option>湖北</option> 83 </select> 84 <br/><br/> 85 86 <div id="selectDivId"></div> 87 88 89 90 </body> 91 </html>