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

最新推荐文章于 2024-01-13 22:21:09 发布

JasonLiu1919

最新推荐文章于 2024-01-13 22:21:09 发布

阅读量1.2k

点赞数

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

本文链接：https://blog.csdn.net/ljp1919/article/details/70185061

版权

javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

背景：

元素有显示状态与隐藏状态，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>

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

JasonLiu1919

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery选择器之可见性筛选选择器

背景：元素有显示状态与隐藏状态，jQuery根据元素的状态扩展了可见性筛选选择器:visible与:hidden 选择器描述 $(“:visible”) 选择所有显示的元素 $(“:hidden”) 选择所有隐藏的元素这2个选择器都是 jQuery 延伸出来的，看起来比较简单，但是元素可见性依赖于适用的样式。 :hidden选择器，不仅仅包含样式是display=”non
复制链接

扫一扫