jQuery选择器之可见性筛选选择器

来源：互联网发布：淘宝夜间模式编辑：程序博客网时间：2024/06/05 17:45

背景：

元素有显示状态与隐藏状态，jQuery根据元素的状态扩展了可见性筛选选择器:visible与:hidden

选择器描述 $(“:visible”) 选择所有显示的元素 $(“:hidden”) 选择所有隐藏的元素

这2个选择器都是 jQuery 延伸出来的，看起来比较简单，但是元素可见性依赖于适用的样式。
:hidden选择器，不仅仅包含样式是display=”none”的元素，还包括隐藏表单、visibility等等。
有几种方式可以隐藏一个元素：
1）CSS display的值是none。
2）type=”hidden”的表单元素。
3）宽度和高度都显式设置为0。
4）一个祖先元素是隐藏的，该元素是不会在页面上显示
5）CSS visibility的值是hidden
6）CSS opacity的指是0
如果元素中占据文档中一定的空间，元素被认为是可见的。可见元素的宽度或高度，是大于零。元素的visibility: hidden 或 opacity: 0被认为是可见的，因为他们仍然占用空间布局。
不在文档中的元素是被认为是不可见的，如果当他们被插入到文档中，jQuery没有办法知道他们是否是可见的，因为元素可见性依赖于适用的样式。

代码：

<!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>display0</a>            <p id="div1" style="display:none;">display1</p>            <!--上面的display0是显示的，而display1是被隐藏的-->        </div>        <div class="div">            <a>width</a>            <a>height</a>            <p id="div2" style="width:0;height:0">width/height</p>            <!--上面的display0是显示的，而display1是被隐藏的-->        </div>        <div class="div">            <a>visibility</a>            <a>opacity</a>            <p id="div3" style="visibility:hidden;opacity:0">visibility</p>            <!--上面的dvisibility是被隐藏的-->        </div>    </div>    <p id="show"></p>    <script type="text/javascript">        function show (ele) {            if (ele instanceof jQuery) {                $("#show").html('元素的长度的 = ' + ele.length)            } else {                alert(ele+' 不是jQuery对象')            }        }        //instanceof是判断对象的类型这句话是判断ele是否是jQuery对象    </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元素,是否隐藏        show( $('#div1:hidden') );    </script>    <script type="text/javascript">        //查找id = div2的DOM元素,是否隐藏        show( $('#div2:hidden') );    </script>    <script type="text/javascript">        //查找id = div3的DOM元素,是否隐藏        show( $('#div3:hidden') );    </script></body></html>

但是结果是：
这里写图片描述
只有一次元素值的显示？？这是为何？？带有进步一问题查找。

0 0