上QQ阅读APP看书，第一时间看更新
4.8 表单选择器
表单选择器是匹配经常在表单内出现的元素。但是匹配的元素不一定在表单中。jQuery提供的表单选择器如表4.6所示。
表4.6 jQuery的表单选择器
【例4.13】匹配表单中相应的元素并实现不同的操作。（实例位置：光盘\TM\sl\4\13）
（1）创建一个名称为index.html的文件，在该文件的<head>标记中应用下面的语句引入jQuery库。
<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
（2）在页面的<body>标记中，添加一个表单，并在该表单中添加复选框、单选按钮、图像域、文件域、密码域、文本框、普通按钮、重置按钮、提交按钮和隐藏域等input元素，关键代码如下：
<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>
（3）在引入jQuery库的代码下方编写jQuery代码，实现匹配表单中的各个表单元素，并实现不同的操作，具体代码如下：
<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>
运行本实例，将显示如图4.20所示的页面。
图4.20 利用表单选择器匹配表单中相应的元素