Ejemplos básicos de métodos y efectos de jQuery.
| No. | Método | Concepto | Código | Resultado |
|---|---|---|---|---|
| 1 | hide() | Oculta un elemento HTML. | $("#caja1").hide(); |
Caja 1
|
| 2 | show() | Muestra un elemento oculto. | $("#caja2").show(); |
|
| 3 | toggle() | Alterna entre mostrar y ocultar. | $("#caja3").toggle(); |
Caja 3
|
| 4 | fadeIn() | Hace aparecer un elemento gradualmente. | $("#caja4").fadeIn(); |
|
| 5 | fadeOut() | Hace desaparecer un elemento gradualmente. | $("#caja5").fadeOut(); |
Caja 5
|
| 6 | fadeToggle() | Alterna entre aparecer y desaparecer. | $("#caja6").fadeToggle(); |
Caja 6
|
| 7 | slideDown() | Muestra un elemento con efecto deslizante. | $("#caja7").slideDown(); |
|
| 8 | slideUp() | Oculta un elemento con efecto deslizante. | $("#caja8").slideUp(); |
Caja 8
|
| 9 | slideToggle() | Alterna entre slideUp y slideDown. | $("#caja9").slideToggle(); |
Caja 9
|
| 10 | animate() | Crea animaciones personalizadas. | $("#caja10").animate({width:"200px"}); |
Caja 10
|
| 11 | stop() | Detiene una animación activa. | $("#caja11").stop(); |
Caja 11
|
| 12 | css() | Modifica estilos CSS. | $("#caja12").css("background","purple"); |
Caja 12
|
| 13 | text() | Cambia el texto de un elemento. | $("#caja13").text("Nuevo Texto"); |
Texto
|
| 14 | html() | Inserta contenido HTML. | $("#caja14").html("Hola"); |
Caja 14
|
| 15 | Chaining | Ejecuta varios métodos en una sola línea. | $("#caja15").css("background","black").slideUp(); |
Caja 15
|