首页 > 代码库 > 表单选择器

表单选择器

2024-07-27 02:46:31   218人阅读

无论是提交还是传递数据，表单在页面中的作用是显而易见的。通过表单进行数据的提交和处理，在前端页面开发中占据重要地位。因此，为了使用户能更加方便地、高效地使用表单，在jQuery选择器中引入表单选择器，该选择器专为表单量身打造，通过它可以在页面中快速地位某表单对象。其详细的说明如表所示。

表2-7 表单选择器语法

选择器功能返回值
 :input 获取所有 input、 textarea 、 select元素集合
 :text 获取所有单行文本框元素集合
 :password 获取所有密码框元素集合
 :radio 获取所有单选按钮元素集合
 :checkbox 获取所有复选框元素集合
 :submit 获取所有提交按钮元素集合
 :image 获取所有图像域元素集合
 :reset 获取所有重置按钮元素集合
 :button 获取所有按钮元素集合
 :file 获取所有文本域元素集合

 示例——使用jQuery表单过滤选择器获取元素

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XMTML 1.0 2 Transitional//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 <html xmlns="http://www.w3.org/1999/xhtml"> 5 <head> 6 <title>使用jQuery层次选择器</title> 7 <script type="text/javascript" src="http://www.mamicode.com/software/jquerys/jquery-1.7.2.js"></script> 8 <style type="text/css"> 9     body{font-size:12px;text-align:center}10     form{width:241px}11     textarea,select,buttion,input,span{display:none}12     .btn{border:#666 1px solid;padding:2px;width:60px;13          filter:progid:DXImageTransform.Microsoft.14          Gradient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#ECE9D8);}15     .txt{border:#666 1px solid;padding:3px}16     .img{padding:2px;border:solid 1px #ccc}17     .div{border:solid 1px #ccc;background-color:#eee;padding:5px}18 </style>19 <script type="text/javascript">20     $(function(){    // 显示Input类型元素的总数量21         //$("#form1 div").html("表单共找出 Input 类型元素："+ $("#form1 :input").length );22         //$("#form1 div").addClass("div");23         for(var i =0; i<$("#form1 :input").length;i++){24             //alert( $("#form1 :input")[i].type );25         }26     });27     $(function(){    // 显示所有文本框对象28         //$("#form1 :text").show(3000);29     });30     $(function(){    // 显示所有密码框对象31         //$("#form1 :password").show(3000);32     });33     $(function(){    // 显示所有单选框对象34         //$("#form1 :radio").show(3000);35         //$("#form1 #Span1").show(3000);36     });37     $(function(){    // 显示所有复选框对象38         //$("#form1 :checkbox").show(3000);39         //$("#form1 #Span2").show(3000);40     });41     $(function(){    // 显示所有提交按钮对象42         //$("#form1 :submit").show(3000);43     });44     $(function(){    // 显示所有图片域对象45         //$("#form1 :image").show(3000);46     });47     $(function(){    // 显示所有重置按钮对象48         //$("#form1 :reset").show(3000);49     });50     $(function(){    // 显示所有按钮对象51         //$("#form1 :button").show(3000);52     });53     $(function(){    // 显示所有文件域对象54         $("#form1 :file").show(3000);55     });56 </script>57 </head>58 <body>59     <form id="form1">60         <textarea class="txt">TextArea</textarea>61         <select><option value="http://www.mamicode.com/0">Item 0</option></select>62         <input type="text" value="http://www.mamicode.com/Text" class="txt" />63         <input type="password" value="http://www.mamicode.com/PassWord" class="txt" />64         <input type="radio" /><span id="Span1">Radio</span>65         <input type="checkbox" /><span id="Span2">CheckBox</span>66         <input type="submit" value="http://www.mamicode.com/Submit" class="btn" />67         <input type="image" title="Image" src="http://www.mamicode.com/Images/i7.jpg" class="img" />68         <input type="reset" value="http://www.mamicode.com/Reset" class="btn" />69         <input type="button" value="http://www.mamicode.com/Button" class="btn" />70         <input type="file" title="File" class="txt" />71         <div id="divShow"></div>72     </form>73 </body>74 </html>
Demo

 

表单选择器


联系
我们