Tabla Dinámica de Ejemplos jQuery

# Función Descripción Código Resultado
1 hide() Oculta un elemento HTML de forma inmediata cambiando su propiedad de visualización. Es útil para esconder información que no se desea mostrar temporalmente al usuario.
$("#t1").hide();

Texto Visible

2 show() Muestra un elemento que previamente estaba oculto. Permite volver a visualizar contenido sin necesidad de recargar la página.
$("#t2").show();
3 toggle() Alterna entre mostrar y ocultar un elemento. Si está visible lo oculta, y si está oculto lo muestra.
$("#t3").toggle();

Toggle

4 fadeOut() Oculta un elemento aplicando un efecto gradual de transparencia hasta desaparecer completamente.
$("#c4").fadeOut();
Caja
5 fadeIn() Muestra un elemento oculto mediante un efecto de aparición suave, aumentando gradualmente su opacidad.
$("#c5").fadeIn();
6 fadeToggle() Combina las funciones fadeIn() y fadeOut(). Dependiendo del estado actual del elemento, lo muestra o lo oculta con una transición suave.
$("#c6").fadeToggle();
Caja
7 slideUp() Oculta un elemento mediante una animación de deslizamiento hacia arriba, reduciendo progresivamente su altura.
$("#c7").slideUp();
Panel
8 slideDown() Muestra un elemento mediante una animación de deslizamiento hacia abajo, aumentando gradualmente su altura.
$("#c8").slideDown();
9 slideToggle() Alterna entre slideUp() y slideDown(), permitiendo mostrar u ocultar contenido con efecto de deslizamiento.
$("#c9").slideToggle();
Panel
10 css() Permite modificar dinámicamente las propiedades CSS de uno o varios elementos HTML, como colores, tamaños, márgenes y fuentes.
$("#c10").css("color","red");

Cambiar color

11 html() Obtiene o modifica el contenido HTML interno de un elemento, permitiendo insertar etiquetas HTML completas.
$("#c11").html(...);

Texto Original

12 append() Agrega nuevo contenido al final de un elemento existente sin eliminar el contenido anterior. Es muy utilizado para listas dinámicas.
$("#lista").append(...);
  • Elemento 1
13 remove() Elimina completamente un elemento del DOM junto con su contenido y eventos asociados.
$("#c13").remove();

Eliminarme

14 addClass() Agrega una o más clases CSS a un elemento, facilitando la aplicación de estilos o efectos visuales definidos previamente.
$("#c14").addClass(...);

Agregar estilo

15 animate() Crea animaciones personalizadas modificando gradualmente propiedades CSS como posición, tamaño, opacidad o márgenes.
$("#c15").animate(...);
Mover