is(:visible) en jQuery
El selector :visible se usa para verificar si un elemento en el documento HTML es visible o no, y is() es un método integrado de jQuery. Este tutorial demuestra cómo usar el selector .is(":visible") en jQuery.
Use el selector .is(":visible") en jQuery
A veces, se requiere comprobar si un elemento de la página está visible o no; para este propósito, se utiliza un selector integrado .is(":visible") de jquery. La sintaxis contiene un método is() y un selector :visible.
El método y el selector juntos verificarán si un elemento está visible en la página o no. La sintaxis de este método es:
$(element).is(":visible");
Donde :visible es un selector de CSS que le dice al usuario que seleccione los elementos visibles en la página. El valor de retorno de este método es si un elemento es visible o no.
El método is() es de jQuery para verificar el conjunto específico de elementos contra el selector que se le pasó, y no creará un nuevo objeto que verificará el mismo objeto sin modificaciones.
Probemos un ejemplo simple que nos alertará si el elemento dado está visible o no:
<!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>
La visualización de h1 se establece en block, por lo que el elemento es visible en el documento. Ver la salida:
Del mismo modo, si la visualización se establece en none, el elemento no será visible en el documento. Ver ejemplo:
<!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 salida para este código es:
También podemos usar el método .is(":visible") con el fin de ocultar y mostrar un elemento. Probemos un ejemplo:
<!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>
El código anterior mostrará u ocultará el elemento de párrafo al hacer clic usando el método .is(":visible") para verificar. Ver salida:
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