Ejemplos de Jquery
Aquí tienes algunos ejemplos de código jQuery. Es importante recordar que jQuery es una librería de JavaScript, por lo que su sintaxis es más corta y optimizada para tareas comunes como la manipulación del DOM, el manejo de eventos y las animaciones.
Para usar jQuery, primero debes incluir la librería en tu archivo HTML, generalmente con una etiqueta <script> que apunte a la CDN de jQuery.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
1. Ocultar y mostrar elementos
Este es un ejemplo clásico. Puedes seleccionar un elemento por su id y ocultarlo o mostrarlo con un solo clic.
HTML
<button id="ocultar">Ocultar texto</button>
<button id="mostrar">Mostrar texto</button>
<p>Este es el texto que vamos a ocultar y mostrar.</p>
jQuery
$(document).ready(function(){
$("#ocultar").click(function(){
$("p").hide();
});
$("#mostrar").click(function(){
$("p").show();
});
});
En este código, $(document).ready() asegura que el código se ejecute solo cuando el documento HTML esté completamente cargado. Los selectores $("#ocultar") y $("#mostrar") seleccionan los botones por su id, y el selector $("p") selecciona todas las etiquetas <p>.
2. Cambiar estilos CSS
Puedes manipular los estilos CSS de cualquier elemento de forma sencilla. Este ejemplo cambia el color de fondo de un elemento al hacer clic en un botón.
HTML
<button id="cambiarColor">Cambiar color</button>
<div id="caja"></div>
jQuery
$(document).ready(function(){
$("#cambiarColor").click(function(){
$("#caja").css("background-color", "blue");
$("#caja").css("width", "100px");
$("#caja").css("height", "100px");
});
});
Con .css(), puedes pasar una propiedad y un valor para modificar el estilo de los elementos seleccionados.
3. Manejo de eventos
jQuery simplifica el manejo de eventos. Aquí, se cambia el texto de un párrafo cuando el cursor del ratón entra y sale de un div.
HTML
<div id="cajaEventos" style="background-color: lightgray; padding: 20px;">
Pasa el ratón por aquí
</div>
<p id="mensaje"></p>
jQuery
$(document).ready(function(){
$("#cajaEventos").mouseenter(function(){
$("#mensaje").text("¡El ratón ha entrado!");
});
$("#cajaEventos").mouseleave(function(){
$("#mensaje").text("El ratón ha salido.");
});
});
Los métodos .mouseenter() y .mouseleave() son equivalentes a los eventos de JavaScript onmouseover y onmouseout, pero con una sintaxis más corta.
4. Animaciones
jQuery facilita la creación de animaciones. Este ejemplo usa .slideToggle() para mostrar u ocultar un panel con un efecto de deslizamiento.
HTML
<button id="toggle">Abrir/Cerrar panel</button>
<div id="panel" style="display: none; background-color: lightblue; padding: 20px;">
Este es un panel deslizante.
</div>
jQuery
$(document).ready(function(){
$("#toggle").click(function(){
$("#panel").slideToggle("slow");
});
});
El método .slideToggle() cambia la visibilidad del elemento. El argumento "slow" especifica la duración de la animación. Otros valores pueden ser "fast" o un número en milisegundos (ej: 400).
