Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • 1.tutorial de JQuery

    Cargado por

    Sergio Aramayo
    20 vistas5 páginas
    programación Front End con JQuery

    Título original

    1.Tutorial de JQuery

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento
    programación Front End con JQuery

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    20 vistas5 páginas

    1.tutorial de JQuery

    Cargado por

    Sergio Aramayo
    programación Front End con JQuery

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 5

    Olvidastetuusuariooclave?

    Usuario

    Contrasea

    o registrate

    Entrar

    Buscar..

    Foros Blog Tutoriales Cursos Videotutoriales Comic

    Publicauntutorial

    QuesCristalab?

    Tags

    Ququieresbuscar?

    Ejemplos

    Contctanos

    Buscar

    Tutoriales / TutorialdejQuery

    TutorialdejQuery
    PorLunaticLycanthrop el08deMarzode2007 con582,868visitas
    HTML,CSSyJavascript OtrostutorialesporLunaticLycanthrop.

    82
    Like

    66

    27

    Tw ittear

    jQueryesunalivianalibreriadeJavaScript,pensadaparainteractuarconloselementosdeunawebpormedio
    DOM.Loquelahacetanespecialessusencillezysureducidotamao.

    Porquedeberausarlo?

    Lasencillezdesusintaxisylapocaextensiondelcodigoquenecesitasescribirsonlascaracteristicasms
    notables.SihicierasloquehacejQuerycongetElementByIdywindow.onloadnosolotendriasqueescribirmuc
    noquepodrianhaberdiversosproblemas.

    Comoempiezoausarlo?

    Loprimeroquedebeshacer,esdescargarlodelaweboficial:jQuery.Unavezdescargadalalibreria(sonms
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Prueba de jQuery</title>
    <script src="jquery.js" type="text/javascript">
    </script>
    </head>
    <body>
    </body>
    </html>
    menos16k)puedesprocederatuprimerscript:
    LoprimeroquehacemoseslinkeareljQueryanuestrodocumento.Facil,no?

    Ejecucinysintaxisbsica
    jQuerytieneunasintaxismuysencilla.Loscomandossereconocenporcomenzarconelsimbolo"$".Ahora,laformadeunasentenciaeslasiguiente:
    $(elemento).evento(funcion-o-parametro);

    LamaneradeinicializarjQueryesmuyutil:
    $(document).ready(function(){
    //Aqui tu codigo
    });

    ReadyesunmtodopropiodejQuery,querevisasielDOMestlistoparausarse.Esmsutilqueelwindow.onload,puesestedebeesperaraquetodoslos
    elementosdelapaginaestencargados(comoscriptseimagenes)paaejecutar.El"ready",encambio,esperasoloalaestructura.

    Accesoaelementosyeventos
    AccederaloselementosdelapginaessencillopuesseusalamismanomenclaturaqueenCSS:
    Tipodeelemento
    Etiqueta

    Mododellamado
    Nombredelaetiqueta.Ejemplos:"a","strong","div"

    ElementoconunId

    Idprecedidoporelsigno"#".Ejemplos:"#principal","#texto"

    Elementoconunaclase(class) Claseprecedidaporunpunto(.).Ejemplos:".codigo",".titulo"
    Nota:TambienfuncionanmuchosdelosselectoresdeCSScomo">","*",etc.Unejemplodesuusoseria:
    $("* > a").click( function(){alert("nada");});

    Loseventosquesepuedenusarsonlosmismosqueusariamosnormalmente.Elunicocambioeslasupresindel"on"inicial:mouseover,click,focus,etc

    Veamostodojunto
    Veamosunejemplodelovistohastaahora:
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Prueba de jQuery</title>
    <script src="jquery.js" type="text/javascript">
    </script>
    <script type="text/javascript">
    $(document).ready(function (){
    //Aqui asignamos el click al elemento <a>
    $("a").click(function (){
    alert("Presionaste un <a>");
    });
    });
    </script>
    </head>
    <body>
    <a href="#"> Presioname! </a>
    </body>
    </html>

    Alpresionarcualquieretiqueta"a"deldocumento,seejecutariaelalert.

    Aadiroretirarclases

    Cuandoqueremosqueunelementopuedainteractuarconuncssyaestablecido,usamoslasclases.ConjQuery,estaspuedenserasignadasdinamicament
    $("a").addClass("boton");

    Otambienremovidas:
    $("a").removeClass("boton");

    Ahora,podemosaadirleCSSaesadeterminadaclase,yvercomosecomporta:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>
    Prueba de jQuery
    </title>
    <script src="jquery.js" type="text/javascript">
    </script>
    <script type="text/javascript">
    $(document).ready(function (){
    //Aqui asignamos el click al elemento <a>
    $("a").click(function (){
    alert("Presionaste un <a>");
    //Aqui removemos la clase!
    $("a").removeClass("boton");
    });
    //Aqui aadimos la clase a los elementos <a>
    $("a").addClass("boton");
    });
    </script>
    <style type="text/css">
    .boton{
    color:#f00;
    display:block;
    width:100px;
    text-align:center;
    border:#f00 solid 1px;
    }
    </style>
    </head>
    <body>
    <a href="#" class="algo">Presioname!</a>
    </body>
    </html>

    Alejecutarseelscript,todoslos"a",tomarnlaclase"boton",quetienepropiedadesdeCSS.Sinembargo,aloprimirelelemento,laclaseesremovida.

    Efectosespeciales
    Estalibreratambinestacompuestaporalgunosefectos,queresultanmuytiles.Sonlivianosyfacilesdellamar.Acontinuacin,unabrevedescripcionde
    cualesson,quehacenycomoseusan:
    Nombredel
    efecto

    Descripcion

    Descripciondelosparmetros

    Modificalosatributosalto,anchoytransparencia,partiendode0.
    Show(Mostrar)

    Hide(Ocultar)

    $(objeto).show("velocidad")
    Modificalosatributosalto,anchoytransparencia,partiendode
    losvaloresactualeshastallegara0.
    $(objeto).hide("velocidad")

    SlideDown
    (Aparecerhacia
    abajo)

    SlideUp
    (Aparecerhacia
    arriba)

    Modificalosatributosaltoytransparencia,partiendode0.Es
    similara"show",salvoquenomodificaelancho,creandoun
    efectode"cortinilla".
    $(objeto).slideDown("velocidad")
    Modificalosatributosaltoytransparencia,partiendodelos
    actuales,hastallegara0.Essimilara"show",salvoqueno
    modificaelancho,creandounefectode"cortinilla".

    Velocidad:Determinaeltiempoenelqueserealizarel
    efecto.Puedeser"slow"(lento),"normal",o"fast"
    (rpido).

    $(objeto).slideUp("velocidad")

    Fade

    Modificaelatributotransparenciadesde0.

    In(Aparecer)

    $(objeto).fadeIn("velocidad")

    Fade

    Modificaelatributotransparenciadesdeelvaloractual,hasta
    llegara0.

    Out(Desaparecer)

    $(objeto).fadeOut("velocidad")
    Centraunelementoconrespectoasu"parent".

    Center(Centrar)

    $(objeto).center("velocidad");
    Velocidad:Determinaeltiempoenelqueserealizarel
    Modificaelatributotransparenciaaunvalorespecifico.

    FadeTo(Cambiar
    transparencia)

    $(objeto).fadeTo("velocidad", transparencia)

    efecto.Puedeser"slow"(lento),"normal",o"fast"
    (rpido).
    Transparencia:Unnumerode0a100queindicaque
    tanvisibleeselelemento.
    Velocidad:Determinaeltiempoenelqueserealizarel
    efecto.Puedeser"slow"(lento),"normal",o"fast"
    (rpido).

    Modificaunatributoespecifico.
    Animate(Animar)

    Propiedades:Unaomspropiedadesconvalor

    $(objeto).animate("propiedades","velocidad");numricoenCSS,porejemplowidthyheight.Lallamada
    seria:
    $(objeto).animate({width:20,height:200},
    "slow");

    "Callbacks",llamarfuncionesypasarparametros
    DespuesdeuneventosepuedenllamarotrasfuncionesJavaScriptyjQuery,delaformatradicional:
    funcion();

    Hayeventosquepermiten,acabadasuejecucin,llamarfunciones.Losefectos,porejemplo,permitenunparmetroopcional,elde"callback".Demodoque
    sintaxisparaunefectoconcallback,sera(porejemplo)lasiguiente:
    $(objeto).show("velocidad", funcion);

    Nota:Lafunciondebecolocarsesinlosparentesisysincomillas
    Comonosepuedenusarparentesisenuncallback,elmododepasarlosparametrosseriaelsiguiente:
    $(objeto).show("slow", function(){
    lafuncion("parametro1","parametro2");
    });

    Conclusiones

    Estetutorialesamododeintroduccion.DependedetiexplorarjQueryparaexplotartodassusfuncionalidades.Paraconocermsafondoestalibrera,pued
    visitarlossiguientesvinculos:
    Descargalosejemplosdeestetutorial
    PginaprincipaldejQuery
    DocumentacindejQuery
    TutorialesdejQuery
    DescargasdejQuery
    BlogdejQuery
    DescargarArchivo

    Enviauncomentario

    CursodeHTML5enBogot,del13al17
    deseptiembre

    SlidersencilloenjQuery

    Publicatucomentario

    ReproductordevideoenHTML5

    opuedes...

    Elautordeesteartculohacerradoloscomentarios.Sitienespreguntasocomentarios,puedeshacerlos
    enelforo
    Entraalforoyparticipaenladiscusin

    Estsregistradoen
    Cristalabyquieres
    publicartuURLyavatar?
    Iniciasesin

    Noestsregistradoan
    peroquiereshacerloante
    depublicartucomentario
    Registrate

    Blog Foros Tutoriales TutorialesdeFlash Ejemplos.fla Anime Videotutoriales Cursos CursodeFlash CursodeHTML Tags
    CristalabfuncionagraciasaInfranetworking

    También podría gustarte