• Cuarzo.dev
  • Posts
  • Aprende jQuery en 15 Minutos: Guía Rápida y Práctica

Aprende jQuery en 15 Minutos: Guía Rápida y Práctica

Domina el uso de jQuery, el framework de JavaScript que simplifica la escritura de scripts, en tan solo 15 minutos con nuestra guía rápida y práctica para programadores.

Author

Kiko Palomares
April 26, 2021 • Lo lees en: 3 minutos

Hoy vamos a aprender cómo usar jQuery de manera rápida y efectiva. Abramos Visual Studio Code y comencemos por lo básico: crear un archivo HTML. A lo largo de este tutorial, integraremos jQuery a nuestro proyecto y exploraremos sus funciones más útiles. ¡Vamos allá!

Instalación de jQuery

El primer paso es incorporar jQuery en tu proyecto. Sigue estos pasos simples para empezar:

  1. Crea tu archivo HTML: Abre Visual Studio Code y crea un nuevo archivo llamado index.html. Inicialízalo con la estructura básica de HTML5.

  2. Incorpora jQuery:

    • Visita jQuery.com y dirígete a la sección de descargas.

    • Encuentra el enlace de "jQuery de producción" y cópialo.

    • Vuelve a tu archivo index.html y añade la siguiente línea en la sección de <head>: 

<script src="URL_AQUI"></script>

Sustituye "URL_AQUI" con la URL que has copiado.

  1. Crea tu archivo JavaScript:

    • Crea un nuevo archivo llamado main.js.

    • Vincula este archivo a tu HTML justo después de la línea de jQuery: 

<script src="main.js"></script>

Uso Básico de jQuery

Con jQuery ya integrado, vamos a explorar cómo utilizarlo efectivamente:

  • Sintaxis básica: La base de jQuery es simple. Utiliza el símbolo $ seguido de un selector entre paréntesis para manipular elementos HTML. Por ejemplo: 

$('h1').hide();

Esto esconde todos los elementos <h1> en tu página.

  • Document Ready: Es crucial que tu código jQuery se ejecute una vez que el documento HTML esté completamente cargado. Utiliza: 

$(document).ready(function() {
    // Tu código aquí
});

O su forma abreviada: 

$(function() {
    // Tu código aquí
});

Manipulación de Elementos y Eventos

jQuery brilla en la manipulación de elementos y manejo de eventos. Aquí algunos ejemplos prácticos:

  • Modificar estilos: 

$('p').css('color', 'red');

Esto cambiará el color de texto de todos los párrafos a rojo.

  • Eventos: Los eventos son fundamentales para interactuar con los usuarios. Por ejemplo, para un botón con id btnClick: 

$('#btnClick').click(function() {
    alert('¡Hola!');
});

Efectos y Animaciones

jQuery también ofrece una variedad de efectos y animaciones que puedes aplicar fácilmente:

  • Fade In/Out: 

$('#elemento').fadeOut();
$('#elemento').fadeIn();

  • Slide Up/Down: 

$('#elemento').slideUp();
$('#elemento').slideDown();

Conclusión

¡Y eso es todo por ahora! Con estos pasos básicos, puedes comenzar a integrar jQuery en tus proyectos y aprovechar su poderosa funcionalidad para manipular el DOM y manejar eventos. jQuery sigue siendo una herramienta valiosa para los desarrolladores que desean escribir código JavaScript de manera rápida y eficiente.

Suscríbete a nuestra newsletter para seguir aprendiendo cosas nuevas de desarrollo cada día, ¡es gratis!

Reply

or to participate.