jQuery es una biblioteca JavaScript que simplifica la manipulación del DOM, el manejo de eventos y las solicitudes AJAX. jQuery selecciona elementos del DOM usando selectores y provee métodos para modificar el contenido, estilo y comportamiento de los elementos. jQuery también facilita la vinculación de funciones a eventos como clicks y el movimiento del mouse sobre elementos.

1. Pequeña muestra:
Realizada por:
Christian Aquino |@cj_aquino
Diego Ramirez |@thedarsideofit
Gonzalo Alonso |@GonzaloAlonsoD
Diego Barros |@Inmzombie
Para: Hydras C&S |@hydras_cs
Basada en Libro Symfony 2 en español Nacho Pacheco y The Book

2. ¿Qué es jQuery?
jQuery es una biblioteca de JavaScript rápida, pequeña
y enriquecida. Hace las cosas como manipulación,
manejo de eventos, animación, y AJAX mucho más
simple y fácil de usar. Soportado por varios browser.
Con una combinación de versatilidad y extensibilidad.
jQuery cambió la manera en que millones de personas
escriben en JavaScript.

3. Documento HTML
Nuestro código HTML se va a convertir en
un árbol de nodos sobre el cual nuestra
busquedas van escalar y asignarles a los
elementos del DOM (Modelo de Objetos del
Documento):
Inputs, DIV, SPAN, BODY, TABLE, etc..

4. Funciones selectoras:
jQuery({atributo}) y $({atributo}) son las dos formas de seleccionar.
Atributo: los atributos pueden ser nuestros elementos del DOM puros, pero
como generalmente existen en una gran cantidad y repetidos se pueden
localizar a través de un id o clase asignado de la manera.
para un id se precede el en la declaración con # y si es una clase con .
<input id="nombre_usuario" >
De modo que para encontrar este elemento $('#nombre_usuario') si tenemos
nuestra biblioteca de jQuery y probamos en el firefox firebug o chrome en el console, nos
devuelve un arreglo con los nodos inferidos

5. Si tenemos que barrer una clase,
listado o tabla...
Si nos encontramos con una clase la podremos recorrer del siguiente modo:
<div class="dato_form">
<input id="nombre_usuario" >
</div>
<div class="dato_form">
<input id="apellido_usuario" >
</div>
('.dato_form').each(function(index) {
console.log(index, 'indice del nodo en el recorrido de la clase');
console.log(this.attr('id'), 'id del atributo');
}

6. Otras funciones:
.addClass()
Agrega clase o clases al elemento
.after()
Inserta contenido después del elemento seleccionado.
.append()
Inserta contenido dentro del elemento seleccionado
.before()
Inserta contenido antes del elemento seleccionado.
.empty()
Vacia el contenido del elemento.
.hasClass()
Devuelve verdadero si existe la clase.
.remove()
Remueve el elemento.
.removeClass()
Remueve la clase.

7. Bindeo de funciones
.click()
Asignamos al elemento una función al hacer
click
.dblclick()
Asignamos al elemento una función al hacer
doble click
.hover()
Asignamos una función al pasar el mouse
sobre el elemento.

8. jQuery.ajax()
url: Es un string que contiene la url de nuestro controlador para procesar la
acción.
type: Es el tipo de petición POST, GET, etc...
dataType: Es el tipo de dato que se espera de respuesta. (xml, json, script,
or html)
data: Si la petición no es por GET se define un objeto literal donde se
encuentran los valores que van a ser enviados. ejemplo
data: {id_user: id }
en el controller:
$request = $this->getRequest();
$id = $request->get('id_user');
success: Es el callback que se va a encargar de procesar la respuesta
success: function(content) {
//proceso el contenido...
return content
}