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

最新推荐文章于 2021-12-28 12:20:01 发布

阅读量409

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： jquery

本文链接：https://blog.youkuaiyun.com/cckevincyh/article/details/53151429

JavaScript 专栏收录该内容

62 篇文章

订阅专栏

本文通过一个HTML页面示例介绍了jQuery中的可见度过滤选择器:visible和:hidden的使用方法，展示了如何通过这些选择器操作DOM元素的可见性及样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

可见度过滤选择器

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>