HOWTO · jQuery
jQuery의 is(:visible)
이 튜토리얼은 jQuery에서 is(:visible)을 사용하는 방법을 보여줍니다.
: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으로 설정되어 요소가 문서에 표시됩니다. 출력 보기:
마찬가지로 표시가 없음으로 설정되어 있으면 해당 요소가 문서에 표시되지 않습니다. 예를 참조하십시오.
<!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") 메서드를 사용하여 클릭 시 단락 요소를 표시하거나 숨깁니다. 출력 참조:
