                        课程
                    
                        /前端开发
                        
                            /jQuery
                        
                        /jQuery基础 (一)—样式篇

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

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

zrning

2016-07-16

源自：jQuery基础 (一)—样式篇 2-9

关注问题我要回答

1963

操作

收起

3 回答

那些你很冒险的梦_ 回答被采纳 +3 积分
2016-07-18

隐藏一个元素的方法：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.

5 回复有任何疑惑可以回复我~

收起回答

zrning 提问者

非常感谢！

2016-07-24 回复有任何疑惑可以回复我~

ray1208
2016-07-17

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

0 回复有任何疑惑可以回复我~

收起回答

zrning 提问者
2016-07-16

<!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>