JQuery 表单选择器


:enabled – 选择可以正常输入的<input>、<select>等,也就是没有灰掉的输入;
:disabled – 和:enabled正好相反,选择那些不能输入的
:checked – 选取所有被选中的元素(单选框、复选框)
:selected – 选取所有选中项元素(下拉列表)
:focus – 选择当前输入焦点的元素()把光标放到一个<input>上,用$(‘input:focus’)就可以选出
:input – 选取所有的<input><textarea><select><button>元素
:text – 选取所有的单行文本框
:password – 选取所有的密码框元素
:radio – 选取所有的单选框 和input[type=radio]一样
:checkbox 选取所有的多选框 和input[type=checkbox]一样
$(":checkbox:checked") – 选取所有多选框中选中的选项
:select – 选取所有的下拉框
$(":selected :checked") – 选取所有下拉框中选中的选项【注意:被选择的不是 select, 而是 select 的 option 子节点,所以要加一个空格.表示选择的是 select 元素后面的元素。】
:submit – 选取所有的提交按钮
:image – 选取所有的图像按钮
:reset – 选取所有的重置按钮
:button – 选项所有的按钮
:file – 选取所有的上传域 和input[type=file]一样
:hidden – 选取所有的不可见元素
$("textarea") – 选取所有的多行文本框。用的是 基本选择器 的根据 元素名称 选择

举个“栗子”



    
        
        <title>表单对象属性过滤选择器</title>
        
        
            $(function(){
                //对表单内 可用input 赋值操作
                $("#btn1").click(function(){
                    //使所有的可用的单行文本框的 value 值变为 “可用的文本框被使用”
                    alert($(":text:enabled").val());
                    $(":text:enabled").val("可用的文本框被使用");
                });
                //对表单内 不可用input 赋值操作
                $("#btn2").click(function(){
                    $(":text:disabled").val("www.themehome.net");
                });
                //获取多选框选中的个数
                $("#btn3").click(function(){
                    var num = $(":checkbox[name='newsletter']:checked").length;
                    alert(num);
                });
                //获取多选框选中的内容
                $("#btn4").click(function(){
                    $(":checkbox[name='newsletter']:checked").each(function(){
                        alert(this.value);
                    });
                });
                //获取下拉框选中的内容
                $("#btn5").click(function(){
                    //实际被选择的不是 select, 而是 select 的 option 子节点,所以要加一个 空格.表示选择的是select元素后面的元素。
                    //var len = $("select :selected").length
                    //alert(len);
                    //因为 $("select :selected") 选择的是一个数组
                    //当该数组中有多个元素时, 通过 .val() 方法就只能获取第一个被选择的值了.
                    //alert($("select :selected").val());
                    //jQuery 对象遍历的方式是 each, 在 each 内部的 this 是正在得到的 DOM 对象, 而不是一个 jQuery 对象
                    //alert(this.nodeName); 能获取到节点名称,所以证明each的this是DOM对象
                    $("select :selected").each(function(){
                        alert(this.value);//this是DOM对象,所以可以直接.value
                        //alert(this.nodeName);
                    });
                });
            })
        
    
    
        <h3>表单对象属性过滤选择器</h3>
         <button id="btn1">对表单内 可用input 赋值操作.</button>
         <button id="btn2">对表单内 不可用input 赋值操作.</button><br /><br />
         <button id="btn3">获取多选框选中的个数.</button>
         <button id="btn4">获取多选框选中的内容.</button><br /><br />
         <button id="btn5">获取下拉框选中的内容.</button><br /><br />
        
        	<hr />
                        可用元素: 
                     <br /><br />
                        不可用元素: 
                       <br /><br />
            <hr />
            多选框:
            test1
            test2
            test3
            test4
            test5
            <hr />
            下拉列表1:
            
                浙江
                辽宁
                北京
                天津
                广州
                湖北
            
            <hr />
            下拉列表2:
            
                浙江
                辽宁
                北京
                天津
                广州
                湖北
            
            <hr />
            <textarea rows="" cols=""></textarea>
        
    


<< JQuery 过滤器 JQuery 利用函数/方法查找和过滤 >>
  • 作者 建站迷

    建站迷

    让天下没有难做的网站!
    解决中小型企业的无站之伤。



没有账号? 忘记密码?

社交账号快速登录