| Ejemplo | Descripción | Código jQuery | Resultado Visual | Instrucciones |
|---|---|---|---|---|
| 1 | css() | $("#caja1").css("color","red"); |
Texto
|
Cambia el color del texto. |
| 2 | hide() | $("#caja2").hide(); |
Ocúltame
|
Oculta el elemento. |
| 3 | show() | $("#caja3").show(); | Muestra el elemento. | |
| 4 | toggle() | $("#caja4").toggle(); |
Alternar
|
Oculta o muestra. |
| 5 | fadeOut() | $("#caja5").fadeOut(); |
FadeOut
|
Desaparece suavemente. |
| 6 | fadeIn() | $("#caja6").fadeIn(); | Aparece suavemente. | |
| 7 | slideUp() | $("#caja7").slideUp(); |
SlideUp
|
Se contrae. |
| 8 | slideDown() | $("#caja8").slideDown(); | Se despliega. | |
| 9 | append() | $("#caja9").append(" Nuevo"); |
Texto
|
Agrega contenido. |
| 10 | html() | $("#caja10").html("<b>Negrita</b>"); |
Original
|
Inserta HTML. |
| 11 | text() | $("#caja11").text("Nuevo texto"); |
Texto viejo
|
Cambia texto. |
| 12 | animate() | $("#caja12").animate({width:'200px'}); |
Animar
|
Modifica ancho. |
| 13 | val() | $("#txt13").val(); | Obtiene valor. | |
| 14 | addClass() | $("#caja14").addClass("resaltar"); |
Resaltar
|
Agrega una clase. |
| 15 | removeClass() | $("#caja15").removeClass("resaltar"); |
Quitar clase
|
Elimina una clase. |