Páginas

martes, 28 de abril de 2020

JQuery. Iniciación I.

  1. Sobre un pequeño documento web que incluya dos enlaces, realiza con jquery un script que te muestre un mensaje indicando que has pulsado sobre el enlace y que te llevará a esa dirección.
  2. Modifica el script anterior para evitar el comportamiento por defecto de los enlaces.
  3. Sobre selectores. Realiza un script en jquery que al cargar la página te modifique el texto de un elemento html con class, de un elemento con id y de cualquier otro elemento que quieras, por otro texto nuevo.
  4. Tienes una web con dos elementos div's, sin estilos asociados. Además habrá una clase con un estilo de tamaño y color de fuente determinado. Realiza un script que al cargar la página se añada la clase a cada uno de los elementos div.
  5. Modifica el ejercicio anterior para que se añada la clase cuando posiciones con el ratón sobre un enlace que has creado y cuando salgas del enlace con el ratón vuelva su estado original.
  6. Modifica el ejercicio anterior para que al pinchar sobre el enlace no se dirija a la url que contiene.
  7. Realiza una página con 2 capas (div's) la primera capa estará visible y la segunda inicialmente oculta. Realiza un script que te permita visualizar u ocultar la segunda capa oculta en función de que nos coloquemos o no, con el ratón encima de la capa visible
  8. Realiza un pequeño formulario en el que tengas que introducir tu nombre y activar un checkbox que te pregunta por tu mayoría de edad, si así fuera que te muestre, que aparezca otros elementos para introducir tus apellidos y tu edad.
  9. Realiza un script en jquery que al cargar la página te alinee el texto de un elemento div con class a la derecha, de otro elemento div con id te ponga un fondo verde y de cualquier otro elemento que quieras, te cambie el tamaño y el color del texto.
  10. Realiza un script en jquery que al pulsar en un botón te permita ocultar una lista y al pulsar en otro te vuelva mostrar la lista.
  11. Realiza un script en jquery que me oculte y me muestre un elemento div de mi web, con efectos, al hacer clic sobre dos enlaces, uno para ocultar y otro paras mostrar. Utiliza la función hide con el parámetro slow y el método show con un retraso de 4000 milisegundos.
  12. Realiza una web que tenga 4 cuadrados de 80 px de lado, con un color de fondo distinto cada uno y los 4 ocultos. Consiste en demostrar el funcionamiento de fadeIn() y show con distintos parámetros. Crea un botón para que al pulsar se muestren las 4 cajas, cada una con uno de estos efectos: .fadeIn(); .fadeIn("slow"); .fadeIn(3000); y show(3000);
  13. Igual que en el caso anterior, tenemos una web que tenga 4 cuadrados de 80 px de lado, con un color de fondo distinto cada uno y los 4 ocultos. Consiste en demostrar el funcionamiento de fadeOut() y hide con distintos parámetros. Crea un botón para que al pulsar se oculten las 4 cajas, cada una con uno de estos efectos: .fadeOut(); .fadeOut("slow"); .fadeOut(4000); y hide("slow");
  14. Realiza un script en jquery que pruebe una secuencias de funciones. Realiza una web similar a la que se indica. Se desea ocultar el cuadro, moverlo a otra posición y allí mostrarlo con otro efecto. fadeOut(3000); css({top: 400, left:250}); fadeIn(3000);
  15. Igual que el ejercicio anterior, pero esta vez utilizando la pila de funciones, callback. Sustituye el texto de la parte izquierda por 2 botones. El primero te ocultará el cuadro central y una vez acabada la acción que te muestre un mensaje indicado la finalización del efecto.El segundo botón te mostrará el cuadro anterior y al acabar la acción que te muestre un mensaje indicando que ya ha acabo de mostrarse. Utiliza .fadeIn(4000) y .fadeOut(4000)
  16. Utilizando callback y efectos dinámicos, crea una web con 3 rectángulos de distintos colores, rojo, verde y azul. Al pulsar en el botón oportuno se deberá ocultar el rectángulo rojo utilizando el efecto "slideUp slow", inmediatamente deberá aparecer un mensaje comunicando la finalización del efecto. Al pulsar en otro botón se deberá mostrar el rectángulo rojo utilizando el efecto "slideDown fast", inmediatamente deberá aparecer un mensaje comunicando la finalización del efecto. Haz otro botón para poder aplicar sobre el rectángulo rojo el efecto "slideToggle slow" recuerda encadenar un mensaje a la finalización de los efectos anteriores. Crea un nuevo botón para utilizar el efecto animate de tal forma que me desplaze hacia abajo y a la derecha el rectángulo verde 90px y disminuya la opacidad medio punto. Crea 2 botones más para aplicar fadeIn, 4000 y fadeOut, 4000 sobre el último rectángulo. Recuerda que a la finalización de cada efecto se debe encadenar un mensaje indicando la finalización del efecto.

No hay comentarios:

Publicar un comentario