jQuery tiene muchos métodos útiles para hacer el trabajo fácilmente. En este artículo, discutiremos uno de ellos, que es el método hide() . Podemos usar este método para varios propósitos en nuestra página web y obtener un resultado eficiente.
El primer paso será crear un archivo HTML y vincular el archivo de la biblioteca jQuery a través de CDN.
Enlace CDN de jQuery:
<guión src=”https://code.jquery.com/jquery-3.6.0.min.js” integridad=”sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=” crossorigin=”anónimo”></script>
Método jQuery hide(): este método se utiliza para ocultar los elementos web.
Ejemplo 1: Cree un archivo HTML y agréguele el siguiente código.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- jQuery CDN link. -->
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous">
</script>
</head>
<body>
<button id="btn">Hide</button>
<p><b>GeeksforGeeks</b></p>
<!-- Using hide() method to hide <p/> element. -->
<script>
$(document).ready(function () {
$("#btn").click(function () {
$("p").hide();
});
});
</script>
</body>
</html>
Producción:
Ocultar elemento p
Ejemplo 2: podemos usar el método hide() para ocultar una imagen.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- jQuery CDN link. -->
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous">
</script>
</head>
<body>
<img
id="image"
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210805112556/gfgImage.png"
alt=""/>
<button id="btn"
style="padding-left: 10px;
margin-left: 30px">
Hide
</button>
<!-- Using hide() method to hide an image.-->
<script>
$(document).ready(function () {
$("#btn").click(function () {
$("#image").hide();
});
});
</script>
</body>
</html>
Producción:
Ocultar imagen
Ejemplo 3: El método hide() también se puede usar para ocultar cualquier forma geométrica.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- jQuery CDN link. -->
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous">
</script>
</head>
<body>
<div id="shape"
style="height:100px; width:100px;
background-color:green;
border-radius:00%;margin:10px;">
</div>
<button id="btn" style="margin:10px;">Hide Shape</button>
<!-- Using hide() method to hide a shape. -->
<script>
$(document).ready(function () {
$("#btn").click(function () {
$("#shape").hide();
});
});
</script>
</body>
</html>
Producción:
Ocultar forma