Categoría: jQuery

Después de seleccionar elementos, jQuery ofrece métodos simples para leer o modificar su contenido y apariencia.

text()

text() trabaja con texto plano. No interpreta etiquetas HTML.

$("#mensaje").text("Hola");

También puede leer el valor actual:

const texto = $("#mensaje").text();

html()

html() permite leer o reemplazar el HTML interno de un elemento.

$("#contenedor").html("<strong>Importante</strong>");

No conviene insertar contenido no confiable porque podría introducir código HTML peligroso.

val()

val() obtiene o modifica el valor de campos de formulario.

const nombre = $("#nombre").val();

$("#nombre").val("Ana");

attr()

attr() lee o cambia atributos HTML.

const url = $("a").attr("href");

$("a").attr("title", "Ir al sitio");

prop()

prop() suele usarse para propiedades booleanas de controles, por ejemplo checked o disabled.

$("#acepto").prop("checked", true);

const marcado = $("#acepto").prop("checked");

Clases CSS

$("#panel").addClass("activo");
$("#panel").removeClass("oculto");
$("#panel").toggleClass("destacado");

addClass() agrega, removeClass() elimina y toggleClass() alterna una clase.

hasClass()

Permite comprobar si un elemento tiene una clase determinada.

if ($("#panel").hasClass("activo")) {
    console.log("El panel está activo");
}

css()

css() permite modificar estilos directamente, aunque para cambios complejos suele ser mejor alternar clases CSS.

$("#mensaje").css("color", "red");

append() y prepend()

append() agrega contenido al final y prepend() al principio.

$("#lista").append("<li>Nuevo</li>");
$("#lista").prepend("<li>Primero</li>");

remove()

remove() elimina el elemento seleccionado del DOM.

$(".mensaje-error").remove();

Ejercicio

Creá una tarjeta con título, texto y botón. Al hacer clic, modificá el texto, agregá una clase y cambiá un atributo.

Errores comunes

• usar html() cuando sólo necesitamos texto;
• usar attr() para propiedades booleanas que funcionan mejor con prop();
• aplicar muchos estilos inline en lugar de clases;
• olvidar que val() se usa principalmente con formularios.

---

¿Te sirvió esta guía? ☕

Si este contenido te ayudó a aprender jQuery, podés apoyar a Club Programador. Cada aporte ayuda a mantener el sitio online y a seguir publicando material gratuito.

🇦🇷 Apoyar desde Argentina

☕ Invitame un café con Mercado Pago

🌎 Apoyar desde otro país

☕ Apoyar con PayPal

Seguí aprendiendo jQuery

← Selectores en jQuery: buscar y recorrer elementos del DOM

Eventos en jQuery: click, change, submit, keyup y on() →

jQuery es una biblioteca de JavaScript. No reemplaza al lenguaje: está construida sobre JavaScript y ofrece una sintaxis más corta para tareas frecuentes como seleccionar elementos, escuchar eventos, modificar el DOM o realizar peticiones AJAX.

¿Por qué apareció jQuery?

Durante muchos años los navegadores tenían diferencias importantes entre sí. jQuery ayudó a escribir una sola solución compatible y redujo mucho código repetitivo.

¿Sigue siendo útil?

Hoy JavaScript nativo resolvió muchas necesidades que antes justificaban jQuery, por lo que no es obligatorio en proyectos nuevos. Sin embargo, sigue siendo muy común en sistemas existentes, plugins, paneles administrativos, proyectos Laravel, DataTables y aplicaciones que usan Bootstrap antiguo.

JavaScript y jQuery: una comparación

// JavaScript
document.querySelector("#mensaje").textContent = "Hola";

// jQuery
$("#mensaje").text("Hola");

Ambos ejemplos hacen lo mismo. La diferencia está en la API que usamos para expresarlo.

Cómo agregar jQuery

Podemos descargar la biblioteca o cargarla desde un CDN. Para empezar, podemos incluirla antes de nuestro propio archivo JavaScript:

https://code.jquery.com/jquery-3.7.1.min.js
http://app.js

El orden importa: primero debe cargarse jQuery y después el código que lo utiliza.

El símbolo $

En jQuery, $ es una función principal que usamos para seleccionar elementos y acceder a los métodos de la biblioteca.

const titulo = $("#titulo");

Esperar a que el DOM esté listo

Si nuestro script se carga antes que el contenido HTML, podemos esperar a que el documento esté preparado:

$(document).ready(function () {
    console.log("DOM listo");
});

También existe una forma abreviada:

$(function () {
    console.log("DOM listo");
});

Primer ejemplo

<button id="saludar">Saludar</button>
<p id="mensaje"></p>

$("#saludar").on("click", function () {
    $("#mensaje").text("¡Hola desde jQuery!");
});

Qué está ocurriendo

• $("#saludar") selecciona el botón;
• .on("click", ...) escucha el clic;
• $("#mensaje") selecciona el párrafo;
• .text() cambia su contenido de texto.

Ejercicio

Creá una página con un botón y dos párrafos. Al hacer clic, cambiá el texto de ambos utilizando jQuery.

Errores comunes

• usar jQuery antes de cargar la biblioteca;
• escribir mal un selector;
• confundir jQuery con JavaScript;
• cargar dos versiones distintas sin necesidad.

---

¿Te sirvió esta guía? ☕

Si este contenido te ayudó a aprender jQuery, podés apoyar a Club Programador. Cada aporte ayuda a mantener el sitio online y a seguir publicando material gratuito.

🇦🇷 Apoyar desde Argentina

☕ Invitame un café con Mercado Pago

🌎 Apoyar desde otro país

☕ Apoyar con PayPal

Seguí aprendiendo jQuery

Esta es la primera guía de la ruta de jQuery.

Selectores en jQuery: buscar y recorrer elementos del DOM →

Gran parte del trabajo con jQuery comienza seleccionando uno o más elementos del DOM.

Selector por ID

$("#titulo")

Selecciona el elemento cuyo atributo id sea titulo.

Selector por clase

$(".tarjeta")

Selecciona todos los elementos que tengan la clase tarjeta.

Selector por etiqueta

$("p")

Selecciona todos los párrafos de la página.

jQuery usa selectores CSS

Podemos combinar selectores del mismo modo que en CSS:

$("main .tarjeta")
$("ul > li")
$("input[type='email']")

first(), last() y eq()

Cuando una selección devuelve varios elementos podemos quedarnos con uno en particular.

$("li").first();
$("li").last();
$("li").eq(2);

eq(2) obtiene el tercer elemento porque el índice comienza en 0.

find()

find() busca descendientes dentro de una selección existente.

const panel = $(".panel");

panel.find("button");

parent() y children()

parent() sube al padre directo. children() obtiene los hijos directos.

$(".item").parent();
$(".lista").children();

closest()

closest() busca hacia arriba el ancestro más cercano que coincida con un selector. Es muy útil en eventos.

$(this).closest(".tarjeta");

filter()

filter() reduce una selección existente y conserva sólo los elementos que coinciden con una condición o selector.

$("li").filter(".activo");

length

La propiedad length indica cuántos elementos contiene una selección.

const cantidad = $(".tarjeta").length;

console.log(cantidad);

Ejercicio

Creá una lista con cinco elementos. Seleccioná el primero, el último y todos los que tengan una clase determinada.

Errores comunes

• olvidar # para IDs o . para clases;
• suponer que una selección siempre contiene un solo elemento;
• confundir find() con filter();
• olvidar que eq() usa índices desde 0.

---

¿Te sirvió esta guía? ☕

Si este contenido te ayudó a aprender jQuery, podés apoyar a Club Programador. Cada aporte ayuda a mantener el sitio online y a seguir publicando material gratuito.

🇦🇷 Apoyar desde Argentina

☕ Invitame un café con Mercado Pago

🌎 Apoyar desde otro país

☕ Apoyar con PayPal

Seguí aprendiendo jQuery

← Introducción a jQuery: qué es, para qué sirve y cómo agregarlo a una página

Modificar HTML, texto, atributos y clases con jQuery →