Tutorial de JQuery

Tutorial de jQuery

El mejor resumen de lo que es jQuery lo podemos encontrar en el lema de su propia página web: “La librería JavaScript para escribir menos y hacer más”. Ampliando algo más esta definición, dejémoslo en que es una forma de convertir el desarrollo de la parte de cliente de una aplicación web en algo mucho más divertido, rápido y sencillo, facilitando la interacción con loselementos del árbol de documento, el manejo de eventos, el uso de animaciones, etc.
Con algo más de 4 años de vida, jQuery se ha convertido en la librería JavaScript más utilizada actualmente, y es que, además, es gratuita, de código abierto (bajo licencia MIT y GPL v2) e increíblemente ligera. Entre sus usuarios podemos encontrar a Google, Microsoft, IBM, Amazon, Twitter, WordPress, Mozilla oDrupal.
Para poder utilizar esta librería lo primero que tendremos que hacer será incluir su código en nuestro proyecto. Podemos descargar el script desde su página web, subirlo a nuestro servidor, y ejecutarlo con la etiqueta script:

También podemos cargarla directamente desde el CDN que mantiene Google:

el de Microsoft:

o el del propio jQuery

Independientemente de la opción elegida,ya estaremos listos para comenzar a trabajar con la librería. Sin embargo, y aunque no es estrictamente necesario, os aconsejaría tener unos conocimientos básicos de JavaScript primero, conocimientos que podéis obtener con nuestro tutorial de JavaScript Y ahora, manos a la obra.
El corazón de jQuery es la función sobrecargada del mismo nombre, jQuery, que ofrece distinta funcionalidad dependiendode los parámetros utilizados. Además, como JavaScript también toma conceptos del paradigma funcional, y las funciones no son más que otro tipo de objeto, la función jQuery cuenta a su vez con distintas propiedades y métodos. La intención de esta decisión de diseño es la de evitar llenar el espacio de nombres global con montones de nombres inútiles esperando a colisionar.
Si queremos escribirmenos y que nuestros archivos sean más pequeños, y si no utilizamos ninguna otra librería que pueda causar algún conflicto con este símbolo, también podemos utilizar el alias $ en sustitución de jQuery.

Selectores jQuery
El primer paso a la hora de trabajar con jQuery es seleccionar los elementos del árbol de documento sobre los que queremos trabajar. Para ello se utiliza la función jQuery,pasando como argumento a la función una cadena con un selector, la mayoría de los cuales utilizan una sintaxis similar a la de CSS 3. El engine que utiliza jQuery para seleccionar elementos se llama Sizzle, y puede descargarse y utilizarse de forma aislada.
Los distintos selectores que podemos utilizar son los siguientes:

Selectores básicos
Selector universal: selecciona todos los elementos dela página (CSS 2)
1. jquery("*")  
jquery("*")
Selector de tipo o etiqueta: selecciona todos los elementos con el tipo de etiqueta indicado (CSS 1)
1. jQuery("div")  
jQuery("div")
Selector de clase: selecciona todos los elementos con la clase indicada (atributo class) (CSS 1)
1. jQuery("div.entrada")  
jQuery("div.entrada")
Selector de identificador: selecciona el elemento con elidentificador (atributo id) indicado (CSS 1)
1. jQuery("div#cabecera")  
jQuery("div#cabecera")
Grupos de selectores: se puede combinar el resultado de varios selectores distintos separándolos con comas (CSS 1)
1. jquery("p,div,a")  


jquery("p,div,a")
Selectores de atributos
Selector de atributo: selecciona elementos que tengan un cierto atributo (CSS 2)
1. jquery("a[rel]")  jquery("a[rel]")
También se puede seleccionar aquellos que tengan un cierto valor para un atributo (CSS 2)
1. jquery("a[rel='nofollow']")  
jquery("a[rel='nofollow']")
O que tengan un valor distinto del indicado (jQuery)
1. jQuery("a[rel!='nofollow']")  
jQuery("a[rel!='nofollow']")
Aquellos cuyo valor empieza por una cierta cadena (CSS 3)
1. jquery("a[href^='http://www.tu-pagina.com.ar/']")  ...