Introducción básica a jQuery

7 de julio 2009
Tags:

jQuery es una libreria Javascript compacta y rápida que simplifica el que podamos recorrer nuestro HTML, manejar eventos, crear animaciones y de trabajar al fin y al cabo de una manera fácil con la tecnología AJAX para desarrollar webs. jQuery cambiará radicalmente tu forma de trabajar con JavaScript.

Cargando la librería jQuery en nuestro HTML

Vamos a ver lo más básico de jQuery, lo primero que haremos es crear un archivo HTML  llamado index.html con el siguiente contenido:

    <script src="jquery.js" type="text/javascript"></script>
    <script type="text/javascript"></script>
    <a href="http://jquery.com/">jQuery</a>

Segun hemos establecido en el atributo src, tenemos que establecer el archivo jquery.js en el mismo directorio de nuestro archivo index.html.
El archivo jquery.js, es decir, la libreria jQuery lo puedes descrgar de:

Ejecutando código al cargar la página

Los programadores JavasScript estarán acostumbrados a usar código de éste tipo:

 window.onload = function(){ alert("welcome"); }

Pero con jQuery, si queremos ejecutar algo justo despues de que se cargue la página,tendremos que usar el evento jQuery llamado “evento ready”:

 $(document).ready(function(){
   // Aqui va el codigo
 });

Vamos, por ejemplo, a hacer que se muestre una ventana con un mensaje cuando pulsemos el enlace de nuestra página.

 $(document).ready(function(){
   $("a").click(function(event){
     alert("Hola Mundo!");
   });
 });

Guarda el archivo index.html y ábrelo para ver el resultado, deberias ver una ventana con le mensaje “Hola Mundo” cuando pulses el enlace.

Lo aconsejable, para conseguir un código mas limpio y legible, es poner nuestro código jQuery en archivos .js y luego cargarlos en nuestro HTML del mismo modo que hemos cargado el archivo jquery.js, pero para nuestro tutorial lo pondremos todo en el HTML, asi pues, el ejemplo completo quedaría así:


   <script src="jquery.js" type="text/javascript"><!--mce:2--></script>
   <script type="text/javascript"><!--mce:3--></script>

   <a href="#">jQuery</a>

Añadiendo y quitando clases CSS

jQuery también nos permite de forma fácil, añadir y eliminar clases CSS. Para ver un ejemplo, primero añadimos algo de estilo CSS a nuestro HTML:

Podemos por ejemplo hacer que al clickar sobre el enlace, se añada una clase CSS al enlace para que el texto se muestre en negrita:


$("a").addClass("test");

Para eliminar la clase hacemos lo siguiente:


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

Animaciones

La libreria jQuery tiene una gran cantidad de efectos y animaciones para dotar de dinamismo a nuestras webs. Veamos por ejemplo, como hacer desaparecer el enlace al clickar sobre él:


 $("a").click(function(event){
   event.preventDefault();
   $(this).hide("slow");
 });

Ésto debe servirte como punto de partida, con jQuery se pueden hacer muchisimas cosas mas, para aprender mas te recomiendo que leas la documentación oficial de jQuery en http://docs.jquery.com/Main_Page

«
»

Comments are closed.