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")    //匹配所有的单行文本框

二 应用

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

三 运行效果

四 代码

<script language="javascript" src="JS/jquery-3.1.1.min.js"></script>
<form>
    复选框：<input type="checkbox"/>
    单选按钮：<input type="radio"/>
    图像域：<input type="image"/><br>
    文件域：<input type="file"/><br>
    密码域：<input type="password" width="150px"/><br>
    文本框：<input type="text" width="150px"/><br>
    按  钮：<input type="button" value="按钮"/><br>
    重  置：<input type="reset" value=""/><br>
    提  交：<input type="submit" value=""><br>
    隐藏域： <input type="hidden" value="这是隐藏的元素">
   <div id="testDiv"><font color="blue">隐藏域的值：</font></div>
</form>
<script type="text/javascript">
      $(document).ready(function() {
         $(":checkbox").attr("checked","checked");      //选中复选框
         $(":radio").attr("checked","true");            //选中单选框
         $(":image").attr("src","images/fish1.jpg");    //设置图片路径
         $(":file").hide();                             //隐藏文件域
         $(":password").val("123");                     //设置密码域的值
         $(":text").val("文本框");                      //设置文本框的值
         $(":button").attr("disabled","disabled");      //设置按钮不可用
         $(":reset").val("重置按钮");                   //设置重置按钮的值
         $(":submit").val("提交按钮");                  //设置提交按钮的值
         $("#testDiv").append($("input:hidden:eq(1)").val()); //显示隐藏域的值
       });
</script>