jQuery过滤选择器——表单对象属性过滤选择器

来源：互联网发布：php开发直播系统编辑：程序博客网时间：2024/04/28 02:48

表单对象属性过滤选择器

此选择器主要对所选择的表单元素进行过滤
1、:enabled
用法: $(”input:enabled”)
返回值 :集合元素
说明: 匹配所有可用元素.意思是查找所有input中不带有disabled=”disabled”的input.不为disabled,当然就为enabled啦.
2、:disabled
用法: $(”input:disabled”)
返回值 :集合元素
说明: 匹配所有不可用元素.与上面的那个是相对应的.
3、:checked
用法: $(”input:checked”)
返回值 :集合元素
说明: 匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option).这话说起来有些绕口.
4、:selected
用法: $(”select option:selected”)
返回值 :集合元素
说明: 匹配所有选中的option元素.

表单对象属性过滤选择器示例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>ddd</title>    <meta http-equiv="content-type" content="text/html; charset=UTF-8">    <script language="JavaScript" src="../js/jquery-1.4.2.js"></script>    <style type="text/css">            div,span{                width: 140px;                height: 140px;                margin: 20px;                background: #9999CC;                border: #000 1px solid;                float:left;                font-size: 17px;                font-family:Roman;            }            div.mini{                width: 30px;                height: 30px;                background: #CC66FF;                border: #000 1px solid;                font-size: 12px;                font-family:Roman;            }     </style>     <!--引入jquery的js库-->    </head>    <body>         <input type="button" value="保存"  class="mini" name="ok"  class="mini"/>         <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值"  id="b1"/>         <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值"  id="b2"/>         <input type="button" value=" 利用 jQuery 对象的 length 属性获取多选框选中的个数"  id="b3"/>         <input type="button" value=" 利用 jQuery 对象的 text() 方法获取下拉框选中的内容"  id="b4"/>         <input type="text" value="不可用值1" disabled="disabled">          <input type="text" value="可用值1" >         <input type="text" value="不可用值2" disabled="disabled">         <input type="text" value="可用值2" >         <br>         <input type="checkbox" name="items" value="美容" >美容         <input type="checkbox" name="items" value="IT" >IT         <input type="checkbox" name="items" value="金融" >金融         <input type="checkbox" name="items" value="管理" >管理         <br>          <input type="radio" name="sex" value="男" >男          <input type="radio" name="sex" value="女" >女         <br>          <select name="job" id="job" multiple="multiple" size=4>            <option>程序员</option>            <option>中级程序员</option>            <option>高级程序员</option>            <option>系统分析师</option>          </select>          <select name="edu" id="edu">            <option>本科</option>            <option>博士</option>            <option>硕士</option>            <option>大专</option>          </select>         <div id="two" class="mini" >               id为two   class是 mini  div               <div  class="mini" >class是 mini</div>        </div>         <div class="one" >                class是 one                <div  class="mini" >class是 mini</div>               <div  class="mini" >class是 mini</div>         </div>         <div class="one" >              class是 one                <div  class="mini01" >class是 mini01</div>               <div  class="mini" >class是 mini</div>        </div>    </body><script language="JavaScript">        //<input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值"  id="b1"/>        $("#b1").click(function(){            /*             * <input type="text" value="不可用值1" disabled="disabled">                  <input type="text" value="可用值1" >                 <input type="text" value="不可用值2" disabled="disabled">                 <input type="text" value="可用值2" >             */            $("input[type=text]:enabled").val("xxx");        });        //<input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值"  id="b2"/>        $("#b2").click(function(){            $("input[type=text]:disabled").val("xxx");        });        //<input type="button" value=" 利用 jQuery 对象的 length 属性获取多选框选中的个数"  id="b3"/>        $("#b3").click(function(){            /*             * <input type="checkbox" name="items" value="美容" >美容                 <input type="checkbox" name="items" value="IT" >IT                 <input type="checkbox" name="items" value="金融" >金融                 <input type="checkbox" name="items" value="管理" >管理             */            alert($("input[type=checkbox]:checked").length);        });        //<input type="button" value=" 利用 jQuery 对象的 text() 方法获取下拉框选中的内容"  id="b4"/>        $("#b4").click(function(){            /*             * <select name="job" id="job" multiple="multiple" size=4>                    <option >程序员</option>                    <option>中级程序员</option>                    <option>高级程序员</option>                    <option>系统分析师</option>                  </select>                  <select name="edu" id="edu">                    <option>本科</option>                    <option>博士</option>                    <option>硕士</option>                    <option>大专</option>                  </select>             */            $("select option:selected").each(function(index,domEle){                alert($(domEle).text());            });        });</script>   </html>

0 0