jQuery의 is(:visible)

Sheeraz Gul 2024년2월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으로 설정되어 요소가 문서에 표시됩니다. 출력 보기:

jQuery 출력 1이 보입니다

마찬가지로 표시가 없음으로 설정되어 있으면 해당 요소가 문서에 표시되지 않습니다. 예를 참조하십시오.

<!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") 메서드를 사용하여 클릭 시 단락 요소를 표시하거나 숨깁니다. 출력 참조:

jQuery 출력 2가 보입니다

작가: 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")` 선택기 사용