Cristalab Cristalab * Blog * Foros * Tutoriales o Flash Novatos o Flash Masters o RIAs o Servidor o CSS y AJAX o Diseo o Otros * Tips o Actionscript o CSS o PHP o Photoshop o Flash o Flex * Cursos o Curso de Flash o Curso de HTML * Tags * * * * Ejemplos Comics Anime FAQ * Colaborar * Registrate * Ests en: Cristalab > Tutoriales > *Tutorial de jQuery* Tutorial de jQuery Por: Lunatic Lycanthrop 8 de Marzo del 2007 CSS y Javascript 1376 de clabLevel Otros artculos de Lunatic Lycanthrop 147,785 visitas javascript css xhtml 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 tamao. Por que debera usarlo? La sencillez de su sintaxis y la poca extension del codigo que necesitas escribir son las caracteristicas ms 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 ms o menos 16k) puedes proceder a tu primer script: Prueba de jQuery Lo primero que hacemos es linkear el jQuery a nuestro documento. Facil, no? Ejecucin y sintaxis bsica 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 mtodo propio de jQuery, que revisa si el DOM est listo para usarse. Es ms 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 pgina es sencillo pues se usa la misma nomenclatura que en CSS: 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 (class) Clase precedida por un punto (.). Ejemplos: ".codigo", ".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 supresin del "on" inicial: mouseover, click, focus, etc Veamos todo junto Veamos un ejemplo de lo visto hasta ahora: Prueba de jQuery $(document).ready(function (){ //Aqui asignamos el click al elemento $("a").click(function (){ alert("Presionaste un "); }); }); Presioname! Al presionar cualquier etiqueta "a" del documento, se ejecutaria el alert. Aadir 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 aadirle CSS a esa determinada clase, y ver como se comporta:

Prueba de jQuery $(document).ready(function (){ //Aqui asignamos el click al elemento $("a").click(function (){ alert("Presionaste un "); //Aqui removemos la clase! $("a").removeClass("boton"); }); //Aqui aadimos la clase a los elementos $("a").addClass("boton"); }); .boton{ color:#f00; display:block; width:100px; text-align:center; border:#f00 solid 1px; } Presionam e! Al ejecutarse el script, todos los "a", tomarn la clase "boton", que tiene propiedades de CSS. Sin embargo, al oprimir el elemento, la clase es removida. Efectos especiales Esta librera tambin esta compuesta por algunos efectos, que resultan muy tiles. Son livianos y faciles de llamar. A continuacin, una breve descripcion de cuales son, que hacen y como se usan: Nombre del efecto Descripcion Descripcion de los parmetros Show (Mostrar) Modifica los atributos alto, ancho y transparencia, partiendo de 0. $(objeto).show("velocidad") *Velocidad*: Determina el tiempo en el que se realizar el efecto. Puede ser "slow" (lento), "normal", o "fast" (rpido). Hide (Ocultar) Modifica los atributos alto, ancho y transparencia,

partiendo de los valores actuales hasta llegar a 0. $(objeto).hide("velocidad") Slide Down (Aparecer hacia abajo) Modifica los atributos alto y transparencia, partiendo de 0. Es similar a "show", salvo que no modifica el ancho, creando un efecto de "cortinilla". $(objeto).slideDown("velocidad") Slide Up (Aparecer hacia arriba) Modifica los atributos alto y transparencia, partiendo de los actuales, hasta llegar a 0. Es similar a "show", salvo que no modifica el ancho, creando un efecto de "cortinilla". $(objeto).slideUp("velocidad") Fade In(Aparecer) Modifica el atributo transparencia desde 0.

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

$(objeto).center("velocidad"); Fade To(Cambiar transparencia) Modifica el atributo transparencia a un valor especifico. $(objeto).fadeTo("velocidad", transparencia) *Velocidad*: Determina el tiempo en el que se realizar el efecto. Puede ser "slow" (lento), "normal", o "fast" (rpido). *Transparencia*: Un numero de 0 a 100 que indica que tan visible es el elemento. Animate (Animar) Modifica un atributo especifico. $(objeto).animate("propiedades","velocidad"); *Velocidad*: Determina el tiempo en el que se realizar el efecto. Puede ser "slow" (lento), "normal", o "fast" (rpido). *Propiedades*: Una o ms propiedades con valor numrico en CSS, por ejemplo width y height. La llamada seria: $(objeto).animate({width:20,height: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 ejecucin, llamar funciones. Los

efectos, por ejemplo, permiten un parmetro opcional, el de "callback". De modo que la sintaxis para un efecto con callback, sera (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"); }); Conclusiones Este tutorial es a modo de introduccion. Depende de ti explorar jQuery para explotar todas sus funcionalidades. Para conocer ms a fondo esta librera, puedes visitar los siguientes vinculos: * *Descarga los ejemplos de este tutorial* * Pgina principal de jQuery * Documentacin de jQuery * Tutoriales de jQuery * Descargas de jQuery * Blog de jQuery Informacin adicional Ejemplo del tutorial Archivos del tutorial Si tienes alguna pregunta de este tutorial; puedes hacerla aqui en los foros Artculos Relacionados * Tutorial de AJAX * AJAX en jQuery * Crear plugins para jQuery Cristalab Blog Foros Comics Tutoriales Tutoriales de Flash Ejemplos Anime Tips FAQ Colaborar