6to Computación "A" - Promoción 2026

Guía de Aprendizaje 3
Estructura de Datos

Demostración de las interacciones de cada botón JQuery

01 — Cambio de texto y color

6to Computación "A"

02 — Animación de aumento y cambio de color
03 — Hide / Show
04 — Contador de clics
Clics: 0
05 — Cambiar imagen
06 — Cambiar tamaño de la fuente

Spider-Man 3

08 — FadeOut / FadeIn
09 — FadeTo con opacidad

Solo leveling

10 — SlideDown

Jujutsu Kaisen

11 — Mover imagen con posición
12 — Agrandar imagén y botón de stop()
13 — Añadir nueva fila a la tabla
Título Autor o ilustrador
One Punch Man Yusuke Murata
Chainsaw Man Tatsuki Fujimoto
14 — Ocultar elemento y ventana emergente

Bleach

15 — Cambiar color a botón

Tabla de los 15 elementos JQuery

# Título Código jQuery Descripción Resultado Visual
1 Cambio de texto y color $("#txt1").text("Promo 2026").css("color","blue"); Cuando el usuario de clic en el botón, el párrafo cambiará de texto y de color naranja Promo 2026
2 Animación de aumento y cambio de color $("#div1").animate({width:"500px"}) .css("background-color","red"); Cuando el usuario de clic en el botón, aumentará el ancho del div y cambiará el color a un fondo rojo.
3 Hide() / Show() $("#img1").hide(3000); $("#img1").show(3000); Cuando el usuario de clic en el botón, ocultará la imagen gradualmente y luego la mostrará de nuevo.
4 Contador de clics n++; $("#spn1").text("Clics: " + n); Cuando el usuario de clic en el botón, incrementará un contador y actualizará el conteo de los clics, mostrando el total de clics que ha realizado. Clics: 5
5 Cambiar imagen $("#img2") .attr("src","nueva_url.jpg"); Cuando el usuario de clic en el botón, reemplazará la imagen actual con una nueva.
6 Cambiar tamaño de la fuente $("#h3_1").css("font-size","30px"); Cuando el usuario de clic en el botón, aumentará el tamaño del texto del h3 a 30px, utilizando el atributo css(). Spider-Man 3
7 Convertir a enlace $("#a1").attr("href","url") .attr("target","_blank") .text("Spider-Man 2") .css("color","red"); Cuando el usuario de clic en el botón, convertirá la etiqueta "a" a un link funcional con nuevo texto y color. Marvel's Spider-Man 2
8 FadeOut() / FadeIn() $("#img3").fadeOut(1200) .fadeIn(1200); Cuando el usuario de clic en el botón, desvanecerá la imagen y la volverá a mostrar con efecto fade.
9 FadeTo con opacidad $("#h1_1").fadeTo("slow", 0.5); Cuando el usuario de clic en el botón, reducirá la opacidad de la etiqueta "h1" a un 50%, de manera lenta. Solo leveling
10 SlideDown() $("#h2_1").slideDown("slow"); Cuando el usuario de clic en el botón, mostrará la etiqueta "h2" que estaba oculto con una animación de deslizamiento hacia abajo. ↓ Desliza hacia abajo
11 Mover imagen con posición $("#img4").animate({left:"400px"}); Cuando el usuario de clic en el botón, moverá la imagen hacia la derecha a una cierta posición. → 400px hacia la derecha
12 Agrandar imagén y botón de stop() $("#img5").animate({height:"400px", width:"400px"},3000); $("#img5").stop(); Cuando el usuario de clic en el botón, agrandará la imagen, pero con el botón de "stop", podrá detener el proceso.
13 Añadir nueva fila a la tabla $("#tbl1").append("<tr><td>Saúl</td><td>18</td></tr>"); Cuando el usuario le de clic al botón, añadirá una nueva fila al final del tbody de la tabla con datos predeterminados. + nueva fila
14 Ocultar elemento y ventana emergente $("#txt2").hide(); alert("El párrafo será ocultado"); Cuando el usuario de clic al botón, ocultará el párrafo y mostrará una ventana emergente "alert()" al usuario, para indicarle que el párrafo ha sido ocultado. Texto oculto
15 Cambiar color a botón $(this).css("background-color","red"); Cuando el usuario le de clic al botón, cambiará el color del botón a sí mismo cuando haya sido presionado.