jquery表单选择器

一 介绍

表单选择器是匹配经常在表单内出现的元素。但是匹配的元素不一定在表单中。 jQuery 提供的表单选择器如下表所示。

选择器	说明	示例
:input	匹配所有的input元素	$(":input")      //匹配所有的input元素 $("form :input") //匹配<form>标记中的所有input元素，需要注意，在form和:之间有一个空格
:button	匹配所有的普通按钮，即type="button"的input元素	$(":button")     //匹配所有的普通按钮
:checkbox	匹配所有的复选框	$(": checkbox")  //匹配所有的复选框
:file	匹配所有的文件域	$(": file")       //匹配所有的文件域
:hidden	匹配所有的不可见元素，或者type为hidden的元素	$(": hidden")    //匹配所有的隐藏域
:image	匹配所有的图像域	$(": image")     //匹配所有的图像域
:password	匹配所有的密码域	$(": password")  //匹配所有的密码域
:radio	匹配所有的单选按钮	$(": radio")     //匹配所有的单选按钮
:reset	匹配所有的重置按钮，即type=" reset "的input元素	$(":reset")     //匹配所有的重置按钮
:submit	匹配所有的提交按钮，即type=" submit "的input元素	$(":submit")     //匹配所有的提交按钮
:text	匹配所有的单行文本框	$(":button")    //匹配所有的单行文本框

二 应用

匹配表单中相应的元素并实现不同的操作

三 运行效果

四 代码下载地址

Js代码  

1. <script language="javascript" src="JS/jquery-3.1.1.min.js"></script>  
2. <form>  
3.     复选框：<input type="checkbox"/>  
4.     单选按钮：<input type="radio"/>  
5.     图像域：<input type="image"/><br>  
6.     文件域：<input type="file"/><br>  
7.     密码域：<input type="password" width="150px"/><br>  
8.     文本框：<input type="text" width="150px"/><br>  
9.     按  钮：<input type="button" value="按钮"/><br>  
10.     重  置：<input type="reset" value=""/><br>  
11.     提  交：<input type="submit" value=""><br>  
12.     隐藏域： <input type="hidden" value="这是隐藏的元素">  
13.    <div id="testDiv"><font color="blue">隐藏域的值：</font></div>  
14. </form>  
15. <script type="text/javascript">  
16.       $(document).ready(function() {  
17.          $(":checkbox").attr("checked","checked");      //选中复选框  
18.          $(":radio").attr("checked","true");            //选中单选框  
19.          $(":image").attr("src","images/fish1.jpg");    //设置图片路径  
20.          $(":file").hide();                             //隐藏文件域  
21.          $(":password").val("123");                     //设置密码域的值  
22.          $(":text").val("文本框");                      //设置文本框的值  
23.          $(":button").attr("disabled","disabled");      //设置按钮不可用  
24.          $(":reset").val("重置按钮");                   //设置重置按钮的值  
25.          $(":submit").val("提交按钮");                  //设置提交按钮的值  
26.          $("#testDiv").append($("input:hidden:eq(1)").val()); //显示隐藏域的值  
27.        });  
28. </script>