Primer Ejemplo con JQuery

¿JQuery?

JQuery es una biblioteca para Javascript que nos ahorrará mucho código. Nos permitirá asociar acciones a un tipo concreto de elemento (enlaces, tablas, listas, ...), inteactuar con AJAX, etc (más información aquí).

Un ejemplo

Veremos como al pulsar sobre un enlace cualquiera, se oculte o se muestre una capa de nuestra página.

Para este ejemplo necesitamos los siguiente:

• Un servidor web (yo uso Apache instalado mediante XAMPP).


• La librería jquery (es un archivo.js). Enlace.


• El StarterKit, para hacer ejemplos rápidamente. Enlace.

En el directorio del servidor (en mi caso C:\xampp\htdocs) tendremos guardar el archivo jquery.js que hemos descargado. También los archivos del Starterkit.

Nos fijamos en que StarterKit.html contiene los includes de los .js:

<script src="jquery.js" type="text/javascript"></script>

<script src="custom.js" type="text/javascript"></script>

El archivo custom.js es el que usaremos para realizar nuestras funciones. En éste ejemplo veremos como ocultar un texto con el efecto de barrido. Para ello custom.js será así:

  $(document).ready(function(){ //Línea 1

   $("a").toggle(function(){    //Línea 2

     $(".stuff").hide('slow');  //Línea 3 

   },function(){                //Línea 4

     $(".stuff").show('fast');  //Línea 5

   });

 });

          

Explicación:

Línea 1: Cuando el documento está preparado registra un evento.

Línea 2: Al pulsar sobre cualquier enlace (por eso la variable a) realiza la línea 3.

Línea 3: La capa "stuff" se esconde lentamente.

Línea 4: Al pulsar de nuevo sobre un enlace.

Línea 5: La capa "stuff" se mestra rápidamente.

Para problarlo pondremos en nuestro navegador http://localhost/starterkit.html y pulsamos en un enlace cualquiera.

Fuentes

http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery