标签：style blog http color io os 使用 ar java
无论是提交还是传递数据，表单在页面中的作用是显而易见的。通过表单进行数据的提交和处理，在前端页面开发中占据重要地位。因此，为了使用户能更加方便地、高效地使用表单，在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="../../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="0">Item 0</option></select> 62 <input type="text" value="Text" class="txt" /> 63 <input type="password" value="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="Submit" class="btn" /> 67 <input type="image" title="Image" src="Images/i7.jpg" class="img" /> 68 <input type="reset" value="Reset" class="btn" /> 69 <input type="button" value="Button" class="btn" /> 70 <input type="file" title="File" class="txt" /> 71 <div id="divShow"></div> 72 </form> 73 </body> 74 </html>
标签：style blog http color io os 使用 ar java
原文地址：http://www.cnblogs.com/duffy/p/4024052.html
