El selector oculto selecciona elementos ocultos para trabajar .
Sintaxis:
$(":hidden")
- Los elementos ocultos son elementos que son:
- Establecer para mostrar: ninguno
- Elementos de formulario con type=”hidden”
- Ancho y alto establecidos en 0
- Un elemento principal oculto (esto también oculta elementos secundarios)
Ejemplo 1:
<!DOCTYPE html> <html> <head> <!-- Jquery CDN --> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <!-- Jquery demonstration script --> <script> $(document).ready(function() { $("h1:hidden").show(5000); }); </script> <!-- Script ends here --> </head> <body> <center> <h1 style="display:none;"> GeeksforGeeks </h1> <p> Hidden attribute example </p> <p> The above line will show up gradually. </p> </center> </body> </html>
Salida:
Antes de la Animación:
Después de la Animación:
Ejemplo-2:
<!doctype html> <html lang="en"> <head> <title> Complex Animation Using Hidden Attribute </title> <style> h1 { color: green; } div { width: 70px; height: 40px; background: green; margin: 5px; float: left; } span { display: block; clear: left; color: black; } .starthidden { display: none; } </style> <script src= "https://code.jquery.com/jquery-1.10.2.js"> </script> </head> <body> <center> <h1>GeeksforGeeks</h1> </center> <span></span> <div></div> <div style="display:none;"> Hidden element </div> <div class="starthidden"> Hidden element2 </div> <div></div> <div style="display:none;"> Hidden element </div> <div class="starthidden"> Hidden element2 </div> <div></div> <form> <input type="hidden"> <input type="hidden"> <input type="hidden"> </form> <span></span> <script> var hiddenElements = $("body").find(":hidden").not("script"); $("span:first").text("We have found " + hiddenElements.length + " hidden elements total."); $("div:hidden").show(1000); $("span:last").text("We have found " + $("input:hidden").length + " hidden inputs."); </script> </body> </html>
Salida:
Antes de la Animación:
Después de la Animación:
Nota: este selector no funcionará en elementos con visibilidad: oculto .
Referencias: https://api.jquery.com/hidden-selector/
Publicación traducida automáticamente
Artículo escrito por iamshrikantjha y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA