jQuery :visible 选择器

jQuery 中的:visible 选择器用于选择当前在 DOM 中可见的元素。

以下是一些元素不被视为可见的情况：

CSS 属性为 display: none 的元素。
CSS 属性为 visibility: hidden 的元素。
不透明度为 0 的元素。

注意：:visible 选择器不适用于高度或宽度设置为 0 的元素。

语法

以下是 jQuery 中 :visible 选择器的语法：

$(":visible")

参数

:visible 选择当前在 DOM 中可见的所有元素。

示例 1

在下面的示例中，我们使用:visible 选择器来选择所有可见的 <p> 元素：

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("p:visible").css("background-color", "yellow");
        });
    </script>
</head>
<body>
    <p>This paragraph is visible.</p>
    <p style="display: none">This paragraph is hidden.</p>
    <p style="visibility: hidden;">This paragraph is not visible.</p>
</body>
</html>

执行上述程序后，:visible 选择所有可见的 <p> 元素，并用黄色背景颜色突出显示它们。

示例 2

在这个示例中，我们显示一个警报（显示计数）来表示可见的 div 元素：

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            var visibleDivs = $("div:visible").length;
            alert("There are " + visibleDivs + " visible div elements.");
        });
    </script>
</head>
<body>
    <div>This div is visible.</div>
    <div style="display : none">This div is hidden.</div>
</body>
</html>

当我们执行上述程序时，它将显示一个警报，其中包含可见 div 元素的计数。

jquery_ref_selectors.htm

打印页面