jQuery过滤选择器——可见度过滤选择器

来源：互联网发布：北京网络职业学院招聘编辑：程序博客网时间：2024/06/05 00:23

可见度过滤选择器

1、:hidden
用法: $(”tr:hidden”)
返回值 ：集合元素
说明: 匹配所有的不可见元素，input 元素的 type 属性为 “hidden” 的话也会被匹配到.意思是css中display:none和input type=”hidden”的都会被匹配到.同样,要在脑海中彻底分清楚冒号”:”, 点号”.”和逗号”,”的区别.
2、:visible
用法: $(”tr:visible”)
返回值：集合元素
说明: 匹配所有的可见元素.

可见度过滤选择器示例

<!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;            }            div.visible{                display:none;            }     </style>     <!--引入jquery的js库-->    </head>    <body>         <input type="button" value="保存"  class="mini" name="ok"  class="mini" />         <input type="button" value=" 改变所有可见的div元素的背景色为 #0000FF"  id="b1"/>         <input type="button" value=" 选取所有不可见的元素, 利用 jQuery 中的 show() 方法将它们显示出来, 并设置其背景色为 #0000FF"  id="b2"/>         <input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值"  id="b3"/>         <input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值"  id="b4"/>         <!--文本隐藏域-->         <input type="hidden" value="hidden_1">         <input type="hidden" value="hidden_2">         <input type="hidden" value="hidden_3">         <input type="hidden" value="hidden_4">         <h1>天气冷了</h1>         <h2>天气又冷了</h2>         <div id="one">             id为one   div         </div>         <div id="two" class="mini" >               id为two   class是 mini  div               <div  class="mini" >class是 mini</div>        </div>         <div class="visible" >                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>        <div class="visible" >              这是隐藏的xx        </div>        <div class="one">        </div>        <br>        <div id="mover" >              动画        </div>        <br>    </body><script language="JavaScript">        //<input type="button" value=" 改变所有可见的div元素的背景色为 #0000FF"  id="b1"/>        $("#b1").click(function(){            $("div:visible").css("background","#0000FF");        });        //<input type="button" value=" 选取所有不可见的元素, 利用 jQuery 中的 show() 方法将它们显示出来, 并设置其背景色为 #0000FF"  id="b2"/>        $("#b2").click(function(){            $("div:hidden").show().css("background","#0000FF");        });        //<input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值"  id="b3"/>        $("#b3").click(function(){        /*         * <input type="hidden" value="hidden_1">         <input type="hidden" value="hidden_2">         <input type="hidden" value="hidden_3">         <input type="hidden" value="hidden_4">         */        var $inputs = $("input:hidden");//      for(var i=0;i<$inputs.length;i++){//          var input = $inputs[i];//          //          alert(input.value);//      }        /*         * each(function(index,domEle){})         *      * jquery中的普通遍历方法，需要jquery对象来调用         *      * 回调函数：function(index,domEle){}         *          * index：获取到的标签的索引值         *          * domEle：dom对象         */        $inputs.each(function(index,domEle){            //alert(domEle.value);            //alert($(domEle).val());            //alert(this.value);        //this代表的是domEle            alert($(this).val());        });    });        //<input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值"  id="b4"/>        $("#b4").click(function(){                /*                 * <input type="hidden" value="hidden_1">                 <input type="hidden" value="hidden_2">                 <input type="hidden" value="hidden_3">                 <input type="hidden" value="hidden_4">                 */                var $inputs = $("input:hidden");                /*                 * jquery.each(object,function(index,domEle){})                 *      * 全局遍历函数，不需要jquery对象来调用                 *      * object：要遍历的数组或对象                 *      * 回调函数：function(index,domEle){}                 *          * index：获取到的标签的索引值                 *          * domEle：dom对象                 */                $.each($inputs,function(index,domEle){                    alert(domEle.value);                });            });</script></html>

0 0