表单作为HTML中一种特殊的元素，操作方法较为多样性和特殊性，开发者不但可以使用之前的常规选择器或过滤器，也可以使用jQuery为表单专门提供的选择器和过滤器来
准确的定位表单元素。
常规选择器
我们可以使用id、类(class)和元素名来获取表单字段， 如果是表单元素， 都必须含有name属性，还可以结合属性选择器来精确定位。
如html代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单选择器</title>
<script type="text/javascript" src="jquery-1.12.3.js"></script>
<script type="text/javascript" src="demo.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<form>
<input type="text" name="user" value="123" />
<input type="password" name="pass" value="456" />
</form>
</body>
</html>
jQuery代码如下：
alert($("input").size()); //2
alert($("input").val()); //元素名定位，默认获取第一个
alert($("input").eq(1).val()); //这种写法语义不清晰
alert($("input[type=password]").val()); //语义清晰了一点，选择type为password的字段
alert($("input[name=pass]").val()); //选择name为pass的字段
那么对于id和类(class)，用法比较类似，也可以结合属性选择器来精确的定位，在这里我们不再重复。对于表单中的其他元素名比如：textarea、select和button等，原理一样，不再重复。
表单选择器
虽然可以使用常规选择器来对表单的元素进行定位， 但有时还是不能满足开发者灵活多变的需求。所以jQuery为表单提供了专用的选择器。
| 方法名 | 描述 | 返回 |
| :input | 选取所有input、textarea、select和button元素 | 集合元素 |
| :text | 选择所有单行文本框，即type=text | 集合元素 |
| :password | 选择所有密码框，即type=password | 集合元素 |
| :radio | 选择所有单选框，即type=radio | 集合元素 |
| :checkbox | 选择所有复选框，即type=checkbox | 集合元素 |
| :submit | 选取所有提交按钮，即type=submit | 集合元素 |
| :reset | 选取所有重置按钮，即type=reset | 集合元素 |
| :image | 选取所有图像按钮，即type=image | 集合元素 |
| :button | 选择所有普通按钮，即button元素 | 集合元素 |
| :file | 选择所有文件按钮，即type=file | 集合元素 |
| :hidden | 选择所有不可见字段，即type=hidden | 集合元素 |
有如下html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单选择器</title>
<script type="text/javascript" src="jquery-1.12.3.js"></script>
<script type="text/javascript" src="demo.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<form>
<input type="text" name="user" value="123" />
<input type="password" name="pass" value="456" />
<input type="radio" name="sex" value="男" checked="checked" />男
<input type="radio" name="sex" value="女" />女
<textarea></textarea>
<select name="city" multiple>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<button></button>
</form>
</body>
</html>
jQuery代码：
alert($("input").size()); //4
alert($(":text").size()); //1
注意：这些选择器都是返回元素集合，如果想获取某一个指定的元素，最好结合一下属性选择器。比如：
alert($(":input[name=city]").size()); //1
alert($(":password[name=pass]").size()); //1
alert($(":radio[name=sex]").last().val()); //女 等价于alert($(":radio[name=sex]").eq(1).val());
alert($("form :hidden").size()); //返回0，因为文档没有隐藏元素，注意要加空格
注意一点：对于下拉框<select>
<select name="city">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
则默认选中第1条。若加一个属性multiple
<select name="city" multiple>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
表单过滤器
jQuery提供了四种表单过滤器，分别在是否可以用、是否选定来进行表单字段的筛选过滤。
表单过滤器
| 方法名 | 描述 | 返回 |
| :enabled | 选取所有可用元素 | 集合元素 |
| :disabled | 选取所有不可用元素 | 集合元素 |
| :checked | 选取所有被选中的元素，单选和复选字段 | 集合元素 |
| :selected | 选取所有被选中的元素，下拉列表 | 集合元素 |
html代码同上不变，jQuery代码如下：
alert($("form :enabled").size()); //获取可用元素的数量
alert($("form :disabled").size()); //获取不可用元素的数量
alert($("form :checked").size()); //获取单选、复选框中被选中的元素数量
alert($("form :selected").size()); //获取下拉列表中被选中的元素数量
alert($("form :selected").get(0)); //undefined/[object HTMLOptionElement]
时间： 2024-10-22 19:07:49