Introducción a jQuery: Manipulación y Eventos

jQuery es una biblioteca de JavaScript ligera que simplifica enormemente la programación con JavaScript, siguiendo el principio de "escribir menos, hacer más".

Características Principales de jQuery

La biblioteca jQuery ofrece un conjunto de funcionalidades para:

Seleccionar elementos HTML.
Manipular elementos HTML.
Gestionra estilos CSS.
Manejar eventos del DOM.
Crear efectos y animaciones visuales.
Navegar y modificar la estructura del DOM.
Realizar peticiones AJAX.
Utilizar funciones de utilidad diversas.

Integración de jQuery

Para utilizar jQuery en tu proyecto, puedes descargarlo e incluirlo localmente o utilizar una Red de Distribución de Contenidos (CDN).

Inclusión Local:


<head>
  <script src="ruta/a/jquery.min.js"></script>
</head>

Uso de CDN (Ejemplos):

Google CDN:


<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>

Microsoft CDN:


<head>
  <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.6.0.min.js"></script>
</head>

Ventaja de usar CDN: Los usuarios que hayan visitado otros sitios que utilizan el mismo CDN de jQuery probablemente ya tengan la biblioteca en su caché, lo que acelera la carga de tu página. Además, los CDN suelen servir los archivos desde servidores geográficamente cercanos al usuario.

Sintaxis Fundamental de jQuery

La estructura básica de una sentencia jQuery es:


$(selector).accion();

$: Es un alias para la función jQuery.
selector: Identifica los elementos HTML sobre los que se va a operar (similar a los selectores CSS).
accion(): Es el método que se ejecuta sobre los elementos seleccionados.

Función de Documento Listo (Document Ready)

Para asegurar que el código jQuery se ejecute solo después de que el DOM esté completamente cargado, se utiliza la función $(document).ready():


$(document).ready(function() {
  // Aquí va tu código jQuery
});

Existen sintaxis abreviadas:


$(function() {
  // Código jQuery aquí
});

Selectores en jQuery

jQuery utiliza selectores similares a los de CSS y XPath para encontrar elementos:

Selectores de Elementos:

$("p"): Selecciona todos los elementos <p>.
$("p.clase"): Selecciona todos los elementos <p> con la clase especificada.
$("p#idUnico"): Selecciona el elemento <p> con el ID especificado.

Selectores de Atributos:

$("[href]"): Selecciona todos los elementos con el atributo href.
$("[href='#']"): Selecciona elementos cuyo atributo href es igual a '#'.
$("[href!='#'"): Selecciona elementos cuyo atributo href no es igual a '#'.
$("[href$='.jpg']"): Selecciona elementos cuyo atributo href termina con '.jpg'.

Selectores CSS con jQuery:

Se pueden aplicar estilos directamente:


$("p").css("background-color", "red"); // Cambia el fondo de todos los párrafos a rojo.

Eventos en jQuery

jQuery facilita la gestión de eventos del usuario y del navegador.

Manejo de Eventos:

Los manejadores de eventos son funciones que se ejecutan cuando ocurre un evento específico.

Método `.ready()`:

Se dispara cuando el DOM está listo. Es el lugar recomendado para colocar el código jQuery.

Método `.bind()`:

Adjunta uno o más manejadores de eventos a los elementos seleccionados.


$("button").bind("click", function() {
  $("p").slideToggle(); // Alterna la visibilidad de los párrafos al hacer clic en un botón.
});

Método `.live()` (Obsoleto en versiones recientes, usar .on()):

Similar a .bind(), pero aplicable también a elementos que se añaden dinámicamente después de la carga inicial.


// Ejemplo conceptual de .live()
$("button").live("click", function() {
  $("p").slideToggle();
});

Método `.blur()`:

Se ejecuta cuando un elemento pierde el foco.


$("input").blur(function() {
  $(this).css("background-color", "#D6D6FF"); // Cambia el color de fondo al perder el foco.
});

Método `.focus()`:

Se ejecuta cuando un elemento gana el foco.


$("input").focus(function() {
  $(this).css("background-color", "#FFFFCC"); // Cambia el color de fondo al obtener el foco.
});

Método `.change()`:

Se dispara cuando el valor de un elemento (input, select, textarea) cambia.


$(".campo").change(function() {
  $(this).css("background-color", "#FFFFCC"); // Cambia el color si el campo de texto cambia.
});

Método `.click()`:

Se ejecuta al hacer clic sobre un elemento.


$("button").click(function() {
  $("p").slideToggle(); // Oculta o muestra párrafos al hacer clic.
});

Método `.dblclick()`:

Se ejecuta al hacer doble clic sobre un elemento.


$("button").dblclick(function() {
  $("p").slideToggle(); // Oculta o muestra párrafos al hacer doble clic.
});

Método `.delegate()` (Obsoleto en versiones recientes, usar .on()):

Permite adjuntar manejadores de eventos a elementos hijos específicos dentro de un contenedor.


// Ejemplo conceptual de .delegate()
$("div").delegate("button", "click", function() {
  $("p").slideToggle();
});

Métodos de Teclado (`.keydown()`, `.keyup()`, `.keypress()`):

Se activan cuando se presiona o suelta una tecla.


$("input").keydown(function() {
  $(this).css("background-color", "#FFFFCC"); // Cambia color al presionar tecla.
});

$("input").keyup(function() {
  $(this).css("background-color", "#D6D6FF"); // Cambia color al soltar tecla.
});

Efectos Visuales en jQuery

Ocultar y Mostrar (`.hide()`, `.show()`):

Permiten controlar la visibilidad de los elementos.


$("#ocultarBtn").click(function() {
  $("p").hide(1000); // Oculta en 1 segundo.
});

$("#mostrarBtn").click(function() {
  $("p").show(); // Muestra instantáneamente.
});

Los parámetros opcionales speed ("slow", "fast", o milisegundos) y callback (función a ejecutar al finalizar) pueden ser utilizados.

Efectos de Fade (`.fadeIn()`, `.fadeOut()`, `.fadeToggle()`, `.fadeTo()`):

Controlan la transparencia de los elementos para crear efectos de aparición y desaparición gradual.


// Ejemplo de fadeIn
$("#btnFadeIn").click(function() {
  $("#elemento").fadeIn("slow");
});

// Ejemplo de fadeOut
$("#btnFadeOut").click(function() {
  $("#elemento").fadeOut(2000); // Desvanece en 2 segundos.
});

// Ejemplo de fadeToggle
$("#btnFadeToggle").click(function() {
  $("#elemento").fadeToggle(1500); // Alterna entre fade in y fade out.
});

// Ejemplo de fadeTo
$("#btnFadeTo").click(function() {
  $("#elemento").fadeTo("fast", 0.5); // Ajusta la opacidad a 0.5.
});

Efectos de Deslizamiento (`.slideDown()`, `.slideUp()`, `.slideToggle()`):

Animan la altura de los elementos para deslizarlos hacia arriba o hacia abajo.


// Ejemplo de slideToggle
$("#btnSlideToggle").click(function() {
  $("#panel").slideToggle("slow"); // Alterna el deslizamiento.
});

Animación Personalizada (`.animate()`):

Permite crear animaciones personalizadas especificando propiedades CSS.


$("button").click(function() {
  $("div").animate({
    left: '250px',      // Mueve 250px a la izquierda.
    opacity: '0.5',     // Reduce la opacidad.
    height: '150px',    // Cambia la altura.
    width: '150px'      // Cambia el ancho.
  }, 1000); // Duración de 1 segundo.
});

Se pueden usar valores relativos (+=, -=) y palabras clave como "show", "hide", "toggle". Para animaciones de color, se necesita un plugin adicional.

Detener Animaciones (`.stop()`)

Permite detener una animación en curso.


// Detiene la animación actual y permite que las siguientes en la cola se ejecuten.
$("selector").stop();

// Detiene todas las animaciones y completa la actual inmediatamente.
$("selector").stop(true, true);

Funciones de Callback

Son funciones que se ejecutan después de que una animación o una acción ha finalizado.


$("p").click(function() {
  $(this).hide(2000, function() {
    alert("La animación de ocultar ha terminado.");
  });
});

Encadenamiento (Chaining)

Permite ejecutar múltiples métodos jQuery en el mismo elemento de forma consecutiva, mejorando la legibilidad y eficiencia.


$("#miElemento")
  .css("color", "blue")
  .slideUp(1000)
  .slideDown(1000);

Etiquetas: JavaScript jQuery DOM eventos animaciones

Publicado el 6-10 20:08

Friki Work

Introducción a jQuery: Manipulación y Eventos

Características Principales de jQuery

Integración de jQuery

Inclusión Local:

Uso de CDN (Ejemplos):

Sintaxis Fundamental de jQuery

Función de Documento Listo (Document Ready)

Selectores en jQuery

Selectores de Elementos:

Selectores de Atributos:

Selectores CSS con jQuery:

Eventos en jQuery

Manejo de Eventos:

Método `.ready()`:

Método `.bind()`:

Método `.live()` (Obsoleto en versiones recientes, usar .on()):

Método `.blur()`:

Método `.focus()`:

Método `.change()`:

Método `.click()`:

Método `.dblclick()`:

Método `.delegate()` (Obsoleto en versiones recientes, usar .on()):

Métodos de Teclado (`.keydown()`, `.keyup()`, `.keypress()`):

Efectos Visuales en jQuery

Ocultar y Mostrar (`.hide()`, `.show()`):

Efectos de Fade (`.fadeIn()`, `.fadeOut()`, `.fadeToggle()`, `.fadeTo()`):

Efectos de Deslizamiento (`.slideDown()`, `.slideUp()`, `.slideToggle()`):

Animación Personalizada (`.animate()`):

Detener Animaciones (`.stop()`)

Funciones de Callback

Encadenamiento (Chaining)

Etiquetas populares

Friki Work

Introducción a jQuery: Manipulación y Eventos

Características Principales de jQuery

Integración de jQuery

Inclusión Local:

Uso de CDN (Ejemplos):

Sintaxis Fundamental de jQuery

Función de Documento Listo (Document Ready)

Selectores en jQuery

Selectores de Elementos:

Selectores de Atributos:

Selectores CSS con jQuery:

Eventos en jQuery

Manejo de Eventos:

Método .ready():

Método .bind():

Método .live() (Obsoleto en versiones recientes, usar .on()):

Método .blur():

Método .focus():

Método .change():

Método .click():

Método .dblclick():

Método .delegate() (Obsoleto en versiones recientes, usar .on()):

Métodos de Teclado (.keydown(), .keyup(), .keypress()):

Efectos Visuales en jQuery

Ocultar y Mostrar (.hide(), .show()):

Efectos de Fade (.fadeIn(), .fadeOut(), .fadeToggle(), .fadeTo()):

Efectos de Deslizamiento (.slideDown(), .slideUp(), .slideToggle()):

Animación Personalizada (.animate()):

Detener Animaciones (.stop())

Funciones de Callback

Encadenamiento (Chaining)

Etiquetas populares

Método `.ready()`:

Método `.bind()`:

Método `.live()` (Obsoleto en versiones recientes, usar .on()):

Método `.blur()`:

Método `.focus()`:

Método `.change()`:

Método `.click()`:

Método `.dblclick()`:

Método `.delegate()` (Obsoleto en versiones recientes, usar .on()):

Métodos de Teclado (`.keydown()`, `.keyup()`, `.keypress()`):

Ocultar y Mostrar (`.hide()`, `.show()`):

Efectos de Fade (`.fadeIn()`, `.fadeOut()`, `.fadeToggle()`, `.fadeTo()`):

Efectos de Deslizamiento (`.slideDown()`, `.slideUp()`, `.slideToggle()`):

Animación Personalizada (`.animate()`):

Detener Animaciones (`.stop()`)