Pequeña muestra:

Realizada por:Christian Aquino |@cj_aquinoDiego Ramirez |@thedarsideofitGonzalo Alonso |@GonzaloAlonsoDDiego Barros |@Inmzombie

Para: Hydras C&S |@hydras_csBasada en Libro Symfony 2 en español Nacho Pacheco y The Book

¿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.

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..

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

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');}

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.

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.

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. ejemplodata: {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 }