| # | Uso / Método | Descripción | Código | Pruébalo aquí |
|---|---|---|---|---|
| 1 | .text() Cambiar texto |
Reemplaza el texto visible de un elemento. No interpreta etiquetas HTML, todo se trata como texto plano. | $("#saludo").text("¡Hola!"); |
Texto original
|
| 2 | .html() Insertar HTML |
Inserta contenido HTML dentro de un elemento. A diferencia de .text(), sí interpreta y renderiza etiquetas HTML. | $("#caja").html("<b>Negrita</b>"); |
Sin formato
|
| 3 | .show() / .hide() Mostrar y ocultar |
.show() hace visible un elemento oculto y .hide() lo oculta. Ambos modifican la propiedad display del CSS. | $("#caja").show();
$("#caja").hide(); |
Caja
|
| 4 | .toggle() Alternar visibilidad |
Alterna automáticamente entre mostrar y ocultar un elemento. Si está visible lo oculta, y si está oculto lo muestra. | $("#div").toggle(); |
¡Aquí estoy! 🎉
|
| 5 | .val() Leer un input |
Obtiene o establece el valor de un campo de formulario como input, select o textarea. Muy usado para leer lo que escribe el usuario. | var v = $("#campo").val(); |
|
| 6 | .append() Agregar elementos |
Inserta nuevo contenido HTML al final de un elemento existente, sin borrar lo que ya hay dentro. | $("#lista").append(
"<li>Nuevo</li>"
); |
|
| 7 | .fadeIn() / .fadeOut() Desvanecer |
.fadeIn() hace aparecer un elemento con una animación de opacidad y .fadeOut() lo desvanece gradualmente hasta ocultarlo. | $("#caja").fadeIn(600);
$("#caja").fadeOut(600); |
|
| 8 | .css() Cambiar estilos |
Modifica una o varias propiedades CSS de un elemento directamente desde JavaScript, sin necesidad de cambiar el archivo CSS. | $("#caja").css(
"background","blue"
); |
Caja
|
| 9 | .addClass() / .removeClass() Clases CSS |
.addClass() agrega una clase CSS a un elemento y .removeClass() la elimina. Útil para cambiar estilos predefinidos de forma dinámica. | $("#txt").addClass("resaltado");
$("#txt").removeClass("resaltado"); |
Texto de ejemplo
|
| 10 | .hover() Evento mouse |
Detecta cuando el mouse entra y sale de un elemento. Recibe dos funciones: la primera se ejecuta al entrar y la segunda al salir. | $("#caja").hover(
function(){ /* entró */ },
function(){ /* salió */ }
); |
Pasa el mouse sobre la caja:
Hover aquí
|
| 11 | .click() Evento clic |
Ejecuta una función cada vez que el usuario hace clic sobre un elemento. Es el evento más común para botones e interacciones. | $("#btn").click(function(){
var n = $("#nombre").val();
alert("Hola " + n);
}); |
|
| 12 | .animate() Animación |
Anima propiedades CSS numéricas de un elemento de forma gradual. Se indica qué propiedad cambiar, el valor final y la duración en milisegundos. | $("#barra").animate(
{width: "100%"}, 1000
); |
|
| 13 | .each() Recorrer elementos |
Itera sobre todos los elementos que coinciden con un selector y ejecuta una función en cada uno. Ideal para aplicar cambios en grupo. | $(".item").each(function(){
$(this).addClass("resaltado");
}); |
Uno
Dos
Tres
Cuatro
|
| 14 | .remove() Eliminar elemento |
Borra completamente un elemento del DOM, incluyendo su contenido y sus eventos asociados. El elemento deja de existir en la página. | $("#elemento").remove(); |
|
| 15 | .keyup() Contador en tiempo real |
Se dispara cada vez que el usuario suelta una tecla dentro de un input. Permite reaccionar al texto en tiempo real mientras se escribe. | $("#campo").keyup(function(){
var n = $(this).val().length;
$("#cont").text(n);
}); |
Caracteres: 0
|