jQuery

Es una librería multiplataforma de JavaScript, creada inicialmente por John Resig y ahora mantenido por jquery.com, que permite simplificar la manera de interactuar con los documentos HTML, manipular el árbol DOM, manejar eventos, desarrolla animaciones y agregar interacción con la técnica AJAX a páginas web. Fue presentada el 14-ENE-2006 en el BarCamp NYC.

<Script type="text/javascript" src="jquery.min.js"></Script>
<Script>
	$(document).ready(function() {
		...
	});
</Script>

jQuery es software libre y de código abierto, posee un doble licenciamiento bajo la Licencia MIT y la Licencia Pública General de GNU v2, permitiendo su uso en proyectos libres y privados. Al igual que otras bibliotecas, ofrece una serie de funcionalidades basadas en JavaScript que de otra manera requerirían de mucho más código, es decir, con las funciones propias de esta biblioteca se logran grandes resultados en menos tiempo y espacio.

• Selectores
  • Etiquetas
  • Indices
  • Clases
  • Atributos
  • Pseudo clases
  • Pseudo elementos
  • Especificos
  • Multiples
• Eventos
• Métodos
• Extensiones
• Referencias

1. Selectores

Al igual que en CSS esta es la parte mas importante, seleccionar uno o varios elementos sobre los que actuaremos. Cualquier selector valido debe estar entre comillas simples o dobles, combinación de ellas o usar el método escapado (\").

1.1 Etiquetas

Puedes usar el nombre de la etiqueta directamente.

$("p");                     //Retornara una matriz con todos los elementos p (párrafo).
$("*");                     //Retorna todos los elementos del DOM.
$(this);                    //Retorna este elemento
$(":text");         //Retorna 
$(":input");       //Retorna 
$(":button");      //Retorna 
$(":radio");       //Retorna 
$(":checkbox");    //Retorna 
$(":password");    //Retorna 
$(":submit");      //Retorna 
$(":reset");       //Retorna 
$(":image");       //Retorna 
$(":file");        //Retorna 
$(":header");      //Retorna todos los elementos que son encabezados, como h1, h2, h3, etc.
$(":lang()");               //Retorna todos los elementos del idioma especificado.

Indices

El valor del indice (id) debe ser único por pagina.

$("#elemento");   //Retornara el único elemento con id=elemento.

Clases

La valor de la clase (class) puede repetirse y justamente agrupa una serie de elementos.

$(".linea");        //Retornara una matriz con todos los elementos que tengas class=linea.
$(":input.linea");   //Retornara una matriz con todos los elementos del tipo input que tengas class=linea.

Atributos

El manejo de atributos de los elementos, puedes preguntar si esta definido; si contiene un valor, si no lo contienen, si empieza o termina con cirto valor, etc

$("[href]");           //Retornara una matriz con todos los elementos que tengan declarado el atributo href.
$("[name='menu']");    //Retorna elementos que contengan exactamente igual
$("[name!='menu']");   //Retorna elementos que no contengan
$("[name|='menu']");   //Retorna elementos que
$("[name*='menu']");   //Retorna elementos que contengan la subcadena
$("[name~='menu']");   //Retorna elementos que contengan la palabra
$("[name^='menu']");   //Retorna elementos que comienza exactamente
$("[name$='menu']");   //Retorna elementos que termina exactamente

1.5 Pseudo elementos

Los pseudo elementos permiten seleccionar una sección del DOM sin tener en cuanta una etiqueta en especial, sino mas bien de su posición dentro del DOM.

$(":not()");                //Retorna todos los elementos que no coinciden con el selector dado.
$(":even");                 //Retorna elementos pares, indexados a cero. Ver también impar.
$(":odd");                  //Retorna elementos impares, indexados a cero. Ver también par.
$(":first");                //Retorna el primer elemento DOM coincidente.
$(":last");                 //Retorna el último elemento coincidente.
$("padre<hijo");
$("prev+next");
$("prev~siblings");

$(":first-child");          //Retorna todos los elementos que son el primer hijo de su padre.
$(":first-of-type");        //Retorna todos los elementos que son los primeros entre hermanos del mismo nombre de elemento.
$(":last-child");           //Retorna todos los elementos que son el último hijo de su padre.
$(":last-of-type");         //Retorna todos los elementos que son los últimos entre hermanos del mismo nombre de elemento.
$(":nth-child()");          //Retorna todos los elementos que son el enésimo hijo de su padre.
$(":nth-last-child()");     //Retorna todos los elementos que son el enésimo hijo de su padre, contando desde el último elemento hasta el primero.
$(":nth-last-of-type()");   //Retorna todos los elementos que son el enésimo hijo de su padre en relación con los hermanos con el mismo nombre de elemento, contando desde el último elemento hasta el primero.
$(":nth-of-type()");        //Retorna todos los elementos que son el enésimo hijo de su padre en relación con los hermanos con el mismo nombre de elemento.
$(":only-child");           //Retorna todos los elementos que son el único hijo de su padre.
$(":only-of-type");         //Retorna todos los elementos que no tienen hermanos con el mismo nombre de elemento.

$(":contains()");           //Retorna todos los elementos que contienen el texto especificado.
$(":empty");                //Retorna todos los elementos que no tienen hijos (incluidos los nodos de texto).
$(":has()");                //Retorna elementos que contienen al menos un elemento que coincide con el selector especificado.
$(":parent");               //Retorna todos los elementos que tengan al menos un nodo secundario (ya sea un elemento o texto).
$(":eq(n)");                //Retorna el elemento en el índice n dentro del conjunto coincidente.
$(":lt(n)");                //Retorna todos los elementos en un índice menor que el índice dentro del conjunto coincidente.
$(":gt(n)");                //Retorna todos los elementos en un índice mayor que el índice dentro del conjunto coincidente.
$(":root");                 //Retorna el elemento que es la raíz del DOM.

1.6 Pseudo clases

Las pseudo clases, referencia estados específicos de elementos. Por ejemplo, si un elemento está seleccionado, o tiene el foco, o se le pasa el puntero por encima, se está cambiando su estado. Esto se detecta y gestiona de distinta forma en CSS3 y en jQuery. En CSS se crean reglas específicas para las pseudo clases, mientras que en jQuery se emplean eventos que se disparan cuando se produce un cambio de estado en un elemento.

$(":enabled Selector");              //Retorna los elementos que están habilidatos actualmente.  
$(":disabled Selector");             //Retorna los elementos que están desabilitados actualmente. 
$(":checked Selector");              //Retorna el elemento si está seleccionado en un chekbox o radio actualmente. 
$(":seleted Selector");              //Retorna el elemento si está seleccionado en un select actualmente. 
$(":empty Selector");                //Retorna el elemento si está vacío actualmente. 
$(":focus Selector");                //Retorna el elemento si está enfocado actualmente.
$(":visible Selector");              //Retorna los elementos que están visibles actualmente. 
$(":hidden Selector");               //Retorna los elementos que están no visibles actualmente.  

1.7 Especificos

$(":target Selector");               //Retorna el elemento de destino indicado por el identificador de fragmento del URI del documento.
$(":animated Selector");             //Retorna todos los elementos que están en progreso de una animación en el momento en que se ejecuta el selector.

1.8 Múltiples

Se puede seleccionar elementos combinando múltiple selectores.

$("selectro1,selectro2,selector3");   //Retorna los elementos combinados de todos los selectores especificados.
$("[name='nom1'][value]");            //Retorna los elementos que tienen el atributa name=nom1 y que tiene definido el value.
$("p.linea");                         //Selecciona todos los párrafos (p) con la class=linea
$("ul#uno > li > a");           //Selecciona un "a" hijo de "li" que es hijo de un "ul" con id=uno (Funciona como AND)
$("a.clase1.clase2.clase3#id1[attr1][attr2='algo1'][attr3='algo2']:first-of-type:first-child");   //Funciona como AND
$("a, .clase1, #id1");                //Selecciona todos los elementos a + todos los elemento clase1 + el elemento id=id1 (funciona como OR)
$("a:not(.ejemplo)");                 //Retorna las anclas (a) que no pertenezcan a la class=ejemplo.
$("p:eq(2)");                         //Retorna el 3er parrafo. Ojo el indice empieza en 0.

2. Eventos

En realidad todos los eventos de JavaScript están disponibles.

Muestra la alerta cada vez que se haga clic en un botón

function notifica() {
   alert("clic de mouse");
}
$("button").on("click",notifica);

Muestre el texto de cada párrafo en un cuadro de alerta cada vez que se hace clic en él:

$("body").on("click","p",function() {
   alert($(this).text());
});

Al objeto con id=cart se le cambia de clase cada vez que con mouse se seleccione y se deseleccione.

$("#cart").on("mouseenter mouseleave",function(event) {
   $(this).toggleClass("active");
});

3. Métodos

Algunos métodos básicos que puedes usar

Para cambiar mas de un atributo a un elemento.

$("#foto1").attr({
   alt: "Enrique Garrido Lecca Risco",
   title: "Foto de Kike_GL"
});

4. Extensiones

También llamados plugins, son librerías JavaScript que aumentan las funcionalidades básicas de jQuery con tan solo incluir la librería en el código exactamente debajo de jQuery.

4.1 TableSorter

Para crear tablas ordenadas.

4.2 AnimateScroll

Permite desplazarse a cualquier parte de la página con sólo llamar a la función animatescroll() con el identificador o nombre de clase de elemento hasta que desea desplazarse.

4.3 Moment

Muy útil si hay la necesidad de trabajar con las fecha en tu proyecto web. Sirve para analizar, gestionar y manipular cada fecha.

4.4 ResponsiveSlider

Sirve para crear un Slider sencillo de fotos. No tiene muchas opciones pero si que es super ligero y se carga super rápido. Lo aconsejo si quieres crear slider sencillos en tu paginas web.

4.5 Alertify

Permite crear ventanas modales en las cual se pueden incluir botones que generan eventos al cliclearlos.

4.6 ToolTipster

Permite crear cualquier tipología de ToolTip, que se puede personalizar e incrementar.

4.7 ChartJS

Si quieres publicar gráficos esto es para ti.

4.8 Jarallax

Con este plugin la navegación vertical de la página es mucho más bonitas. Los elementos se muestran en modo dinámico y más bonito. Este plugin no es necesario para el desarrollo de la página pero si que a veces puede ser útil para mostrar información en nuestras páginas web.

4.9 Gridalicious

Permite crear una grilla.

4.10 IOSslider

Te permite integrar un control deslizante personalizable. También llamado carrusel.

4.11 SlinkyMenu

Permite crear menus deslizantes.

4.12 TabdLet

Permite crear pestañas.

4.13 Readable

Ayudarle a crear párrafos de tamaño óptimo para la máxima legibilidad. Una buena tipografía puede hacer o romper un diseño web, por eso es muy útil este plugin.

4.14 Monthly

Si necesitas usar calendarios en un proyecto web, este plugin te puede ser muy útil. También se puede crear eventos en las fechas.

4.15 FancyBox

Una herramienta que ofrece una manera agradable y elegante para añadir funcionalidad de zoom para imágenes, contenido HTML y multimedia en sus páginas web.

4.16 StickyHeader

Te crear un menú fijo en el top de la página.

5. Referencias

• Introducción a jQuery - 1ra parte ProgramarFacil
• Introducción a jQuery - 2da parte ProgramarFacil
• Manual jQuery Desarrollo Web
• Manual jQuery en español ADSL
• jQuery Linea de código

Ver un ejemplo aquí