EJERCICIOSJQUERY

1.CrearundocumentoHTMLconunencabezado,dosprrafosyunbotn.Alpulsarelbotn
medianteelselector$(*)sedebeocultartodo.Mtodohide()
2.EnelmismodocumentoHTMLanterior.Alpulsarelbotndebeocultarsedichobotn.
3.EnelmismodocumentoHTMLanterior.Suponemosqueelencabezadoyelprimerprrafo
tienenelatributoclass=intro.Debersocultaralclickarelbotn,dichoprrafo.
4.Realizaelmismocdigoqueenelscript3peroahoraseleccionadichoprrafomedianteotro
selector.p:first
5.Seleccionaelprimerelementodelaprimeralistayocultadichoelemento.
Lista1:
Tortilla
Jamn
Queso
Lista2:
CocaCola
Leche
T
6.Ocultalosprimeroselementosdelalistadelscript5.
7.Creaundocumentoconunpardeenlacesmedianteelatributohrefyocultaambosenlaces.
1
8.Creaundocumentocondosenlacesydosbotones.Unosetienequeabrirenunanueva
ventana(target="_blank")yelotrono.Cadabotndebeocultarunodelosenlacesenfuncinde
suatributotarget.
9.Creaundocumentoconunbotnqueseoculteelbotnalclickarlo.
10.Crearundocumentoconunatabla.Ponerelfondodelasfilasparesenrojo(usarelmtodo
.css("backgroundcolor","red").Acontinuacinponerelfondodelasfilasimparesenverde
..css("backgroundcolor","green")
11.Crearundocumentoconunprrafo,elculseocultealclicardosvecessobrel.
12.Crearundocumentoconunprrafotalqueaparezcaunavisoalert()cuandosepresionael
botnizquierdodelratn.
13.Utilizaelmtodohover()paralanzarunmensajecuandonosposicionamossobreunprrafo
yotrocuandosalgamosdel.
14.Utilizalosmtodosfocus()yblur()paracambiarelcolordedoscuadrosdetextocuando
posicionamoselfocoycuandoloretiramos.
15.Creaundocumentocondostagdiv,dentrodecadaunodeloscualesdebehaberunbotn
paraesconderdichostag.
16.Creaundocumentoconunbotn,talquealclikcarlooculteunprrafoconvelocidadrpida.
2
17.Creaundocumentoconunbotn,talquealclickarlocomogestordevento,agregela
opacidaddetreselementosdivmedianteelmtodofadeIn().ElprimerfadeIn()ejectalosin
parmetros,elsegundodemaneralentayelterceroentresmilisegundos.
18.Creaundocumentoconunbotn,talquealclickarlonosquitelaopacidaddetres
elementosdivmedianteelmtodofadeOut().ElprimerfadeOut()ejectalosinparmetros,el
segundodemaneralentayelterceroentresmilisegundos.
19.Creaundocumentoconunbotn,talquealhacerclic,agregeoquitelaopacidaddetres
elementosdivmedianteelmtodofadeToggle().ElprimerfadeToggle()ejectalosin
parmetros,elsegundodemaneralentayelterceroentresmilisegundos.
20.Creaundocumentoconunbotn,talquealhacerclic,agregeoquitelaopacidaddetres
elementosdivmedianteelmtodofadeTo().ElprimerfadeTo()ejectaloenmodolentoconuna
opacidadde0,15,elsegundoenmodolentoconunaopacidadde0,4yeltercero,enmodo
lentoconunaopacidadde0,7.
21.Creaundocumentocondoscapas,talquealclickarsobrelaprimerasedespliegehacia
abajolasegundamedianteelmtodoslideDown().
22.Creaundocumentocondoscapas,talquealclickarsobrelaprimerasedespliegehacia
arribalasegundamedianteelmtodoslideUp()
23.Creaundocumentocondoscapas,talquealclickarsobrelaprimerafijasedespliegue
haciaarribaoabajolasegundo.utilizaelmtodoslideToggle().
24.Creaunprogramatalquealclickarenunbotnanimeuncuadradomovindoloaladerecha
250pxyloagrande150px.
25.Creaunprograma,talquealclickarenunbotnsemuestreyseocultelaalturadeun
cuadrado.
26.Crearunprograma,talquealclickarenunbotnsemuevauncuadrado100pxaladerecha
ysidentrodelcuadradoponeHELLOaumenteeltamaodelaletra.
27.Enelejercicio21incluirunbotnparapoderdetenerelefecto.
28.Mejoraelejercicio26aadiendocuatrobotones.
1.Start:Comienzalaanimacin
2.Stop:Paralaanimacinactualperocontinaconelresto.
3.StopAll:Detienetodaslasanimacionesdeinmediato.
4.Stopbutfinish:Detienelasanimacionesperoacabandoprimerolaqueseencuentra
3
enejecucin.
29.Crearunprogramaconunbotn,talquealhacerclicpongalasletrasenrojodeunprrafo,
looculteconundesplazamientohaciaarriba(slideUp)ylovisualiceconundesplazamiento
haciaabajo(slideDown).
30.Crearundocumentoconcuatrobotones,uncuadrodetexto,unenlacea
http://www.thehobbit.com/yunprrafo"TresanillosparalosReyesElfosbajoelcielo.Sieteparalos
SeoresEnanosencasasdepiedra.NueveparalosHombresMortalescondenadosamorir.Unoparael
SeorOscuro,sobreeltronooscuro.UnAnilloparagobernarlosatodos.Unanilloparaencontrarlos,un
AnilloparaatraerlosatodosyatarlosenlastinieblasenlaTierradeMordordondeseextiendenlas
Sombras."
talque,
alclickarenelprimerbotnseobtengaunaalertaconelcontenidodetextodel
prrafoindicado.
Alclickarenelsegundobotnsedebeobtenerunaalertaconelcontenido
incluyendolasmarcasHTMLdelprrafo.
Alclickareneltercerbotn,sedebeobtenerunaalertaconelvalordelcuadrode
texto.
Alclickarenelcuartobotn,sedebeobtenerunaalertaconelcontenidodel
enlace.
31.Mediantetreseventosasociadosatresbotones,SetText,SetHTMLySetValue
establecereltextodeunprimerprrafoaHolaMundo,establecereltextodeunsegundo
prrafoaHolaMundoennegritayestablecerelvalordeuncuadrodetextoaHolaMundo.
32.Mediantedoseventosasociadosadosbotonesobtener
conelprimerevento,eltextoantiguo,nuevoendicedeunprrafoHolaMundo
1
conelsegundoevento,obtenereltextoHTMLantiguo,nuevoyelndicedeun
segundoprrafoHolaMundo2
33.CambialosatributoshrefytitledeunenlaceaGoogle,medianteuneventoasociadoaun
botn.Ahorahref=http://www.google.es/intl/es/earth/index.htmlyelttuloserGoogleEarth
34.Cambiaunenlaceahttp://google.esmedianteuneventoasociadoaunbotnyuncallback,
enelqueelnuevotextointroducidosea/intl/es/earth/index.html
35.Aadiralfinal,mediantedoseventosasociadosadosbotones,
textoaunprrafoTextoaadido
unnuevolistitemaunalista
4
36.Aadiralprincipio,mediantedoseventosasociadosadosbotones,
textoaunprrafoTextoaadido
unnuevolistitemaunalista
37.Crearundocumentoconunprrafo,medianteuneventoasociadoaunbotndebemos
aadirle(indiferenteprincipioofinal)unprrafocreadoconHTML,unprrafocreadoconjQuery
yunprrafocreadoconelDOMdeJavaScript.
38.InsertardetrsdelafotolafraseILovejQuery.Utilizaruneventoasociadoaunbotnyel
mtodoafter.LaIlacreamosconHTML,LoveconjQueryyjQeryconelDOMde
JavaScript.
39.Creaunacapacuadrada(100x300enamarillo)quecontengaunpardeprrafos.
Borradichacapaconelmtodoremove()comogestordeuneventoasociadoaun
botn.
40.Creaunacapacuadrada(100x300enamarillo)quecontengaunpardeprrafos.
Borradichosprrafosconelmtodoempty()comogestordeuneventoasociadoaun
botn.
41.Crearundocumentocondosprrafos,unodeellosconelatributoclass=italic.
Borrarnicamentedichoprrafomedianteuneventoasociadoaunbotn.
42.AadeunaclasecssadistintoselementosdeHTMLmedianteuneventoasociadoa
unbotnycomogestordeleventoelmtodoaddClass.Medianteotroeventoasociadoa
unsegundobotneliminalaclasecssdeloselementosutilizandocomogestorelevento
removeClass().
43.MedianteuneventoasociadoaunbotngestionadoconelmtodotoggleClass
aadeyeliminaunaclasecssadistintoselementosHTML.
44.Tenemosundocumentocon4prrafoscadaunoconuncolordefondo.mediante
uneventoasociadoaunbotndevuelvemedianteunaalertaelcolordefondodelprimer
5
prrafo.
45.Enelmismodocumentoanterior,medianteuneventoasociadoaunbotn.Cambia
elcolordefondodeloscuatroprrafosaamarilloyaumentaeltamaodelaletra.
46.Medianteuneventoasociadoaunbotnobtenerelanchoyaltodeunacapa
cuadrada.Visualizarlocomotextodentrodelelementodiv.
47.Obtenerlaalturayanchuradeldocumentoydelaventanacomorespuestaaun
eventoasociadoaunbotn.
48.Establecerlaanchurayalturaconunencadenamientodedatosenlosmtodos
width()yheith()delelementodivrealizadoenelejercicio46.
49.Creaundocumentoconunbotnyunprrafo.Medianteuneventoasociadoalbotn
cambiaeltextodelprrafo.ParaescribirelcdigojQueryliberaelacceso$yutilizael
identificadorcompletojQuery
50.Realizaelscript49guardandolareferenciaajQueryenunavariable.
51.Realizaelscript49pasandoelsigno$comoparmetroalmtodoReady().
52.Seleccionadeunalistade5ciudades,lasegunda,debesresaltarlaconuncolorde
fondorojo
53.Creaunatablade8filas,acontinuacinponelfondorojoatodasaquellasqueestn
porencimadelatercera(2)yponelfondoazulatodasaquellasqueestnpordebajode
latercera(2)
54.Seleccionatodaslascabecerasdeundocumentoyponlasenrojo.
55.Seleccionatodosloselementosanimadosdetudocumentoycambialosdecolor.
56.Seleccionatodoslosprrafosdeundocumentoquecontenganeuyponlesun
colordefondorojo.
57.Seleccionadeunatablatodaslascasillasvacasyponlasuncolordefondoamarillo.
58.Seleccionadeundocumentotodoslosprrafosvisiblesyponlosenrojo.
59.Seleccionatodosloselementosconunatributoconunvalordeterminadoyponles
colordefondorojo.
6
60.Seleccionatodosloselementosconelatributohrefacabadoen.comya
continuacinresaltadichoselementosenamarillo
61.Seleccionatodosloselementosdetipoinputdetudocumentoyponlosconuncolor
defondorojo
62.Realizaelmismoejercicioqueelanteriorconloselementosinputdetipotextyde
tipopassword
63.Realizaelmismoejercicioqueelanteriorrodeandoconunspanencolorrojolos
elementosinputdetiporadioydetipocheckbox.
64.Realizaelmismoejercicioqueelanteriorconloselementosinputdetiposubmit,
resetybutton
65.Realizaelmismoejerciciocontodosloselementosinputqueseencuentre
deshabilitados
66.Enunelementoselect,elelementoqueestseleccionadopordefecto,ponlecolor
defondorojo
67.Medianteelposicionamientodelratndentroyfueradeunprrafo,stedebe
cambiardeestilomedianteelmtodobind.
68.Utilizarconelmtodobind()unmapadeeventosparaunirloseventosclick,
mouseoverymouseout.Conelprimerosedebedeslizarunprrafohaciaarriba/abajo
slideToggle(),conmouseover,elfondodelapginaserazulyconmouseoutroja.
69.Alclicarenunprrafosedebeobtenermedianteelmtodobind()unafuncin
manejadoraparaobtenerunaalertaconunmensaje.Elmensajesedebepasarcomo
parmetrodebind()
70.Creaundocumentocondosbotonesyuncuadrodetexto.medianteelprimerbotn
seledebeotorgarelfocoalcuadrodetextoymedianteelsegundobotnseledebe
quitarelfocoadichocuadro.
71.Creaundocumentoconuncuadrodetextoyunmendesplegable.Cuandose
produzcauncambioencualquieradeambossedebeponerelcolordefondodelcuadro
olaopcinseleccionadaenrojo.
72.Tenemosuncuadrodetextoenelqueseencuentrauneventoonchange
<inputvalue="Donald"onchange="alert(this.value)"type="text">
disparardichoeventoalhacerclicenunbotn.
7
73.Crearundocumentoconunbotn,talquealclicarlounavezsedispareunevento
dobleclicksobreunprrafo<pondblclick="alert('DBLCLICKDISPARADO')">Thisisa
paragraph.</p>
74.Crearundocumentoconunelementodivydentrodeldivunpardeprrafos,detal
maneraquealhacerclicenunprrafocambieelcolordeambosprrafos.
75.Crearundocumentoconunpardeprrafosyunbotn.Alclicarenlosprrafosse
debeaumentareltamaodelaletrayelespacioentrecaracteres.Alclicarenelbotn
sedebedestruireleventoclicarysufuncinasociadadeaumentareltamaodelaletra.
76.Crearundocumentotalquesiseproduceunerroralcargarunaimagen,sustituya
dichaimagenporuntexto.Ademseldocumentodebertenerunbotntalqueal
pulsarlosedispareeleventoerror
77.Enelejercicio75aadirunbotntalquealhacercliceliminareleventoclicksobre
losprrafos.
78.ANULADOEnelejercicio75aadirunbotntalquealhacercliceliminelafuncin
manejadora,queaumentaeltamaodelaletradeunprrafoalhacerclic.
79.Crearundocumentoconunprrafo,talquealhacerclicaumenteeltamaodela
letra.Sloseproducirdichoefectoendosocasiones,luegoelefectodebe
desaparecer.
80.Crearundocumentoenelquenosencontremosunbotn,talquealhacerclicnos
devuelvaunaalertaconelvalordelapropiedadevent.delegateTargety
event.currentTarget
81.Creaundocumentoenelqueseproduzcan4animacionesmedianteunbotny
medianteunsegundobotnseeliminelacoladeanimaciones.
82.Mediante5mtodosfadeIn()aplicadossobre5elementosdivcuadrados,establecer
unretrasoslow,fast,800ms,2000msy4000ms.respectivamente.
83.Creaundocumentocondosbotones,startystop.Medianteelprimerosedebe
producirlasiguienteanimacin.Debeaparecerunelementodivcuadradode40x40,
desplazarsealaizquierda200px,cambiardecoloraazulyocultarsedesplazndose
haciaarriba.
Solucin:https://docs.google.com/file/d/0B4tFFI6DnXPgb3JyZEF5NGY4akE/edit
8
84.Contarcaracteresenuntextarea.Creaunpluginparaconseguirqueuncampo
textareadeunformulario,informeentodomomentodeloscaracteresquehaescritoel
usuario.Esdecir,vamosahacerunmtododelobjetojQueryqueservirparaque
cuenteloscaracteresenunacapadetextodetrsdeuntextarea.
Solucin:https://docs.google.com/file/d/0B4tFFI6DnXPgbjZFbDc1VmZEZ2s/edit
85.SeguridadenunaclaveCreaunpluginquerealicelosiguiente.Tendremosun
formularioconuncampoinputpassword.ConjQuerymostraremosdinmicamenteun
mensajealladodelcampoconlafortalezadelaclavequehayaescrita.Amedidaqueel
usuariocambieelcontenidodelcampo,seactualizarelmensajedellado,mostrandola
fortalezadelanuevaclave.(<5nosegura,>5y<8medianamentesegura,>8segura)
Solucin:https://docs.google.com/file/d/0B4tFFI6DnXPgOVVKMTlDZldjMW8/edit
86.CamposadicionalesCrearunpluginquepermitaaadircamposenunformulario.
Tendremosunenlaceenelformularioconeltexto"Mscampos"yalpulsarlo,
simplementeseinyectarelcdigoHTMLparamostraruncamponuevoenel
formulario.
Solucin:https://docs.google.com/file/d/0B4tFFI6DnXPgY3U2bGdLbDAyQlU/edit
87.Implementarlafuncintipsobreloselementosdeldocumento.Realizaunsistema
paracrearelementos,talque,alpasarelratnsobreellos,muestreunmensajeconuna
explicacincontextual,loquehabitualmenteseconocecomo"tip"
Solucin:https://docs.google.com/file/d/0B4tFFI6DnXPgT1pVbE1yOW80eTQ/edit
9
88.CrearunprogramaconjQueryparaobtenerunmen,talquecadavezqueel
usuariointroduceelpunteroelitemseestablecedecolorblancomedianteunefecto
persiana.
CdigoHTMLyCSS:
https://docs.google.com/file/d/0B4tFFI6DnXPgYTQ3SXVCcmlSdHM/edit
Solucin:
https://docs.google.com/file/d/0B4tFFI6DnXPgRjNhbmlScGZ2Q1k/edit?usp=sharing
89.ValidarunformularioconjQuery.Setratadeunformularioenelquehayqueintroducirel
nombre,mail,asuntoyunmensaje.Sinoseintroducealgunodeloscampososielmailes
incorrectonosapareceruntipinformandodedichoasunto.Enelenlacesiguienteestel
cdigodelprogramatanslofaltalapartedejQuery.
https://docs.google.com/file/d/0B4tFFI6DnXPgd2VUem9LcGpCUTA/edit
Solucin:https://docs.google.com/file/d/0B4tFFI6DnXPgVFVJZG9BdC1lVHc/edit
90.EfectotipoacordenconjQuery.
10
Partecss:https://docs.google.com/file/d/0B4tFFI6DnXPgd2JKM3E0OVotRnM/edit
ParteHTML:https://docs.google.com/file/d/0B4tFFI6DnXPgNWNYbUExNzg0dXc/edit
Solucin:https://docs.google.com/file/d/0B4tFFI6DnXPga1NiZE1fLUZRc1k/edit
91.DEMO
SlidderconjQuery
CDIGOhttps://docs.google.com/file/d/0B4tFFI6DnXPgeVhSeFlONXlNS00/edit
92.Efectonieve:PluginjQuerysnow
Introduceenundocumentoelpluginjquery.snow.jsparacrearelefectodenevando.Debers
implementareltamaomnimodelcopodenievea12(minSize),eltamaomximoa18
(maxSize),lafrecuenciaconlaquecaelanievea400(newOn)
CDIGOjquery.snow.js
11
Solucin:https://docs.google.com/file/d/0B4tFFI6DnXPgSGEwRjhkMDljUVU/edit?usp=sharing
93.RealizaunprogramaenJQueryparaqueentudocumentoaparezcan8fotosenorden
aleatorio.
Solucin:https://docs.google.com/file/d/0B4tFFI6DnXPgREx4ZzR6Q2tKOG8/edit
12