jQuery 中的 is(:visible)

JavaScript 7月前 195

:visible 选择器用于检查 HTML 文档中的元素是否可见，is() 是 jQuery 的内置方法。本教程演示如何在 jQuery 中使用 .is(":visible") 选择器。

在 jQuery 中使用 `.is(":visible")` 选择器

有时，需要检查页面中的元素是否可见；为此，使用了来自 jquery 的内置选择器 .is(":visible")。语法包含一个方法 is() 和一个选择器:visible。

该方法和选择器一起检查元素是否在页面上可见。此方法的语法是：

$(element).is(":visible");

其中 :visible 是一个 CSS 选择器，它告诉用户选择页面上可见的元素。此方法的返回值是元素是否可见。

is() 方法来自 jQuery，用于根据传递给它的选择器检查特定的元素集，并且它不会创建一个新对象来检查相同的对象而不进行任何修改。

让我们尝试一个简单的示例，如果给定元素可见或不可见，它将提醒我们：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery is visible method </title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js""> </script>
    <style>
    #delftstack  {
    display: block;
    }
    </style>
    <script>
    $(document).ready(function() {
        // Check whether the delftstack h1 is visible
        if($("h1").is(":visible")) {
            alert("The h1 element with delftstack is visible.");
        }
        else {
            alert("The h1 element with delftstack is not visible.");
        }
    });
    </script>
</head>
<body>
    <h1 id = "delftstack">Hello, This is delftstack.com</h1>
</body>
</html>

h1 的显示设置为 block，因此该元素在文档中可见。查看输出：

jQuery 中的 is(:visible)

同样，如果显示设置为 none，则该元素将在文档中不可见。参见示例：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery is visible method </title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js""> </script>
    <style>
    #delftstack  {
    display: none;
    }
    </style>
    <script>
    $(document).ready(function() {
        // Check whether the delftstack h1 is visible
        if($("h1").is(":visible")) {
            alert("The h1 element with delftstack is visible.");
        }
        else {
            alert("The h1 element with delftstack is not visible.");
        }
    });
    </script>
</head>
<body>
    <h1 id = "delftstack">Hello, This is delftstack.com</h1>
</body>
</html>

此代码的输出是：

jQuery 中的 is(:visible)

我们还可以使用 .is(":visible") 方法来隐藏和显示元素。让我们尝试一个例子：

<!DOCTYPE html>
<html>
<head>
    <title>
        is visible jQuery
    </title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
</head>
<body style="text-align:center;">
    <h1 style = "color:blue;" > DELFTSTACK </h1>
    <h3>
        Is Visible JQuery
    </h3>
    <p style="display: none;">
        Delftstack.com - The Best Tutorial Site
    </p>
    <input onclick="change()" type="button" value="Display" id="DemoButton"> </input>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#DemoButton").click(function() {
                if (this.value == "Display")
                    this.value = "Hide";
                else this.value = "Display";
                $("p").toggle("slow", function() {
                    if($("p").is(":visible")) {
                         alert("The P element is visible.");
                    }
                    else {
                        alert("The p element is hidden.");
                    }
                });
            });
        });
    </script>
</body>
</html>

上面的代码将在点击时显示或隐藏段落元素，使用 .is(":visible") 方法进行检查。见输出：

jQuery 中的 is(:visible)