问答详情
源自:2-9 jQuery选择器之可见性筛选选择器

为什么同一个元素用visible和hidden显示的结果不一样

为什么同一个元素用visible和hidden显示的结果不一样,主要是div3

提问者:zrning 2016-07-16 22:16

个回答

  • 那些你很冒险的梦_
    2016-07-18 16:38:54
    已采纳

    隐藏一个元素的方法:1.display:none.2.type="hidden"的表单元素。3.width=0,height=0。4.其祖先元素是隐藏的。5.visibility:hidden.6.opacity:0。其中5和6仍占有空间布局,所以他们是可见的。用$(":visible")查出的长度为1,其他1~4不可见,其长度为0 。

    $(":hidden")可选择出所有隐藏(即不可见)的元素。

    1~4为不可见的元素,会被选中,其长度为1;5和6为可见的元素,不会被选中,其长度为0.

  • ray1208
    2016-07-17 01:01:08

    同一个元素,状态:visible?hidden,则相应的$对象的长度也不同

  • zrning
    2016-07-16 22:16:24

    <!DOCTYPE html>
    <html>

    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title></title>
        <link rel="stylesheet" href="imooc.css" type="text/css">
        <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
    </head>

    <body>
        <h2>可见性筛选选择器</h2>
        <h3>:visible/:hidden</h3>
        <div class="left">
            <div class="div">
                <a>display</a>
                <p id="div1" style="display:none;">display</p>
            </div>
            <div class="div">
                <a>width</a>
                <a>height</a>
                <p id="div2" style="width:0;height:0">width/height</p>
            </div>
            <div class="div">
                <a>visibility</a>
                <a>opacity</a>
                <p id="div3" style="visibility:hidden">visibility</p>
                <p id="div4" style="opacity:0">oop</p>
            </div>
        </div>

        <p id="show"></p>
        <script type="text/javascript">
            function show (ele) {
                if (ele instanceof jQuery) {
                    if(ele.length==0)
                    {$("#show").html('该元素不可见')}
                    else{
                        $("#show").html('该元素可见')
                    }
                } else {
                    alert(ele+' 不是jQuery对象')
                }
            }
            function show1 (ele) {
                if (ele instanceof jQuery) {
                    if(ele.length==0)
                    {$("#show").html('该元素可见')}
                    else{
                        $("#show").html('该元素隐藏')
                    }
                } else {
                    alert(ele+' 不是jQuery对象')
                }
            }
            //jq对象相当于一个数组,有长度?
            
        </script>


        <script type="text/javascript">
            //查找id = div1的DOM元素,是否可见
            show($("#div1:visible"));
        </script>

        <script type="text/javascript">
            //查找id = div2的DOM元素,是否可见
            show($("#div2:visible")  );
        </script>

        <script type="text/javascript">
            //查找id = div3的DOM元素,是否可见
            show(  $("#div3:visible" );
        </script>

        <script type="text/javascript">
            //查找id = div1的DOM元素,是否隐藏
            show1( $("#div1:hidden") );
        </script>

        <script type="text/javascript">
            //查找id = div2的DOM元素,是否隐藏
            show1($("#div2:hidden"));
        </script>

        <script type="text/javascript">
            //查找id = div3的DOM元素,是否隐藏
        show1($("#div3:hidden"));
        show1($("#div4:hidden"));
        
           // show(  $("#div3:visible" );
        </script>



    </body>

    </html>