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，因此該元素在文件中可見。檢視輸出：
同樣，如果顯示設定為 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") 方法進行檢查。見輸出：
