jQuery表单过滤器
本节课所讲内容:
1. jQuery常规选择器
2. jQuery表单选择器
3. jQuery表单过滤器
主讲教师:Head老师
一. jQuery常规选择器
我们可以使用 id、类(class)和元素名来获取表单字段,如果是表单元素,都必须含有 name
属性,还可以结合属性选择器来精确定位。
$('input').val(); //元素名定位,默认获取第一个
$('input').eq(1).val(); //同上,获取第二个
$('input[type=password]').val(); //选择 type 为 password 的字段
$('input[name=user]').val(); //选择 name 为 user 的字段
那么对于 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 | 集合元素 |
$(':input').size(); //获取所有表单字段元素
$(':text).size(); //获取单行文本框元素
$(':password').size(); //获取密码栏元素
$(':radio).size(); //获取单选框元素
$(':checkbox).size(); //获取复选框元素
$(':submit).size(); //获取提交按钮元素
$(':reset).size(); //获取重置按钮元素
$(':image).size(); //获取图片按钮元素
$(':file).size(); //获取文件按钮元素
$(':button).size(); //获取普通按钮元素
$(':hidden).size(); //获取隐藏字段元素
注意:这些选择器都是返回元素集合,如果想获取某一个指定的元素,最好结合一下属
性选择器。比如:
$(':text[name=user]).size(); //获取单行文本框 name=user 的元素
三.表单过滤器
jQuery 提供了四种表单过滤器,分别在是否可以用、是否选定来进行表单字段的筛选过
滤。
方法名 | 描述 | 返回 |
:enabled | 选取所有可用元素 | 集合元素 |
:disabled | 选取所有不可用元素 | 集合元素 |
:checked | 选取所有被选中的元素 | 单选和复选字段 集合元素 |
:selected | 选取所有被选中的元素 | 下拉列表 集合元素 |
$(':enabled').size(); //获取可用元素
$(':disabled).size(); //获取不可用元素
$(':checked).size(); //获取单选、复选框中被选中的元素
$(':selected).size(); //获取下拉列表中被选中的元素