Ejercicios JQuery

EJERCICIOS JQUERY 
 

 
 
1. Crear un documento HTML con un encabezado, dos párrafos y un botón. Al pulsar el botón 
mediante el selector $(“*”) se debe ocultar todo. Método hide() 
 
2. En el mismo documento HTML anterior. Al pulsar el botón debe ocultarse dicho botón. 
 
3. En el mismo documento HTML anterior. Suponemos que el encabezado y el primer párrafo tienen el atributo class=”intro”.Deberás ocultar al clickar el botón, dicho párrafo. 
 
4. Realiza el mismo código que en el script 3 pero ahora selecciona dicho párrafo mediante 
otro selector. p:first 
 
5. Selecciona el primer elemento de la primera lista y oculta dicho elemento. 
 
Lista 1: 
● Tortilla 
● Jamón 
● Queso 
Lista 2: 
■ Coca Cola 
■ Leche 
■ Té 
 
6. Oculta los primeros elementos de la lista del script 5. 
 7. Crea un documento con un par de enlaces mediante el atributo href y oculta ambos 
1 

enlaces.  
 
8. Crea un documento con dos enlaces y dos botones. Uno se tiene que abrir en una nueva 
ventana (target="_blank") y el otro no. Cada botón debe ocultar uno de los enlaces en función 
de su atributo target. 
 
9. Crea un documento con un botón que se oculte el botón  al clickarlo. 
 10. Crear un documento con una tabla. Poner el fondo de las filas pares en rojo (usar el 
método .css("background­color","red"). A continuación poner el fondo de las filas impares en 
verde ..css("background­color","green") 
 
11. Crear un documento con un párrafo, el cuál se oculte al clicar dos veces sobre él. 
 
12. Crear un documento con un párrafo tal que aparezca un aviso alert() cuando se presiona el botón izquierdo del ratón. 
13. Utiliza el método hover() para lanzar un mensaje cuando nos posicionamos sobre un 
párrafo y otro cuando salgamos de él. 
 
14.  Utiliza los métodos focus() y blur() para cambiar el color de dos cuadros de texto cuando 
posicionamos el foco y cuando lo retiramos. 
 
15. Crea un documento con dos tag div, dentro de cada uno de los cuales debe haber un botón para esconder dichos tag. 
 

 
 
 
2 

16. Crea un documento con un botón, tal que al clikcarlo oculte un párrafo con velocidad 
rápida. 
 
17. Crea un documento con un botón, tal que al clickarlo como gestor de vento, agrege la 
opacidad de tres elementos div mediante el método fadeIn(). El primer fadeIn() ejecútalo sin 
parámetros, el segundo de manera lenta y el tercero en tres milisegundos.  
 18. Crea un documento con un botón, tal que al clickarlo nos quite la opacidad de tres 
elementos div mediante el método fadeOut(). El primer fadeOut() ejecútalo sin parámetros, el 
segundo de manera lenta y el tercero en tres milisegundos.  
 
19. Crea un documento con un botón, tal que al hacer clic,  agrege o quite la opacidad de tres elementos div mediante el método fadeToggle(). El primer fadeToggle() ejecútalo sin 
parámetros, el segundo de manera lenta y el tercero en tres milisegundos.  
 
20. Crea un documento con un botón, tal que al hacer clic, agrege o quite la opacidad de tres 
elementos div mediante el método fadeTo(). El primer fadeTo() ejecútalo en modo lento con 
una opacidad de 0,15, el segundo en modo lento con una opacidad de 0,4 y el tercero, en 
modo lento con una opacidad de 0,7. 
 21. Crea un documento con dos capas, tal que al clickar sobre la primera se despliege hacia 
abajo la segunda mediante el método slideDown(). 
 
22. Crea un documento con dos capas, tal que al clickar sobre la primera se despliege hacia 
arriba la segunda mediante el método slideUp() 
 
23. Crea un documento con dos capas, tal que al clickar sobre la primera fija se despliegue hacia arriba o abajo la segundo. utiliza el método slideToggle(). 
 
24. Crea un programa tal que al clickar en un botón anime un cuadrado moviéndolo a la 
derecha 250 px y lo agrande 150 px. 
 
25. Crea un programa, tal que al clickar en un botón se muestre y se oculte la altura de un 
cuadrado. 
 
26. Crear un programa, tal que al clickar en un botón se mueva un cuadrado 100 px a la ...