is(:visible) dans jQuery
Le sélecteur :visible est utilisé pour vérifier si un élément du document HTML est visible ou non, et is() est une méthode intégrée de jQuery. Ce tutoriel montre comment utiliser le sélecteur .is(":visible") dans jQuery.
Utilisez le sélecteur .is(":visible") dans jQuery
Parfois, il est nécessaire de vérifier si un élément de la page est visible ou non ; à cette fin, un sélecteur intégré .is(":visible") de jquery est utilisé. La syntaxe contient une méthode is() et un sélecteur :visible.
La méthode et le sélecteur vérifieront ensemble si un élément est visible sur la page ou non. La syntaxe de cette méthode est :
$(element).is(":visible");
Où :visible est un sélecteur CSS qui indique à l’utilisateur de sélectionner les éléments visibles sur la page. La valeur de retour de cette méthode est de savoir si un élément est visible ou non.
La méthode is() provient de jQuery pour vérifier l’ensemble spécifique d’éléments par rapport au sélecteur qui lui est transmis, et elle ne créera pas un nouvel objet qui vérifiera le même objet sans aucune modification.
Essayons un exemple simple qui nous alertera si l’élément donné est visible ou non :
<!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>
L’affichage du h1 est réglé sur block, donc l’élément est visible dans le document. Voir la sortie :
De même, si l’affichage est défini sur none, l’élément ne sera pas visible dans le document. Voir exemple :
<!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>
La sortie de ce code est :
On peut aussi utiliser la méthode .is(":visible") dans le but de cacher et d’afficher un élément. Essayons un exemple :
<!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>
Le code ci-dessus affichera ou masquera l’élément de paragraphe au clic en utilisant la méthode .is(":visible") pour vérifier. Voir la sortie :
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