Usuario:ManuelRomero/JavaScript/jquery/ejemplos
De WikiEducator
< Usuario:ManuelRomero | JavaScript | jquery
LENGUAJE JAVASCRIPT: JavaScript un lenguaje de programación web
Programación web al lado del cliente
JavaScript Un lenguaje de script en el cliente
Contenido
Juego de las parejas
|
| ; Edita el fichero ejercicio1.html. Al hacer clic en el botón, el párrafo debe desaparecer
|
- ejercicio1.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ejercicio 1 - jQuery</title> <style> button{padding: 12px;} </style> </head> <body> <p> Este es nuestro primer ejercicio de jQuery. Al pulsar el botón debemos esconder el párrafo.<br/> ¡No te olvides de enlazar la librería de jQuery para poder utilizar jQuery! </p> <button>Pulsa aquí</button> </body> </html>
| ;Continuamos con el ejercicio anterior: Al hacer clic en el botón, el párrafo debe desaparecer. Pero si volvemos a pulsar, debe aparecer de nuevo.
|
| ;Edita el fichero ejercicio3.html. Al hacer clic en el botón, el primer párrafo debe desaparecer. Pero si volvemos a pulsar, debe aparecer de nuevo.
|
- ejercicio1¡3.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ejercicio 3 - jQuery</title> <style> button { padding: 12px; } </style> </head> <body> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi in turpis sem, eu suscipit urna. Vestibulum odio purus, semper vitae interdum non, placerat sit amet nunc. Ut scelerisque, lacus a laoreet blandit, lectus libero placerat libero, eget volutpat turpis tellus tincidunt tellus. Suspendisse imperdiet fermentum purus, et fringilla est congue ac. Morbi enim ante, consequat eu tempus a, pulvinar vitae felis. Vestibulum et sapien lectus. Curabitur odio ligula, gravida quis tincidunt ut, ullamcorper nec metus. Duis non enim ante, non pharetra nibh. Integer tellus lectus, condimentum eget bibendum vel, posuere consequat eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p> <p>Duis id justo quis tortor posuere auctor sit amet id felis. Proin mattis vulputate faucibus. Maecenas eget gravida leo. Curabitur imperdiet nulla ac nisi pretium fermentum. Fusce pulvinar aliquet dapibus. Nulla condimentum aliquet diam, non lobortis tortor condimentum ornare. Sed justo nisl, viverra mollis commodo a, ultricies in turpis. Sed risus est, scelerisque eget pretium quis, pellentesque eget leo. Nullam erat ligula, suscipit ac egestas vitae, accumsan eget dolor. Mauris lacus turpis, sollicitudin nec tincidunt at, iaculis non dolor. Quisque diam est, mollis ac blandit hendrerit, mollis ut metus. Vestibulum ligula massa, porttitor et elementum nec, vehicula et tortor. Quisque vestibulum porttitor hendrerit. Morbi mollis massa non felis hendrerit a ornare enim posuere. Praesent sit amet dui viverra eros vulputate congue eget nec leo.</p> <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam vulputate tincidunt ipsum, vitae fringilla libero rhoncus eu. Mauris quis est a nulla mollis iaculis a nec nibh. Fusce lorem est, aliquet eu hendrerit sed, faucibus et est. Nunc aliquam dapibus diam. Mauris vitae eros sem, ac hendrerit sem. Nullam egestas auctor nibh, eu vestibulum velit porta at. Nulla facilisi. Ut non neque metus. Sed sodales lacus eu ante commodo ut sagittis quam auctor. Nam nec elit pellentesque ante lacinia porttitor nec at ipsum. Aenean a ante nec neque lacinia venenatis.</p> <p>Sed convallis erat ultricies magna vehicula eget dictum lorem pharetra. Sed vulputate lorem et erat convallis commodo. Proin ultrices, libero eu rutrum laoreet, orci ipsum luctus magna, non euismod risus arcu sit amet ante. Sed sodales egestas purus, eu euismod turpis vestibulum vitae. Pellentesque luctus tristique dui, eu elementum nunc elementum sit amet. Vestibulum nisl nibh, accumsan et consequat at, pharetra a eros. Vestibulum ut lacus eu nisl posuere consectetur. Etiam orci diam, condimentum in euismod in, varius in sapien. Fusce aliquam risus eu ipsum consectetur vel malesuada nisl eleifend. Integer laoreet feugiat magna, vel pellentesque dolor dignissim ut. Cras interdum condimentum varius. Aenean tempus, ligula nec suscipit dapibus, tellus enim mollis tellus, id feugiat velit justo vitae ligula. Vestibulum tincidunt augue et nibh viverra et tincidunt sapien dapibus. Nulla tortor nunc, molestie vel rutrum pulvinar, placerat id nisl. Praesent nec magna odio, vel faucibus mi. </p> <p>Donec aliquet lorem magna, et congue est. Cras ornare dui eget risus molestie quis cursus lorem cursus. Proin sit amet interdum nibh. Nullam fermentum bibendum lacus vel fringilla. Suspendisse lobortis cursus dignissim. Fusce vel enim felis, a condimentum erat. Morbi quis dui quis purus semper vehicula eu ac sem. Nullam commodo ornare elementum. Cras interdum accumsan libero nec dignissim. In est sapien, malesuada laoreet tempor a, consequat sed lectus. Phasellus suscipit sodales tempor. In ante mauris, tempus eget dapibus id, malesuada ac nunc. Maecenas euismod, arcu sit amet suscipit volutpat, nibh enim tincidunt quam, et condimentum nibh enim ac nisi. Proin sit amet purus purus. Donec iaculis neque id purus posuere pharetra.</p> <button>Pulsa aquí</button> </body> </html>
<!DOCTYPE html>
| ;Edita el fichero ejercicio3.html. Al hacer clic en el botón, el primer y el último párrafo deben desaparecer. Pero si volvemos a pulsar, deben aparecer de nuevo.
|
| ;Edita el fichero ejercicio3.html. Al hacer clic en el botón, los párrafos pares deben desaparecer. Pero si volvemos a pulsar, deben aparecer de nuevo.
|
| ;Continua con el ejercicio anterior. Ahora los párrafos deben desaparecer lentamente, de forma que vayan perdiendo opacidad. Al volver a pulsar deberán ganar opacidad a la misma velocidad.
|
| ;La imagen del ejercicio 7 deberá moverse hasta el extremo derecho de la pantalla a la vez que aumenta su tamaño al doble.
|
- ejercicio7.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Ejercicio 7</title> <style> img{display:block; width:200px;} </style> <script src="jquery-1.8.2.min.js"></script> <script> $(document).ready(function() { }); </script> </head> <body> <button>Pulsa aquí</button> <img src="imagenes/logo.png" alt="Logotipo CPIFP Los Enlaces"/> </body> </html>
| ;A partir del ficheor ejercicio8.html, haz que al dar a cada uno de los dos botones, la caja debe desplazarse a la izquierda o a la derecha de forma rápida.
|
- ejercicio8.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Ejercicio 8</title> <style> div { position: absolute; background-color: #abc; left: 50px; width: 90px; height: 90px; margin: 5px; } </style> <script src="jquery-1.8.2.min.js"></script> </head> <body> <button id="left">«</button> <button id="right">»</button> <div class="block"></div> </body> </html>
| ;Visualiza el fichero ejercicio9.html Al hacer clic sobre cada una de las imágenes, la imagen pulsada debe desaparecer mediante un efecto tipo slide.
|
- ejercicio9.html
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Reformas en Zaragoza</title> <style> a img { float: left; margin: 1px; } #imagenes { position: absolute; top: 50%; left: 50%; margin-top: -207px; margin-left: -290px; } </style> <script src="jquery-1.10.2.min.js"></script> <script type="text/javascript"> $(document).ready(function() { }); </script> </head> <body> <div id="imagenes"> <a href="index.php"> <img src="imagenes/inicio.gif" /></a> <a href="pisos.html"> <img src="imagenes/pisos.gif" /> </a> <a href="cocinas.html"> <img src="imagenes/cocinas.gif" /> </a> <a href="banos.html"> <img src="imagenes/baños.gif" /> </a> <a href="contactar.html"> <img src="imagenes/contactar.gif" /></a> </div> </body> </html>
