jQuery表单选择器

表单作为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
}); 

 

posted on 2018-03-31 17:00  我不是西西  阅读(10659)  评论(0编辑  收藏  举报