Ejercicios JQuery VI.

1. Realiza una web con el titulo (Ejercicio número 1) y 4 cuadrados adyacentes, al lado uno de otro,(NO ENCIMA, NI DEBAJO, en fila) de 50 x 50, cada uno con un color de fondo distinto. Crea 2 botones, uno izquierda y otro derecha. Cada vez que pulses sobre un botón, los colores se desplazarán al cuadrado de al lado en la dirección que indica el botón.
2. Realiza un formulario, en el que introduzcas tu nombre, apellidos, alias, dos checkboxs en el que preguntes si eres mayor de edad(uno mayor de edad, otro menor de edad), crea también dos radios, uno con la nacionalidad "Española" y otro radio con "otra". Si eliges la opción de mayor de edad y solo si eliges esta opción, tendrá que aparecer otra caja para introducir la edad, si eliges menor de edad, que se muestre un mensaje indicando la situación (“No eres mayor de edad, no puedes continuar”), y no tendrá más opciones, y desaparecerán el resto de elementos del formulario(los radios de nacionalidad) y no podrás enviar, se desactiva el botón de enviar. En los radios buttons, si eliges la opción “otra”, y solo al marcar esta opción, tendrán que aparecer otras cajas para introducir el país, fecha de llegada y fecha de salida del país y otro campo de observaciones donde pueda explicar el motivo de la visita. Realiza un Tip, sobre el campo alias, mostrando el mensaje, “es tu sobrenombre o mote”.
3. Realiza una página que muestre una tabla centrada de 4x9. Los encabezados serán los nombres de las provincias de esta comunidad y las filas localidades de esas provincias.se pide:
   1. Crea un cuadro para introducir la localidad que quieras buscar en la tabla.
   2. Al lado crea el botón oportuno que al pulsar hará que resalte en la tabla la localidad que has introducido anteriormente.
   3. Además aparecerá un texto debajo indicando la provincia a la que pertenece. Si no existiera la localidad aparecerá un mensaje indicando tal situación.
   4. Crea otro cuadro para introducir el estilo que quieras aplicar en la tabla. Por ejemplo, fuente, tamaño de fuente, color fuente, estilo fuente, fondo celda.
   5. Crea 2 botones, uno que ponga celdas y otro cabecera, que al pulsar sobre el que quieras se aplique el estilo introducido anteriormente.

JQuery. Iniciación II

1. Repaso de selectores dinámicos. Realiza una web con tantas etiquetas y elementos necesarios como para que se puedan aplicar sobre cada uno de ellos todos los efecto dinámicos. La página deberá incluir un inputque te permita elegir el elemento al que quieras aplicar el efecto.
Each
2. Realiza una web con 7 elemetos p. Desarrolla un script en jquery que te permita cambiar el fondo de la etiquetas p pares con un color determinado y a las impares con otro color distintos.
3. En una web que contenga, en 10 líneas y en cada linea, el nombre de un color (en inglés), realiza un script que al cargar la página cambien de fondo de la linea con el color que se indica en ella, excepto con el color blanco que no cambiará el fondo. Si se encuentra una linea con la palabra "nada" el ejercicio dejara de cambiar los fondos.
4. Realiza una web que a pulsar sobre un botón muestre un mensaje con cada una de las opciones de la lista. Utiliza $(this).text()
5. Tenemos una lista desordenada con tantas opciones como días tienela semana, y en cada una de ellas la pieza de fruta que tienes que comer. crea un botón a que al pulsar sobre él te muestra el día de la semana , en número y la fruta que tienes que comer. Por ejemplo: El día 1 de la semana debes comer manzana. El día 2 de la semana debes comer pera. Utiliza $.each(lista, function(i, valor) i sería el indice.
6. Crea una página con tantos elementos como creas necesarios. Al cargar la página te tiene que salir un mensaje indicando el número de elementos de cada clase. Utiliza size y length .
7. Crea una página con 2 elementos párrafo. Realiza un jquery que te permita introducir otros elementos p al cargar la página. Utiliza .appendto, .append, .html. ¿Los siguientes métodos hacen lo mismo? .text, .val.
8. Siguiendo con el ejercicio anterior. Realiza un jquery que te permita introducir un título al principio de la página, un subtítulo al comienzo de cada párrafo y un enlace después de cada párrafo, al cargar la página.
9. Tienes una tabla donde los encabezados de las columnas son nº de matricula, nombre, 1º apellido y 2º apellido, habrá tantas filas como compañeros tienes en clase. Introduce 2 botones, con el primero te mostrará cada uno de los encabezados con su posición, con el segundo botón te mostrará el contenido de las celdas y su posición.
10. Aprovechando la tabla anterior pulsa sobre un nuevo botón que te muestre los "perez" que hay y en que posición, fila columna. Utiliza contains(), .parent().index()

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.