jQuery 中的 is(:visible)

Sheeraz Gul 2022年6月15日

jQuery jQuery Selector

: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，因此該元素在文件中可見。檢視輸出：

is visible jQuery 輸出 1

同樣，如果顯示設定為 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>

此程式碼的輸出是：

不可見

我們還可以使用 .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") 方法進行檢查。見輸出：

is visible jQuery 輸出 2

Author: Sheeraz Gul

Sheeraz is a Doctorate fellow in Computer Science at Northwestern Polytechnical University, Xian, China. He has 7 years of Software Development experience in AI, Web, Database, and Desktop technologies. He writes tutorials in Java, PHP, Python, GoLang, R, etc., to help beginners learn the field of Computer Science.

LinkedIn Facebook

在 jQuery 中使用 .is(":visible") 選擇器

相關文章 - jQuery Selector

在 jQuery 中使用 `.is(":visible")` 選擇器