Ejercicios JQuery Resueltos, Distintas Dificultades

Fcil:
1- Disponer dos prrafos. Capturar el evento click solo del primero

utilizando la librera jQuery
Respuesta:
HTML:
<html>
<head>
<title>Problema</title>
<scripttype="text/javascript"
src="../jquery.js"></script>
src="funciones.js"></script>
</head>
<body>
<pid="parrafo1">Primerprrafo</p>
<p>Segundoprrafo</p>
</body>
</html>
Archivo.js:
varx;
x=$(document);
x.ready(inicializarEventos);
functioninicializarEventos()
{
varx;
x=$("#parrafo1");
x.click(presionParrafo)
}
functionpresionParrafo()
{
alert("Sepresionelprrafo");
}
2- Confecciona una pgina que muestre dos tablas con tres filas cada una.
Cambiar el color de fondo de cada fila de la primera tabla cuando sea
presionada con el mouse
Respuestas:
Html:
<html>
<head>
</head>
<body>
<tableborder="1"id="tabla1">
<tr>
<td>1111111111</td><td>1111111111</td><td>11111
11111</td><td>1111111111</td>
</tr>
<tr>
<td>2222222222</td><td>2222222222</td><td>22222
22222</td><td>2222222222</td>
</tr>
<tr>
<td>3333333333</td><td>3333333333</td><td>33333
33333</td><td>3333333333</td>
</tr>
</table>
<br>
<tableborder="1"id="tabla2">
<tr>
<td>1111111111</td><td>1111111111</td><td>11111
11111</td><td>1111111111</td>
</tr>
<tr>
<td>2222222222</td><td>2222222222</td><td>22222
22222</td><td>2222222222</td>
</tr>
<tr>
<td>3333333333</td><td>3333333333</td><td>33333
33333</td><td>3333333333</td>
</tr>
</table>
</body>
</html>
Archivo.js:
varx;
x=$(document);
{
varx;
x=$("#tabla1tr");
x.click(cambiarColor);
}
functioncambiarColor()
{
varx;
x=$(this);
x.css("backgroundcolor","ffff00");
}
Medio:
3- Crear una tabla con dos filas y dos columnas, cambiar el color del
interior de la casilla cuando ingresamos con el mouse y regresarla al
original cuando salimos
Respuesta:
HTML:
<html>
<head>
<linkrel="StyleSheet"href="estilos.css"
type="text/css">
</head>
<body>
<divid="recuadro">
</div>
<pid="coordenada"></p>
</body>
</html>
Archivo.js:
varx;
x=$(document);
{
varx;
x=$("#recuadro");
x.mousemove(moverMouse);
x=$("#recuadro");
x.mouseout(saleMouse);
}
functionmoverMouse(event)
{
varx;
x=$("#coordenada");
x.text("("+event.clientX+","+
event.clientY+")");
}
functionsaleMouse()
{
varx;
x=$("#coordenada");
x.text("Flechafueradelrecuadro");
}
Estilo.css
#recuadro{
backgroundcolor:#ffff00;
width:200px;
height:200px;
}
4- Crear un div de 200 pixeles de ancho y alto. Mostrar luego la coordenada
donde se encuentra la flecha del mouse cuando est dentro del div.
Mostrar un mensaje si no se encuentra dentro del div.
Repuesta:
HTML:
<html>
<head>
type="text/css">
</head>
<body>
<divid="recuadro">
</div>
<pid="coordenada"></p>
</body>
</html>
Archivo.js:
varx;
x=$(document);
{
varx;
x=$("#recuadro");
x.mousemove(moverMouse);
x=$("#recuadro");
x.mouseout(saleMouse);
}
functionmoverMouse(event)
{
varx;
x=$("#coordenada");
x.text("("+event.clientX+","+
event.clientY+")");
}
functionsaleMouse()
{
varx;
x=$("#coordenada");
x.text("Flechafueradelrecuadro");
}
Estilo.css:
#recuadro{
backgroundcolor:#ffff00;
width:200px;
height:200px;
}
5- Hacer que un bloque de informacin pase de visible a oculto lentamente
y viceversa al presionar un botn:
Respuesta:
HTML:
<html>
<head>
type="text/css">
</head>
<body>
<inputtype="button"id="boton1"
value="Mostrar/Ocultar">
<divid="descripcion"class="recuadro">
<p>HTMLesellenguajequeseempleaparael
desarrollodepginasdeinternet.</p>
<p>Estelenguajeestconstituidodeelementos
queelnavegadorinterpretaylasdespliegaen
lapantalladeacuerdoasuobjetivo.Veremos
quehayelementosparadisponerimgenessobre
unapgina,hipervnculosquenospermiten
dirigirnosaotrapgina,listas,tablaspara
tabulardatos,etc.</b>
<p>ParapodercrearunapginaHTMLserequiere
unsimpleeditordetexto(ennuestrocaso
emplearemosestesitio)yunnavegadorde
internet(IExplorer,FireFoxetc.),emplearemos
elnavegadorqueenesteprecisomomentoest
utilizando(recuerdequeustedestviendoen
esteprecisomomentounapginaHTMLconsu
navegador).</p>
<p>Lomsimportanteesqueencadaconcepto
desarrollelosejerciciospropuestosy
modifiquelosquesepresentanyaresueltos.<p>
<p>Estecursoloquebuscaesacercarel
lenguajeHTMLaunapersonaquenuncaantes
trabajconelmismo.Nopretendemostrartodas
loselementosHTMLenformaalfabtica.</p>
<p>Comoveremos,decadaconceptosepresenta
unaparteterica,enlaquesedauna
explicacincompleta,luegosepasaala
seccindelejercicioresueltodondepodemos
verelcontenidodelapginaHTMLycmola
visualizaelnavegador.Porltimoytalvezla
seccinmsimportantedeestetutoriales
dondeseproponequeustedhagapginasen
formaautnoma(donderealmentepodrdarse
cuentasielconceptoquedfirme).</p>
</div>
</body>
</html>
Archive.js
varx;
x=$(document);
{
varx=$("#boton1");
x.click(ocultarMostrarRecuadro);
}
functionocultarMostrarRecuadro()
{
varx=$("#descripcion");
x.toggle("slow");
}
Estilo.css
.recuadro{
backgroundcolor:#ffffcc;
fontfamily:verdana;
fontsize:14px;
bordertopwidth:1px;
borderrightwidth:3px;
borderbottomwidth:3px;
borderleftwidth:1px;
bordertopstyle:dotted;
borderrightstyle:solid;
borderbottomstyle:solid;
borderleftstyle:dotted;
bordertopcolor:#ffaa00;
borderrightcolor:#ff0000;
borderbottomcolor:#ff0000;
borderleftcolor:#ffaa00;
}
6- Confeccionar una pgina que muestre dos ttulos de primer nivel, al ser
presionados cambiar el color de fuente, fondo y la fuente del texto.
Respuesta:
HTML:
<html>
<head>
</head>
<body>
<h1id="titulo1">Primerttulo</h1>
<h1id="titulo2">Segundottulo</h1>
</body>
</html>
Archivo.js:
varx;
x=$(document);
x.ready(function(){
varx;
x=$("#titulo1");
x.click(function(){
varx;
x=$("#titulo1");
x.css("color","#ff0000");
x.css("backgroundcolor","#ffff00");
x.css("fontfamily","Courier");
});
x=$("#titulo2");
x.click(function(){
varx;
x=$("#titulo2");
x.css("color","#ffff00");
x.css("backgroundcolor","#ff0000");
x.css("fontfamily","Arial");
});
})

Ejercicios JQuery Resueltos, Distintas Dificultades

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Ejercicios JQuery Resueltos, Distintas Dificultades

Загружено:

Авторское право:

Доступные форматы

Fcil:

1- Disponer dos prrafos. Capturar el evento click solo del primero

Вам также может понравиться