无论是提交还是传递数据，表单在页面中的作用是显而易见的。通过表单进行数据的提交和处理，在前端页面开发中占据重要地位。因此，为了使用户能更加方便地、高效地使用表单，在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{241px} 11 textarea,select,buttion,input,span{display:none} 12 .btn{border:#666 1px solid;padding:2px;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>
综合案例分析——导航条在项目中的应用
一、需求分析
- 在页面中创建一个导航条，单击标题时，可以伸缩导航条的内容，同时，标题中的提示图片也随之改变。
- 单击“简化”连接时，隐藏指定的内容，并将“简化”字样改变成“更多”，单击“更多”连接时，返回初始状态，并改变指定显示元素的背景色。
二、功能实现：
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></title> 7 <script type="text/javascript" src="../../software/jquerys/jquery-1.7.2.js"></script> 8 <style type="text/css"> 9 body{font-size:13px} 10 #divFrame{border:solid 1px #666;301px;overflow:hidden} 11 #divFrame .clsHead{background-color:#eee;padding:8px;height:18px;cursor:hand} 12 #divFrame .clsHead h3{padding:0px;margin:0px;float:left} 13 #divFrame .clsHead span{float:right;margin-top:3px} 14 #divFrame .clsContent ul{list-style-type:none;margin:0px;padding:0px} 15 #divFrame .clsContent ul li{float:left;95px;height:23px;line-height:23px} 16 #divFrame .clsBot{float:right;padding-top:5px;padding-bottom:5px} 17 .GetFocus{background-color:#eee} 18 </style> 19 <script type="text/javascript"> 20 $(function(){ // 页面记载事件 21 $(".clsHead").click(function(){ // 图片单机事件 22 if($(".clsContent").is(":visible")){ //如果内容可见 23 $(".clsHead span img") 24 .attr("src","Images/imgClose.png"); // 改变图片 25 // 隐藏内容 26 $(".clsContent").css("display","none"); 27 }else{ 28 $(".clsHead span img") 29 .attr("src","Images/imgLarge.png"); // 改变图片 30 // 显示内容 31 $(".clsContent").css("display","block"); 32 } 33 }); 34 35 $(".clsBot > a").click(function(){ // 热点连接单击事件 36 // 如果内容为“简化”字样 37 if($(".clsBot > a").text()=="简化"){ 38 // 隐藏index号大于4且不是最后一项的元素 39 $("ul li:gt(4):not(:last)").hide(); 40 // 将字符内容更改为“更多” 41 $(".clsBot > a").text("更多"); 42 }else{ 43 $("ul li:gt(4):not(:last)") 44 .show() 45 .addClass("GetFocus"); // 显示所选元素且增加样式 46 // 将字符内容更改为“简化” 47 $(".clsBot > a").text("简化"); 48 } 49 }); 50 }); 51 </script> 52 </head> 53 <body> 54 <div id="divFrame"> 55 <div class="clsHead"> 56 <h3>图书分类</h3> 57 <span><img src="Images/imgLarge.png" alt=""/></span> 58 </div> 59 <div class="clsContent"> 60 <ul> 61 <li><a href="#">小说</a><i>(1110)</i></li> 62 <li><a href="#">文艺</a><i>(230)</i></li> 63 <li><a href="#">青春</a><i>(1430)</i></li> 64 <li><a href="#">少儿</a><i>(1560)</i></li> 65 <li><a href="#">生活</a><i>(870)</i></li> 66 <li><a href="#">社科</a><i>(1460)</i></li> 67 <li><a href="#">管理</a><i>(1450)</i></li> 68 <li><a href="#">计算机</a><i>(1780)</i></li> 69 <li><a href="#">教育</a><i>(930)</i></li> 70 <li><a href="#">工具书</a><i>(3450)</i></li> 71 <li><a href="#">引进版</a><i>(980)</i></li> 72 <li><a href="#">其他类</a><i>(3230)</i></li> 73 </ul> 74 <div class="clsBot"> 75 <a href="#">简化</a><img src="Images/imgClose.png" alt=""/> 76 </div> 77 </div> 78 </div> 79 </body> 80 </html>