is(:visible) in jQuery
Der Selektor :visible wird verwendet, um zu prüfen, ob ein Element im HTML-Dokument sichtbar ist oder nicht, und is() ist eine eingebaute Methode von jQuery. Dieses Tutorial demonstriert die Verwendung des Selektors .is(":visible") in jQuery.
Verwenden Sie den Selektor .is(":visible") in jQuery
Manchmal ist es erforderlich zu prüfen, ob ein Element auf der Seite sichtbar ist oder nicht; Dazu wird ein eingebauter Selektor .is(":visible") von jquery verwendet. Die Syntax enthält eine Methode is() und einen Selektor :visible.
Die Methode und der Selektor prüfen zusammen, ob ein Element auf der Seite sichtbar ist oder nicht. Die Syntax für diese Methode lautet:
$(element).is(":visible");
Wobei :visible ein CSS-Selektor ist, der den Benutzer anweist, die auf der Seite sichtbaren Elemente auszuwählen. Der Rückgabewert dieser Methode ist, ob ein Element sichtbar ist oder nicht.
Die Methode is() stammt von jQuery, um den spezifischen Satz von Elementen anhand des an sie übergebenen Selektors zu überprüfen, und sie erstellt kein neues Objekt, das dasselbe Objekt ohne Änderungen überprüft.
Versuchen wir ein einfaches Beispiel, das uns warnt, ob das angegebene Element sichtbar ist oder nicht:
<!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>
Die Anzeige für das h1 ist auf block eingestellt, das Element ist also im Dokument sichtbar. Siehe die Ausgabe:
Wenn die Anzeige auf keine eingestellt ist, ist das Element ebenfalls nicht im Dokument sichtbar. Siehe Beispiel:
<!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>
Die Ausgabe für diesen Code ist:
Wir können auch die Methode .is(":visible") verwenden, um ein Element zu verstecken und anzuzeigen. Versuchen wir es an einem Beispiel:
<!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>
Der obige Code zeigt oder verbirgt das Absatzelement beim Klicken mit der Methode .is(":visible") zur Überprüfung. Siehe Ausgabe:
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