一 介绍
表单选择器是匹配经常在表单内出现的元素。但是匹配的元素不一定在表单中。
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>