jquery 表单选择器

本文详细介绍了jQuery表单选择器的功能和用法,包括表单对象属性过滤选择器和表单对象属性过滤示例,展示了如何通过jQuery轻松地筛选、操作表单元素。
 Jquery表单过滤选择器

表单对象属性过滤选择器

选择器                 描述                                              返回                示例

:enabled              选择所有可用元素                          集合元素         $("#form1  :enabled");选取ID为"form1"的表单内的所有可用元素

:disabled             选取所有不可用元素                       集合元素         $(#form2   :disabled);选取id为"from2"的表单内的所有不可用元素

:checked             选取所有被选中的元素                   集合元素         $("input:checked")选取所有被选中的<input>元素

:selected            选取所有被选中的选项元素(下拉)集合元素        $("select:selected");选取所有被选中的选项元素

 

表单对象属性过滤示例:

作用                                                                                                       代码

改变表单内可用<input>元素的值                                                            $("#form1  input:enabled")

                                                                                                                                       .val("这里变化了");

改变表单内不可用<input>元素的值                                                         $("#form1  input:disabled")

                                                                                                                                       .val("这里变化了");

获取多选框选中的个数                                                                            $("input:checked").length;

获取下拉框选中的内容                                                                            $("select  :selected").text();

 

表单对象属性过滤示例

选择器材             描述                                                 返回                示例

:input                    选取所有的<input>,<textarea>         集合元素         $(":input")选取所有<input>,<textarea>.<select>和<button>元素

                             <select>和<button>元素

:text                      选取所有的单选文本框                     集合元素         $(":text")选取所有的单选文本框

:password            选取所有的密码框                            集合元素          $(":password")选取所有的密码框

:radio                选取所有的单选框                            集合元素          $(":radio")选取所有的单选框

:checkbox            选取所有的多选框                            集合元素          $(":checkbox");选取所有的复选框

:submit                选取所有的提交按钮                         集合元素           $(":submit")选取所有的提交按钮

:image                 选取所有的图像按钮                         集合元素           $(":image");选取所有的图像按钮

:reset                  选取所有的重置按钮                         集合元素           $(":reset");选取所有的重置按钮

:button                选取所有的按钮                                集合元素            $(":button"); 选取所有的按钮

:file                   选取所有的上传域                             集合元素            $(":hidden")选取所有不可见元素

下面把这些表单选择器运用到下面的表单中,对表单进行操作


如果想得到表单内表单元素的个数,代码如下:

$("#form1  :input").length;        //注意与$("#form1   input")的区别

如果想得到表单内单行文本框的个数,代码如下:

$("#form1   :text").length;

如果想得到表单内密码框的个数,代码如下:

$("#form1   :password").length;

同理,其他表单选择器的操作与此类似

 

获取页面中的所有<p>元素,给每一个<p>元素添加onclick事件,例如:

$("p").click(function({

            //doing somethingr(操作)

})

 

获取id为tb的元素,然后寻找它下面的tbody标签,再寻找tbody下索引值是偶数的tr元素改变它的背景色(css("property","value");用来设置jQuery对象的样式)例如:

$('#tb tbody tr:even').css("backgroundColor","#888");

先使用属性选择器,然后用表单对象属性过滤,最后获取jQuery对象的长度,例如:

$('#btn').click(function(){

                  var   length=$("input[name='check']:checked").length;

                  alert("选中的个数为:"+length);

})

清空所有input type="text" 文本框内容:$("input:text").val("");

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值