Scribd
Cargar
56 vistas

Tutorial de Jquery

jQuery es una librería JavaScript ligera para interactuar con elementos web a través del DOM. Su sintaxis sencilla requiere menos código que usar métodos como getElementById. Los comandos jQuery comienzan con "$" y siguen la forma "$(elemento).evento(función)". jQuery hace que sea más fácil acceder y modificar elementos, añadir efectos y llamadas de retorno.

Cargado por

Espiax Espi
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
56 vistas

Tutorial de Jquery

jQuery es una librería JavaScript ligera para interactuar con elementos web a través del DOM. Su sintaxis sencilla requiere menos código que usar métodos como getElementById. Los comandos jQuery comienzan con "$" y siguen la forma "$(elemento).evento(función)". jQuery hace que sea más fácil acceder y modificar elementos, añadir efectos y llamadas de retorno.

Cargado por

Espiax Espi
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 8

Tutorial de jQuery

jQuery es una liviana libreria de JavaScript, pensada para interactuar con los elementos de
una web por medio del DOM. Lo que la hace tan especial es su sencillez y su reducido
tamaño.

¿Por que debería usarlo?

La sencillez de su sintaxis y la poca extension del codigo que necesitas escribir son las
caracteristicas más notables. Si hicieras lo que hace jQuery con getElementById y
window.onload no solo tendrias que escribir mucho, si no que podrian haber diversos
problemas.

¿Como empiezo a usarlo?


Lo primero que debes hacer, es descargarlo de la web oficial: jQuery. Una vez descargada la
libreria (son más o menos 16k) puedes proceder a tu primer script:

<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>

Lo primero que hacemos es linkear el jQuery a nuestro documento. Facil, no?

Ejecución y sintaxis básica

jQuery tiene una sintaxis muy sencilla. Los comandos se reconocen por comenzar con el
simbolo "$". Ahora, la forma de una sentencia es la siguiente:

$(elemento).evento(funcion-o-parametro);
La manera de inicializar jQuery es muy util:

$(document).ready(function(){

    //Aqui tu codigo

});

Ready es un método propio de jQuery, que revisa si el DOM está listo para usarse. Es más util
que el window.onload, pues este debe esperar a que todos los elementos de la pagina esten
cargados (como scripts e imagenes) paa ejecutar. El "ready", en cambio, espera solo a la
estructura.

Acceso a elementos y eventos

Acceder a los elementos de la página es sencillo pues se usa la misma nomenclatura que
enCSS:

Tipo de elemento Modo de llamado

Etiqueta Nombre de la etiqueta. Ejemplos: "a", "strong", "div"

Elemento con un Id Id precedido por el signo "#". Ejemplos: "#principal","#texto"

Elemento con una clase Clase precedida por un punto (.). Ejemplos: ".codigo",
(class) ".titulo"

Nota: Tambien funcionan muchos de los selectores de CSS como ">", "*", etc. Un ejemplo de
su uso seria:

$("* > a").click( function(){alert("nada");});

Los eventos que se pueden usar son los mismos que usariamos normalmente. El unico
cambio es la supresión del "on" inicial: mouseover, click, focus, etc

Veamos todo junto

Veamos un ejemplo de lo visto hasta ahora:

<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>

Al presionar cualquier etiqueta "a" del documento, se ejecutaria el alert.

Añadir o retirar clases

Cuando queremos que un elemento pueda interactuar con un css ya establecido, usamos las
clases. Con jQuery, estas pueden ser asignadas dinamicamente:

$("a").addClass("boton");
O tambien removidas:

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

Ahora, podemos añadirle CSS a esa determinada clase, y ver como se comporta:

<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 añadimos 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>

Al ejecutarse el script, todos los "a", tomarán la clase "boton", que tiene propiedades de CSS.
Sin embargo, al oprimir el elemento, la clase es removida.

Efectos especiales

Esta librería también esta compuesta por algunos efectos, que resultan muy útiles. Son
livianos y faciles de llamar. A continuación, una breve descripcion de cuales son, que hacen y
como se usan:

Nombre del Descripcion Descripcion de los parámetros


efecto

Modifica los atributos alto, ancho y


Show transparencia, partiendo de 0.
(Mostrar)

$(objeto).show("velocidad")
Modifica los atributos alto, ancho y
transparencia, partiendo de los valores
Hide
actuales hasta llegar a 0.
(Ocultar)

$(objeto).hide("velocidad")
Modifica los atributos alto y transparencia,
partiendo de 0. Es similar a "show", salvo
Slide Down
que no modifica el ancho, creando un
(Aparecer
efecto de "cortinilla". 
hacia abajo)

$(objeto).slideDown("velocidad")
Modifica los atributos alto y transparencia, Velocidad: Determina el tiempo en el
partiendo de los actuales, hasta llegar a 0. que se realizará el efecto. Puede ser
Slide Up Es similar a "show", salvo que no modifica "slow" (lento), "normal", o "fast"
(Aparecer el ancho, creando un efecto de (rápido).
hacia arriba) "cortinilla". 

$(objeto).slideUp("velocidad")
Modifica el atributo transparencia desde
Fade 0.
In(Aparecer)

$(objeto).fadeIn("velocidad")
Modifica el atributo transparencia desde el
Fade
valor actual, hasta llegar a 0.
Out(Desapar
ecer)
$(objeto).fadeOut("velocidad")
Centra un elemento con respecto a su
Center "parent".
(Centrar)

$(objeto).center("velocidad");
Velocidad: Determina el tiempo en el
que se realizará el efecto. Puede ser
Fade Modifica el atributo transparencia a un "slow" (lento), "normal", o "fast"
To(Cambiar valor especifico. (rápido). 
transparenci
a) $(objeto).fadeTo("velocidad", Transparencia: Un numero de 0 a
transparencia) 100 que indica que tan visible es el
elemento.

Velocidad: Determina el tiempo en el


que se realizará el efecto. Puede ser
"slow" (lento), "normal", o "fast"
(rápido). 
Modifica un atributo especifico.
Animate Propiedades: Una o más
(Animar) $ propiedades con valor numérico en
(objeto).animate("propiedades","ve
CSS, por ejemplo width y height. La
locidad");
llamada seria:

$
(objeto).animate({width:20,hei
ght:200}, "slow");
"Callbacks", llamar funciones y pasar parametros

Despues de un evento se pueden llamar otras funciones JavaScript y jQuery, de la forma


tradicional:

funcion();

Hay eventos que permiten, acabada su ejecución, llamar funciones. Los efectos, por ejemplo,
permiten un parámetro opcional, el de "callback". De modo que la sintaxis para un efecto con
callback, sería (por ejemplo) la siguiente:

$(objeto).show("velocidad", funcion);

Nota: La funcion debe colocarse sin los parentesis y sin comillas

Como no se pueden usar parentesis en un callback, el modo de pasar los parametros seria el
siguiente:
$(objeto).show("slow", function(){

    lafuncion("parametro1","parametro2");

});

También podría gustarte