Curso rápido de Jquery

Jquery como muchos saben es puramente una biblioteca, una biblioteca escrita en javascript que, usándola correctamente, nos hace la programación web muchísimo más fácil y dinámica. La biblioteca Jquery es software libre, es decir, que no necesitamos pagar una licencia para usarla y eso se lo debemos a John Resig, creador inicial de Jquery.

Características

Eventos (click, hover, mouseover, bind,change,etc) Selección de elementos DOM (ul > li, table tr, div, div p:first-child, etc…) Efectos (animaciones como bind, show, explode, folder,clip, etc…) Modificación de CSS: addclass, removeclass, .css(“display”,”none”), etc. Animaciones personalizadas AJAX Otras utilidades varias, como obtener información de los navegadores, quitar espacios en blanco (trim), etc. Al ser código abierto (Licencia GNU), existen muchos plugins y extensiones para ampliar la funcionalidad de Jquery, como Jquery User Interface (UI), Validator, Fancybox, etc). Compatible con todos los navegadores en casi todas sus versiones.

Instalación

La instalación de Jquery es de lo más sencilla que he visto, basta con bajarse la última versión de dicha biblioteca por ejemplo en su web oficial, descomprimirla en su caso e introducirla en una carpeta de tu web. Ahora solo te queda indicar al código de tu web que quieres usar dicha biblioteca, si lo hemos introducido por ejemplo en una carpeta llamada “js”, se lo indicamos de la siguiente manera dentro de las etiquetas del html:

Y listo, ya podemos usar Jquery.

Uso

En la inmensa mayoría de los casos querremos usar Jquery para modificar o interactuar con algún elemento DOM de la web, por lo cual primeramente deberemos indicar cuál, esto lo haremos con un localizador. Éste localizador siempre deberemos escribirlo con con la función Jquery:

Jquery(“table”)  ó  $(“table”)

$() es lo mismo que Jquery(), podemos llamarlo de las dos formas ya que la biblioteca se ha construido para que podamos simplificarlo, en esta localización estamos cogiendo cualquier tabla del árbol DOM. Si por ejemplo vemos la siguiente línea:

$(“table”).css(“width”,”200px ”);

Estamos dando un valor de estilo a todas las tablas de la web, poníendoles un ancho de 200 pixels, pero si queremos hacerlo con alguna en concreto podemos hacerlo:

$(“table.ancha”).css(“width”,