EJERCICIOSJQUERY

1.CrearundocumentoHTMLconunencabezado,dosprrafosyunbotn.Alpulsarelbotnmedianteelselector$(*)sedebeocultartodo.Mtodohide()

2.EnelmismodocumentoHTMLanterior.Alpulsarelbotndebeocultarsedichobotn.

3.EnelmismodocumentoHTMLanterior.Suponemosqueelencabezadoyelprimerprrafotienenelatributoclass=intro.Debersocultaralclickarelbotn,dichoprrafo.

4.Realizaelmismocdigoqueenelscript3peroahoraseleccionadichoprrafomedianteotroselector.p:first

5.Seleccionaelprimerelementodelaprimeralistayocultadichoelemento.

Lista1: Tortilla Jamn Queso

Lista2: CocaCola Leche T

6.Ocultalosprimeroselementosdelalistadelscript5.

7.Creaundocumentoconunpardeenlacesmedianteelatributohrefyocultaambosenlaces.

1

8.Creaundocumentocondosenlacesydosbotones.Unosetienequeabrirenunanuevaventana(target="_blank")yelotrono.Cadabotndebeocultarunodelosenlacesenfuncindesuatributotarget.

9.Creaundocumentoconunbotnqueseoculteelbotnalclickarlo.

10.Crearundocumentoconunatabla.Ponerelfondodelasfilasparesenrojo(usarelmtodo.css("backgroundcolor","red").Acontinuacinponerelfondodelasfilasimparesenverde..css("backgroundcolor","green")

11.Crearundocumentoconunprrafo,elculseocultealclicardosvecessobrel.

12.Crearundocumentoconunprrafotalqueaparezcaunavisoalert()cuandosepresionaelbotnizquierdodelratn.13.Utilizaelmtodohover()paralanzarunmensajecuandonosposicionamossobreunprrafoyotrocuandosalgamosdel.

14.Utilizalosmtodosfocus()yblur()paracambiarelcolordedoscuadrosdetextocuandoposicionamoselfocoycuandoloretiramos.

15.Creaundocumentocondostagdiv,dentrodecadaunodeloscualesdebehaberunbotnparaesconderdichostag.

16.Creaundocumentoconunbotn,talquealclikcarlooculteunprrafoconvelocidadrpida.

2

17.Creaundocumentoconunbotn,talquealclickarlocomogestordevento,agregelaopacidaddetreselementosdivmedianteelmtodofadeIn().ElprimerfadeIn()ejectalosinparmetros,elsegundodemaneralentayelterceroentresmilisegundos.

18.Creaundocumentoconunbotn,talquealclickarlonosquitelaopacidaddetreselementosdivmedianteelmtodofadeOut().ElprimerfadeOut()ejectalosinparmetros,elsegundodemaneralentayelterceroentresmilisegundos.

19.Creaundocumentoconunbotn,talquealhacerclic,agregeoquitelaopacidaddetreselementosdivmedianteelmtodofadeToggle().ElprimerfadeToggle()ejectalosinparmetros,elsegundodemaneralentayelterceroentresmilisegundos.

20.Creaundocumentoconunbotn,talquealhacerclic,agregeoquitelaopacidaddetreselementosdivmedianteelmtodofadeTo().ElprimerfadeTo()ejectaloenmodolentoconunaopacidadde0,15,elsegundoenmodolentoconunaopacidadde0,4yeltercero,enmodolentoconunaopacidadde0,7.

21.Creaundocumentocondoscapas,talquealclickarsobrelaprimerasedespliegehaciaabajolasegundamedianteelmtodoslideDown().

22.Creaundocumentocondoscapas,talquealclickarsobrelaprimerasedespliegehaciaarribalasegundamedianteelmtodoslideUp()

23.Creaundocumentocondoscapas,talquealclickarsobrelaprimerafijasedesplieguehaciaarribaoabajolasegundo.utilizaelmtodoslideToggle().

24.Creaunprogramatalquealclickarenunbotnanimeuncuadradomovindoloaladerecha250pxyloagrande150px.

25.Creaunprograma,talquealclickarenunbotnsemuestreyseocultelaalturadeuncuadrado.

26.Crearunprograma,talquealclickarenunbotnsemuevauncuadrado100pxaladerechaysidentrodelcuadradoponeHELLOaumenteeltamaodelaletra.

27.Enelejercicio21incluirunbotnparapoderdetenerelefecto.

28.Mejoraelejercicio26aadiendocuatrobotones.1.Start:Comienzalaanimacin2.Stop:Paralaanimacinactualperocontinaconelresto.3.StopAll:Detienetodaslasanimacionesdeinmediato.4.Stopbutfinish:Detienelasanimacionesperoacabandoprimerolaqueseencuentra

3

enejecucin.

29.Crearunprogramaconunbotn,talquealhacerclicpongalasletrasenrojodeunprrafo,looculteconundesplazamientohaciaarriba(slideUp)ylovisualiceconundesplazamientohaciaabajo(slideDown).

30.Crearundocumentoconcuatrobotones,uncuadrodetexto,unenlaceahttp://www.thehobbit.com/yunprrafo"TresanillosparalosReyesElfosbajoelcielo.SieteparalosSeoresEnanosencasasdepiedra.NueveparalosHombresMortalescondenadosamorir.UnoparaelSeorOscuro,sobreeltronooscuro.UnAnilloparagobernarlosatodos.Unanilloparaencontrarlos,unAnilloparaatraerlosatodosyatarlosenlastinieblasenlaTierradeMordordondeseextiendenlasSombras."

talque, alclickarenelprimerbotnseobtengaunaalertaconelcontenidodetextodel

prrafoindicado. Alclickarenelsegundobotnsedebeobtenerunaalertaconelcontenido

incluyendolasmarcasHTMLdelprrafo. Alclickareneltercerbotn,sedebeobtenerunaalertaconelvalordelcuadrode

texto. Alclickarenelcuartobotn,sedebeobtenerunaalertaconelcontenidodel

enlace.

31.Mediantetreseventosasociadosatresbotones,SetText,SetHTMLySetValueestablecereltextodeunprimerprrafoaHolaMundo,establecereltextodeunsegundoprrafoaHolaMundoennegritayestablecerelvalordeuncuadrodetextoaHolaMundo.

32.Mediantedoseventosasociadosadosbotonesobtener conelprimerevento,eltextoantiguo,nuevoendicedeunprrafoHolaMundo

1 conelsegundoevento,obtenereltextoHTMLantiguo,nuevoyelndicedeun

segundoprrafoHolaMundo2

33.CambialosatributoshrefytitledeunenlaceaGoogle,medianteuneventoasociadoaunbotn.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,medianteuneventoasociadoaunbotndebemosaadirle(indiferenteprincipioofinal)unprrafocreadoconHTML,unprrafocreadoconjQueryyunprrafocreadoconelDOMdeJavaScript.

38.InsertardetrsdelafotolafraseILovejQuery.Utilizaruneventoasociadoaunbotnyelmtodoafter.LaIlacreamosconHTML,LoveconjQueryyjQeryconelDOMdeJavaScript.

39.Creaunacapacuadrada(100x300enamarillo)quecontengaunpardeprrafos.Borradichacapaconelmtodoremove()comogestordeuneventoasociadoaunbotn.

40.Creaunacapacuadrada(100x300enamarillo)quecontengaunpardeprrafos.Borradichosprrafosconelmtodoempty()comogestordeuneventoasociadoaunbotn.

41.Crearundocumentocondosprrafos,unodeellosconelatributoclass=italic.Borrarnicamentedichoprrafomedianteuneventoasociadoaunbotn.

42.AadeunaclasecssadistintoselementosdeHTMLmedianteuneventoasociadoaunbotnycomogestordeleventoelmtodoaddClass.MedianteotroeventoasociadoaunsegundobotneliminalaclasecssdeloselementosutilizandocomogestoreleventoremoveClass().

43.MedianteuneventoasociadoaunbotngestionadoconelmtodotoggleClassaadeyeliminaunaclasecssadistintoselementosHTML.

44.Tenemosundocumentocon4prrafoscadaunoconuncolordefondo.medianteuneventoasociadoaunbotndevuelvemedianteunaalertaelcolordefondodelprimer

5

prrafo.

45.Enelmismodocumentoanterior,medianteuneventoasociadoaunbotn.Cambiaelcolordefondodeloscuatroprrafosaamarilloyaumentaeltamaodelaletra.

46.Medianteuneventoasociadoaunbotnobtenerelanchoyaltodeunacapacuadrada.Visualizarlocomotextodentrodelelementodiv.

47.Obtenerlaalturayanchuradeldocumentoydelaventanacomorespuestaauneventoasociadoaunbotn.

48.Establecerlaanchurayalturaconunencadenamientodedatosenlosmtodoswidth()yheith()delelementodivrealizadoenelejercicio46.

49.Creaundocumentoconunbotnyunprrafo.Medianteuneventoasociadoalbotncambiaeltextodelprrafo.ParaescribirelcdigojQueryliberaelacceso$yutilizaelidentificadorcompletojQuery

50.Realizaelscript49guardandolareferenciaajQueryenunavariable.

51.Realizaelscript49pasandoelsigno$comoparmetroalmtodoReady().

52.Seleccionadeunalistade5ciudades,lasegunda,debesresaltarlaconuncolordefondorojo

53.Creaunatablade8filas,acontinuacinponelfondorojoatodasaquellasqueestnporencimadelatercera(2)yponelfondoazulatodasaquellasqueestnpordebajodelatercera(2)

54.Seleccionatodaslascabecerasdeundocumentoyponlasenrojo.

55.Seleccionatodosloselementosanimadosdetudocumentoycambialosdecolor.

56.Seleccionatodoslosprrafosdeundocumentoquecontenganeuyponlesuncolordefondorojo.

57.Seleccionadeunatablatodaslascasillasvacasyponlasuncolordefondoamarillo.

58.Seleccionadeundocumentotodoslosprrafosvisiblesyponlosenrojo.

59.Seleccionatodosloselementosconunatributoconunvalordeterminadoyponlescolordefondorojo.

6

60.Seleccionatodosloselementosconelatributohrefacabadoen.comyacontinuacinresaltadichoselementosenamarillo

61.Seleccionatodosloselementosdetipoinputdetudocumentoyponlosconuncolordefondorojo

62.Realizaelmismoejercicioqueelanteriorconloselementosinputdetipotextydetipopassword

63.Realizaelmismoejercicioqueelanteriorrodeandoconunspanencolorrojoloselementosinputdetiporadioydetipocheckbox.

64.Realizaelmismoejercicioqueelanteriorconloselementosinputdetiposubmit,resetybutton

65.Realizaelmismoejerciciocontodosloselementosinputqueseencuentredeshabilitados

66.Enunelementoselect,elelementoqueestseleccionadopordefecto,ponlecolordefondorojo

67.Medianteelposicionamientodelratndentroyfueradeunprrafo,stedebecambiardeestilomedianteelmtodobind.

68.Utilizarconelmtodobind()unmapadeeventosparaunirloseventosclick,mouseoverymouseout.Conelprimerosedebedeslizarunprrafohaciaarriba/abajoslideToggle(),conmouseover,elfondodelapginaserazulyconmouseoutroja.

69.Alclicarenunprrafosedebeobtenermedianteelmtodobind()unafuncinmanejadoraparaobtenerunaalertaconunmensaje.Elmensajesedebepasarcomoparmetrodebind()

70.Creaundocumentocondosbotonesyuncuadrodetexto.medianteelprimerbotnseledebeotorgarelfocoalcuadrodetextoymedianteelsegundobotnseledebequitarelfocoadichocuadro.

71.Creaundocumentoconuncuadrodetextoyunmendesplegable.Cuandoseproduzcauncambioencualquieradeambossedebeponerelcolordefondodelcuadroolaopcinseleccionadaenrojo.

72.Tenemosuncuadrodetextoenelqueseencuentrauneventoonchange

disparardichoeventoalhacerclicenunbotn.

7

73.Crearundocumentoconunbotn,talquealclicarlounavezsedispareuneventodobleclicksobreunprrafoThisisaparagraph.

74.Crearundocumentoconunelementodivydentrodeldivunpardeprrafos,detalmaneraquealhacerclicenunprrafocambieelcolordeambosprrafos.

75.Crearundocumentoconunpardeprrafosyunbotn.Alclicarenlosprrafossedebeaumentareltamaodelaletrayelespacioentrecaracteres.Alclicarenelbotnsedebedestruireleventoclicarysufuncinasociadadeaumentareltamaodelaletra.

76.Crearundocumentotalquesiseproduceunerroralcargarunaimagen,sustituyadichaimagenporuntexto.Ademseldocumentodebertenerunbotntalquealpulsarlosedispareeleventoerror

77.Enelejercicio75aadirunbotntalquealhacercliceliminareleventoclicksobrelosprrafos.

78.ANULADOEnelejercicio75aadirunbotntalquealhacercliceliminelafuncinmanejadora,queaumentaeltamaodelaletradeunprrafoalhacerclic.

79.Crearundocumentoconunprrafo,talquealhacerclicaumenteeltamaodelaletra.Sloseproducirdichoefectoendosocasiones,luegoelefectodebedesaparecer.

80.Crearundocumentoenelquenosencontremosunbotn,talquealhacerclicnosdevuelvaunaalertaconelvalordelapropiedadevent.delegateTargetyevent.currentTarget

81.Creaundocumentoenelqueseproduzcan4animacionesmedianteunbotnymedianteunsegundobotnseeliminelacoladeanimaciones.

82.Mediante5mtodosfadeIn()aplicadossobre5elementosdivcuadrados,establecerunretrasoslow,fast,800ms,2000msy4000ms.respectivamente.

83.Creaundocumentocondosbotones,startystop.Medianteelprimerosedebeproducirlasiguienteanimacin.Debeaparecerunelementodivcuadradode40x40,desplazarsealaizquierda200px,cambiardecoloraazulyocultarsedesplazndosehaciaarriba.

Solucin:https://docs.google.com/file/d/0B4tFFI6DnXPgb3JyZEF5NGY4akE/edit

8

84.Contarcaracteresenuntextarea.Creaunpluginparaconseguirqueuncampotextareadeunformulario,informeentodomomentodeloscaracteresquehaescritoelusuario.Esdecir,vamosahacerunmtododelobjetojQueryqueservirparaquecuenteloscaracteresenunacapadetextodetrsdeuntextarea.

Solucin:https://docs.google.com/file/d/0B4tFFI6DnXPgbjZFbDc1VmZEZ2s/edit

85.SeguridadenunaclaveCreaunpluginquerealicelosiguiente.Tendremosunformularioconuncampoinputpassword.ConjQuerymostraremosdinmicamenteunmensajealladodelcampoconlafortalezadelaclavequehayaescrita.Amedidaqueelusuariocambieelcontenidodelcampo,seactualizarelmensajedellado,mostrandolafortalezadelanuevaclave.(5y8segura)

Solucin:https://docs.google.com/file/d/0B4tFFI6DnXPgOVVKMTlDZldjMW8/edit

86.CamposadicionalesCrearunpluginquepermitaaadircamposenunformulario.Tendremosunenlaceenelformularioconeltexto"Mscampos"yalpulsarlo,simplementeseinyectarelcdigoHTMLparamostraruncamponuevoenelformulario.

Solucin:https://docs.google.com/file/d/0B4tFFI6DnXPgY3U2bGdLbDAyQlU/edit

87.Implementarlafuncintipsobreloselementosdeldocumento.Realizaunsistemaparacrearelementos,talque,alpasarelratnsobreellos,muestreunmensajeconunaexplicacincontextual,loquehabitualmenteseconocecomo"tip"

Solucin:https://docs.google.com/file/d/0B4tFFI6DnXPgT1pVbE1yOW80eTQ/edit

9

88.CrearunprogramaconjQueryparaobtenerunmen,talquecadavezqueelusuariointroduceelpunteroelitemseestablecedecolorblancomedianteunefectopersiana.

CdigoHTMLyCSS:https://docs.google.com/file/d/0B4tFFI6DnXPgYTQ3SXVCcmlSdHM/edit

Solucin:https://docs.google.com/file/d/0B4tFFI6DnXPgRjNhbmlScGZ2Q1k/edit?usp=sharing

89.ValidarunformularioconjQuery.Setratadeunformularioenelquehayqueintroducirelnombre,mail,asuntoyunmensaje.Sinoseintroducealgunodeloscampososielmailesincorrectonosapareceruntipinformandodedichoasunto.EnelenlacesiguienteestelcdigodelprogramatanslofaltalapartedejQuery.

https://docs.google.com/file/d/0B4tFFI6DnXPgd2VUem9LcGpCUTA/editSolucin:https://docs.google.com/file/d/0B4tFFI6DnXPgVFVJZG9BdC1lVHc/edit

90.EfectotipoacordenconjQuery.

10

Partecss:https://docs.google.com/file/d/0B4tFFI6DnXPgd2JKM3E0OVotRnM/editParteHTML:https://docs.google.com/file/d/0B4tFFI6DnXPgNWNYbUExNzg0dXc/editSolucin:https://docs.google.com/file/d/0B4tFFI6DnXPga1NiZE1fLUZRc1k/edit

91.DEMOSlidderconjQuery

CDIGOhttps://docs.google.com/file/d/0B4tFFI6DnXPgeVhSeFlONXlNS00/edit

92.Efectonieve:PluginjQuerysnowIntroduceenundocumentoelpluginjquery.snow.jsparacrearelefectodenevando.Debersimplementareltamaomnimodelcopodenievea12(minSize),eltamaomximoa18(maxSize),lafrecuenciaconlaquecaelanievea400(newOn)CDIGOjquery.snow.js

11

Solucin:https://docs.google.com/file/d/0B4tFFI6DnXPgSGEwRjhkMDljUVU/edit?usp=sharing

93.RealizaunprogramaenJQueryparaqueentudocumentoaparezcan8fotosenordenaleatorio.

Solucin:https://docs.google.com/file/d/0B4tFFI6DnXPgREx4ZzR6Q2tKOG8/edit

12