表单作为HTML中一种特殊的元素,操作方法较为多样性和特殊性,开发者不但可以使用之前的常规选择器或过滤器,也可以使用jQuery为表单专门提供的选择器和过滤器来准确的定位表单元素。
一.常规选择器
<body> <form> <input type="text" name="user" value="123" /> <input type="password" name="pass" value="456" /> </form> </body>
可以使用id、类(class)和元素名来获取表单字段,如果是表单元素,都必须含有 name属性,还可以结合属性选择器来精确定位。
$(function () { alert($('input').size()); //2个input alert($('input').val()); //元素名定位,默认获取第一个value值:123 alert($('input[name=pass]').val()); //选择name为user的字段获取第二个value值:456 });
那么对于id和类(class)用法比较类似,也可以结合属性选择器来精确的定位,在这里我们不在重复。对于表单中的其他元素名比如:textarea、select和button等,原理一样,不在重复。
二.表单选择器
虽然可以使用常规选择器来对表单的元素进行定位,但有时还是不能满足开发者灵活多变的需求。所以,jQuery为表单提供了专用的选择器。
<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>
1.表单选择器
(1):input选取所有input、textarea、select和button元素-集合元素
查看所有表单元素里name=city的有几个:
$(function () { alert($(':input[name=city]').size()); //1 });
(2):text选择所有单行文本框,即type=text-集合元素
获取单行文本框元素
$(function () { alert($(':text').size()); //1 });
(3):password选择所有密码框,即type=password-集合元素
获取密码栏元素
$(function () { alert($(':password[name=pass]').size()); });
(4):radio选择所有单选框,即type=radio-集合元素
获取单选框元素有几个
$(function () { alert($(':radio').size()); //2 });
获取单选框元素第二个元素的value值
$(function () { alert($(':radio[name=sex]').eq(1).val()); //女 });
获取单选框元素第最后个元素的value值
$(function () { alert($(':radio[name=sex]').last().val()); //女 });
(5):checkbox选择所有复选框,即type=checkbox-集合元素
获取复选框元素有几个
$(function () { alert($(':checkbox').size()); //0个 });
(6):submit选取所有提交按钮,即type=submit-集合元素
获取提交按钮元素
$(function () { alert($(':submit').size()); //1个 });
(7):reset选取所有重置按钮,即type=reset-集合元素
获取重置按钮元素
$(function () { alert($(':reset').size()); //0个 });
(8):image选取所有图像按钮,即type=image-集合元素
获取图片按钮元素
$(function () { alert($(':image').size()); //0个 });
(9):button选择所有普通按钮,即button元素-集合元素
获取文件按钮元素
$(function () { alert($(':file').size()); //0个 });
(10):file选择所有文件按钮,即type=file-集合元素
获取普通按钮元素
$(function () { alert($(':button').size()); //1个 });
(11):hidden选择所有不可见字段,即 type=hidden-集合元素
获取form元素下隐藏字段元素
$(function () { alert($('form :hidden').size()); //0 });
注意:这些选择器都是返回元素集合
三.表单过滤器
jQuery提供了四种表单过滤器,分别在是否可以用、是否选定来进行表单字段的筛选过滤。
(1):enabled 选取所有可用元素 集合元素
获取可用元素
$(function () { alert($('form :enabled').size()); //10 });
(2):disabled 选取所有不可用元素 集合元素
选取所有不可用元素
$(function () { alert($('form :disabled').size()); //0 });
(3):checked选取所有被选中的元素,单选和复选字段 集合元素
获取单选、复选框中被选中的元素
$(function () { alert($('form :checked').size()); //1 });
(4):selected选取所有被选中的元素,下拉列表集合元素
获取下拉列表中被选中的元素
$(function () { alert($('form :selected').get(0)); //undefined alert($('form :selected').size()); //0 });