En este artículo vamos a aprender a seleccionar elementos cuya propiedad no está visible u oculta. Simplemente significa que la propiedad de visualización de ese elemento en particular está oculta, y necesitamos mostrar lo que esté presente en ese elemento usando Jquery.
Podemos hacer esto fácilmente usando el selector Jquery:hidden. Primero, veamos cómo sabrá que el elemento está oculto, estos elementos están configurados para mostrar: ninguno; elemento de formulario con tipo = «oculto», ancho y alto establecidos en 0 o un elemento padre oculto y este padre también ocultará a sus hijos.
- jQuery: selector oculto: la tarea de este selector es seleccionar el elemento que tiene la propiedad oculta.
Sintaxis –
$(":hidden")
- Método jQuery show() : se utiliza para mostrar el elemento oculto seleccionado por los selectores.
Sintaxis:
$(selector).show(speed,easing,callback) // All parameters are optional.
Ejemplo 1 :
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script>
$(document).ready(function () {
$("h1:hidden").show(5500);
});
</script>
</head>
<body>
<h1 style="display: none">GeeksForGeeks</h1>
<p>It is a computer science portal for geeks.</p>
<p>
You can whatever you want to learn in
the computer science field.
</p>
</body>
</html>
Producción :
Ejemplo 2: Tenemos una etiqueta de encabezado con la propiedad display:none y el resto de las etiquetas son visibles. Cuando ejecute el código primero, le mostrará el contenido visible y luego las etiquetas ocultas con la ayuda del selector oculto y el método .show().
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script>
$(document).ready(function () {
$("p:hidden").show(5500);
});
</script>
</head>
<body>
<h1>GeeksForGeeks</h1>
<p style="display: none">
It is a computer science portal for geeks.
</p>
<p style="display: none">
You can whatever you want to learn in
the computer science field.
</p>
</body>
</html>
Producción :
Publicación traducida automáticamente
Artículo escrito por bhaluram18 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA