Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Diseño Web Jquery

    Cargado por

    Henry RenZa
    3 vistas8 páginas

    Título original

    diseño_web_jquery

    Derechos de autor

    © Attribution Non-Commercial (BY-NC)

    Formatos disponibles

    PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    3 vistas8 páginas

    Diseño Web Jquery

    Cargado por

    Henry RenZa

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 8

    Data Systems Computadoras Mdulo: Diseo Web Instructor: Br.

    Henry Renderos
    Conceptos Bsicos de Jquery

    u! es " uery#
    $%uery es una li&iana' (escribe menos' )a* m+s,' librer-a de "a&ascript. .l propsito de " uery es )acer muc)o m+s /+cil el uso de $a&aScript en nuestros sitios 0eb. $%uery toma un montn de tareas comunes %ue re%uieren muc)as l-neas de cdi1o "a&ascript para lo1rarlo' y las en&uel&e )acia m!todos %ue podemos llamar con una simple l-nea de cdi1o. $%uery tambi!n simpli/ica muc)as de las cosas complicadas de "a&ascript' como llamadas 2$23 y manipulacin D4M. 5a librer-a de " uery contiene las si1uientes caracter-sticas: Manipulacin de H6M57D4M Manipulacin de CSS .&entos y m!todos H6M5 ./ectos y animaciones 2$23 8tilidades

    Descar1ando " uery


    Hay dos &ersiones de " uery disponibles para ser descar1adas: 9ersin de produccin: esta es para tu sitio 0eb por%ue )a sido minimi*ada y comprimida. 9ersin de Desarrollo: esta es para pruebas y desarrollo :sin comprimir y cdi1o leible;

    5as dos &ersiones pueden ser descar1adas de )ttp:77"%uery.com7do0nload7 5a librer-a de " uery es un solo arc)i&o de $a&aScript' y la re/erencias con la eti%ueta <script= de H6M5 :recuerda %ue la eti%ueta <script= dete estar dentro de la seccin <)ead=;. <)ead= <script src>,"%uery?@.@A.B.min."s,=<7script= <7)ead= Coloca el arc)i&o %ue descar1aste en el mismo directorio donde est+n las p+1inas en donde %uieres usarlo.

    Sint+Cis de " uery


    Con " uery puedes seleccionar :pre1untar; elementos de H6M5 y reali*ar (acciones, sobre ellas. 5a sintaCis de " uery est+ )ec)o a la medida para seleccionar elementos H6M5 y reali*ar al1unas acciones sobre esos elementos. 5a sintaCis b+sica es: D:selector;.accion:; 8n s-mbolo de dlar :D; de/ine7accesa a " uery. 8n :selector; para (pre1untar :o buscar;, elementos H6M5. 8na accion:; de " uery para ser reali*ada sobre los elementos. Eor e"emplo: D:t)is;.)ide:; ? oculta el elemento actual.

    D:(p,;.)ide:; ? oculta todos los elementos <p= D:(.test,;.)ide:; ? oculta todos los elementos con class>,test,. D:(Ftest,;.)ide:; ? oculta el elemento con id>,test,.

    .l e&ento Document Ready


    .sto es para pre&enir cual%uier cdi1o " uery %ue se e"ecute antes de %ue el documento se )a terminado de car1ar :es listo;. .s una buena pr+ctica esperar a %ue el documento est! completamente car1ado y listo antes de traba"ar con !l. .sto tambi!n le permite tener su cdi1o $a&aScript antes %ue el cuerpo del documento' en la seccin de cabecera.

    Selectores " uery


    5os selectores de " uery te permiten seleccionar y manipular elementos H6M5. 5os selectores de " uery son usados para (buscar, :o seleccionar; elementos H6M5 basados en su identi/icadores' clases' tipos' atributos' &alores de atributos y muc)o m+s. .stos est+n basados sobre el selector CSS eCistente' y como a1re1ado' esto tiene al1unos propios selectores personali*ados. .l selector de elementos. .l selector de elementos " uery selecciona elementos basados en el nombre del elemento. Euedes seleccionar todos los elementos <p= en una p+1ina )aciendo esto: D:(p,; ."emplo: Cuando el usuario )ace clicG en el botn' todos los elementos <p= se ocultan.
    <!DOCTYPE html> <html> <head> <script src="http://ajax.g gleapis.c m/ajax/li!s/j"#er$/%.%&.'/j"#er$.mi(.js"> </script> <script> )*d c#me(t+.read$*,#(cti (*+)*"!#tt ("+.clic.*,#(cti (*+)*"p"+.hide*+/ 0+/ 0+/ </script> </head> <! d$> <h'>Este es #( e(ca!e1ad </h'> <p>Este es #( p2rra, </p> <p>Este es tr p2rra, </p> <!#tt (>Clic. ac2</!#tt (> </! d$> </html>

    .l selector Fid
    .l selector de Fid de " uery usa el atributo id de una eti%ueta H6M5 para buscar el elemento espec-/ico. 8n id deber-a ser Hnico dentro de la p+1ina' as- %ue debes usar el selector Fid cuando %uieras encontrar un Hnico elemento. Eara buscar un elemento con un id espec-/ico' escribe el s-mbolo F' se1uido por el id del elemento.

    D:(Ftest,; ."emplo: Cuando el usuario )ace clicG en el botn' el elemento con id>,test, ser+ ocultado.
    <!DOCTYPE html> <html> <head> <script src="http://ajax.g gleapis.c m/ajax/li!s/j"#er$/%.%&.'/j"#er$.mi(.js"> </script> <script> )*d c#me(t+.read$*,#(cti (*+)*"!#tt ("+.clic.*,#(cti (*+)*"3test"+.hide*+/ 0+/ 0+/ </script> </head> <! d$> <h'>Este es #( e(ca!e1ad </h'> <p>Este es #( p2rra, </p> <p id="test">Este es #( p2rra, c ( id</p> <!#tt (>Clic. a"#4</!#tt (> </! d$> </html>

    .l selector .class
    .l selector de " uery class busca elementos con una clase espec-/ica. Eara buscar elementos con una clase espec-/ica' escribe un punto' se1uido por el nombre de la clase: D:(.test,; ."emplo: Cuando el usuario )ace clicG sobre un botn' el elemento con class>,test, ser+ ocultado.
    <!DOCTYPE html> <html> <head> <script src="http://ajax.g gleapis.c m/ajax/li!s/j"#er$/%.%&.'/j"#er$.mi(.js"> </script> <script> )*d c#me(t+.read$*,#(cti (*+)*"!#tt ("+.clic.*,#(cti (*+)*".test"+.hide*+/ 0+/ 0+/ </script> </head> <! d$> <h' class="test">Este es #( e(ca!e1ad </h'> <p class="test">Este es #( p2rra, c ( class=5test5</p> <p>Este es tr p2rra, </p> <!#tt (>Clic. a"#4</!#tt (> </! d$> </html>

    u! son e&entos#
    6odas las di/erentes acciones %ue )ace un &isitante y %ue una p+1ina 0eb puede responder son llamados e&entos. 8n e&ento representa el preciso momento cuando al1o sucede. ."emplo: Mo&er el ratn sobre un elemento. Seleccionando un radio button. Hacer clicG sobre un elemento. .l t!rmino (disparar, es usado a menudo con e&entos. ."emplo: (.l e&ento Geypress se dispar al momento en %ue presionaste la tecla,. 2c+ )ay al1unos e&entos D4M comunes: .&entos del Ratn clicG dblclicG mouseenter mouselea&e .&entos del 6eclado Geypress Geydo0n Geyup .&entos del Iormulario .&entos del documento7&entana submit c)an1e /ocus blur load resi*e scroll unload

    SintaCis " uery para m!todos de e&entos


    .n " uery' la mayor-a de los e&entos D4M tienen un m!todo " uery e%ui&alente. Eara asi1nar un e&ento clicG a todos los p+rra/os en la p+1ina puedes )acer esto: D:(p,;.clicG:;J .l si1uiente paso es de/inir %u! podr-a suceder cuando el e&ento se dispare. Eodr-as pasar una /uncin al e&ento: D:(p,;.clicG:/unction:;K 77ac+ &an las acciones L;J

    M!todos de .&entos " uery comHnmente usados


    D:document;.ready:; .l m!todo D:document;.ready:; nos permite e"ecutar una /uncin cuando el documento est! totalmente car1ado.

    ClicG:;
    .l m!todo clicG :; atribuye una /uncin de controlador de e&entos a un elemento H6M5. 5a /uncin es e"ecutada cuando el usuario )ace clicGs sobre elementos H6M5. .l si1uiente e"emplo dice: Cuando un e&ento clicG se dispara en un elemento <p=J oculta el actual elemento <p=:
    <!DOCTYPE html> <html>

    <head> <script src="http://ajax.g gleapis.c m/ajax/li!s/j"#er$/%.%&.'/j"#er$.mi(.js"> </script> <script> )*d c#me(t+.read$*,#(cti (*+)*"p"+.clic.*,#(cti (*+)*this+.hide*+/ 0+/ 0+/ </script> </head> <! d$> <p>6i das clic. s !re mi7 desaparecer8</p> <p>9a1me clic. tam!i8(</p> <p>Tam!i8( clic.eame</p> </! d$> </html>

    dblclicG:;
    .l m!todo dblclicG :; atribuye una /uncin de controlador de e&entos a un elemento H6M5. 5a /uncin es e"ecutada cuando el usuario )ace doble?clicG sobre elementos H6M5:
    <!DOCTYPE html> <html> <head> <script src="http://ajax.g gleapis.c m/ajax/li!s/j"#er$/%.%&.'/j"#er$.mi(.js"> </script> <script> )*d c#me(t+.read$*,#(cti (*+)*"p"+.d!lclic.*,#(cti (*+)*this+.hide*+/ 0+/ 0+/ </script> </head> <! d$> <p>6i haces d !le clic. s !re m47 desaparecer8</p> <p>9a1me d !le clic.!!</p> <p>: mi tam!i8(</p> </! d$> </html>

    ./ectos con " uery " uery )ide:; y s)o0:;


    Con " uery' puedes ocultar y mostrar elementos H6M5 con los m!todos )ide:; y s)o0:;: ."emplo:
    <!DOCTYPE html>

    <html> <head> <script src="http://ajax.g gleapis.c m/ajax/li!s/j"#er$/%.%&.'/j"#er$.mi(.js"> </script> <script> )*d c#me(t+.read$*,#(cti (*+)*"3hide"+.clic.*,#(cti (*+)*"p"+.hide*+/ 0+/ )*"3sh ;"+.clic.*,#(cti (*+)*"p"+.sh ;*+/ 0+/ 0+/ </script> </head> <! d$> <p>6i das clic. e( el ! t<( Oc#ltar7 desaparecer8</p> <!#tt ( id="hide">Oc#ltar</!#tt (> <!#tt ( id="sh ;">= strar</!#tt (> </! d$> </html>

    SintaCis:
    D:selector;.)ide:speed'callbacG;J D:selector;.s)o0:speed'callbacG;J .l par+metro opcional speed espec-/ica la &elocidad de ocultar7mostrar' y puede tomar los si1uientes &alores: (slo0,' (/ast,' o milise1undos. .l par+metro opcional callbacG es una /uncin a ser e"ecutada despu!s de %ue el m!todo )ide:; o s)o0:; termine. .l si1uiente e"emplo demuestra el par+metro speed con )ide:;:
    <!DOCTYPE html> <html> <head> <script src="http://ajax.g gleapis.c m/ajax/li!s/j"#er$/%.%&.'/j"#er$.mi(.js"> </script> <script> )*d c#me(t+.read$*,#(cti (*+)*"!#tt ("+.clic.*,#(cti (*+)*"p"+.hide*%&&&+/ 0+/ 0+/ </script> </head> <! d$> <!#tt (>Oc#ltar</!#tt (> <p>Este es #( p2rra, c ( alg de c (te(id .</p> <p>Este es tr p2rra, pe"#e> </p> </! d$> </html>

    " uery to11le


    Con " uery' puedes )acer palanca entre los m!todos )ide:; y s)o0:; con el m!todo to11le:;.

    Mostrando elementos %ue est+n ocultos y ocultando elementos %ue son &isibles:
    <!DOCTYPE html> <html> <head> <script src="http://ajax.g gleapis.c m/ajax/li!s/j"#er$/%.%&.'/j"#er$.mi(.js"> </script> <script> )*d c#me(t+.read$*,#(cti (*+)*"!#tt ("+.clic.*,#(cti (*+)*"p"+.t ggle*+/ 0+/ 0+/ </script> </head> <! d$> <!#tt (>T ggle</!#tt (> <p>Este es #( p2rra, c ( #( pe"#e> <p>Este es tr pe"#e> p2rra, </p> </! d$> </html>

    c (te(id </p>

    SintaCis:
    D:selector;.to11le:speed'callbacG;J .l par+metro opcional speed espec-/ica la &elocidad de ocultar7mostrar' y puede tomar los si1uientes &alores: (slo0,' (/ast,' o milise1undos. .l par+metro opcional callbacG es una /uncin a ser e"ecutada despu!s de %ue el m!todo to11le:; termine.

    M!todo " uery /ade6o11le:;


    .l m!todo " uery /ade6o11le:; )ace palanca entre los m!todos /adeIn:; y /ade4ut:;. Si los elementos est+n desaparecidos' /ade6o11le:; los apareder+. Si los elementos est+n des&anecidos' /ade6o11le:; los desaparecer+. D:selector;./ade6o11le:speed'callbacG;J .l par+metro opcional espec-/ica la duracin del e/ecto. .ste puede tomar los si1uientes &alores: (slo0,' (/ast,' o milise1undos. ."emplo:
    <!DOCTYPE html> <html> <head> <script src="http://ajax.g gleapis.c m/ajax/li!s/j"#er$/%.%&.'/j"#er$.mi(.js"> </script> <script> )*d c#me(t+.read$*,#(cti (*+)*"p"+.clic.*,#(cti (*+)*"3di?'"+.,adeT ggle*"sl ;"+/

    0+/ 0+/ </script> </head> <! d$> <di? id="di?%" alig(="ce(ter" st$le="paddi(g:@px/;idth:A&&px/height:B&px/!ac.gr #(dC c l r:3DCDDC'/margi(C! tt m:@px/! rderCradi#s:@px/! rder:'px s lid 3ECF&@A/"> <p>9a1 clic. s !re mi7 $ c#ltar8/m strar8 el di? de a!aj .</p> </di?> <di? id="di?'" st$le=";idth:A&&px/height:%&&px/!ac.gr #(dCc l r:3DCDDC'/! rderC radi#s:@px/! rder:'px s lid 3ECF&@A/"></di?> </! d$> </html>

    6odo el material /ue eCtra-do de )ttp:77000.0Msc)ools.com7"%uery7de/ault.asp

    También podría gustarte