jQuery——可见性筛选选择器

jQuery的可见性筛选选择器有visible和hidden，对应于元素的显示和隐藏状态；为此先要区分display:none和visibility:hidden的区别：

display：none是在文档流中不占据位置，而visibility：hidden占据一定的空间位置；另外，设置了display：none属性的元素的子元素继承了该属性，而visibility：hidden的子元素仍然可以通过设置visibility的值来控制其可见性；

visible：

当元素在文档流中占据位置时，就认为该元素是可见的；脱离了标准文档流的元素也认为是不可见的。因此，display：none是不可见的，visibility：hidden或者opacity=0的元素是可见的；
元素的宽和高设置为0是不可见的；

hidden：

具有属性display：none的元素及其子元素；
width=0并且height=0的元素；
type=“hidden”的表单元素，这个与我之前想的不太一样；
opacity=0的元素；

以下代码可以对上述的几种元素可见性情况进行测试：

</pre><pre name="code" class="html"><!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>test for attrs of visible and hidden</title>
    <style>
        *{margin: 0px;padding: 0px;}
    </style>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
    <div>
        <div class="div">
            <p id="div1" style="display:none;">display</p>
        </div>
        <div class="div">
            <p id="div2" style="width:0;height:0">width/height</p>
        </div>
        <div class="div">
            <p id="div3" style="visibility:hidden;opacity:0;">visibility</p>
        </div>
        <form class="div">
            <label for="form"><input type="hidden" id="div4" /></label>
        </form>
    </div>

    <p class="show1"></p>
    <p class="show2"></p>
    <p class="show3"></p>
    <p class="show4"></p>
    <p class="show5"></p>
    <p class="show6"></p>
    <p class="show7"></p>
    <p class="show8"></p>
    <script type="text/javascript">
        
        function show (ele,i) {
            var show = ".show"+i;
            if (ele instanceof jQuery) {
                $(show).html('元素长度 = ' + ele.length);
                // i++;
                console.log(i);               
            } else {
                alert(ele+' 不是jQuery对象')
            }
        }
    </script>

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

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

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

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

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

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



</body>

</html>

测试结果如下：

更多相关文章

随机推荐