表单作为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]