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") メソッドを使用してクリックすると、段落要素を表示または非表示にします。出力を参照してください：
