Usuario:ManuelRomero/JavaScript/jquery/ejemplos

De WikiEducator
Saltar a: navegación, buscar




Icon activity.jpg

Actividad 1

; 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>



Icon activity.jpg

Actividad 2

;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.






Icon activity.jpg

Actividad 3

;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>


Icon activity.jpg

Actividad 4

;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.






Icon activity.jpg

Actividad 5

;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.






Icon activity.jpg

Actividad 6

;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.






Icon activity.jpg

Actividad 7

;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>


Icon activity.jpg

Actividad 8

;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">&laquo;</button>
	<button id="right">&raquo;</button>
	<div class="block"></div>
</body>
</html>


Icon activity.jpg

Actividad 9

;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>