Introducción a jQuery Formación interna 05 de junio de 2009

Introducción Antes de Empezar jQuery Selectores Core Manipulación Eventos Efectos Ajax 2

Antes de empezar jQuery asume conocimientos sobre: Programación básica Introducción Antes de empezar jQuery asume conocimientos sobre: Programación básica Conocimientos de Javascript Experiencia con HTML Conocimientos de selectores CSS 3

Antes de empezar Conocimientos básicos de Javascript: Variables: Introducción Antes de empezar Conocimientos básicos de Javascript: Variables: var a=1,b=2; Array: var arr = [1,2,3]; Funciónes: function suma(x,y) { return x+y; } ; Objetos: var obj = { data: "datos", x: 10, y: 33, suma : function() { return obj.x+obj.y; } }; 4

Introducción JQuery Librería que simplifica el desarrollo de la parte de cliente de las aplicaciones Web. Define métodos para: Manipular elementos Animaciones Comunicación mediante AJAX Esta diseñado para cambiar la manera de programar en Javascript 5

JQuery Ligero (19Kb versión 1.3.2) Navegadores soportados: Introducción JQuery Ligero (19Kb versión 1.3.2) Navegadores soportados: Firefox 2.0+ Internet Explorer 6+ Safari 3+ Opera 9+ Chrome 1+ 6

JQuery Usando jQuery: Añadir referencia a la librería Introducción JQuery Usando jQuery: Añadir referencia a la librería Usar $(document).ready() es lo equivalente al evento onLoad y que se ejecuta una vez cargada la pagina 7

Introducción Selectores El Selector permite tener acceso a elementos DOM mediante selectores CSS o XPATH Se puede representar mediante jQuery() o el método abreviado $() Devuelve un listado de elementos (array) 8

Selectores Basicos Selector por elemento Selector por ID Introducción Selectores Basicos Selector por elemento $(this) Hace referencia a él mismo Selector por ID $(‘#Resultados’) Retorna el elemento que contenga el id con valor Resultados Selector por tag $(‘div’) Busca todos los div que hay en la pagina Selector por CSS $(‘.negrita’) Busca todos los elementos que contengan la clase CSS negrita 9

Selectores Complejos Listado de Selectores más utilizados: Introducción Selectores Complejos Listado de Selectores más utilizados: :first :last :not() :even :odd :eq(i) :gt(i) :lt(i) :checked :button :selected :disabled :has(sel) :parent :hidden :visible :first-child :last-child :input :text :radio :checkbox :image :submit :enabled :file :empty :animated 10

Selectores Complejos Ejemplos: Introducción Selectores Complejos Ejemplos: Para más información sobre selectores visitar: http://docs.jquery.com/Selectors 11

Introducción Core El núcleo del jQuery permite la iteración por los elementos devueltos por el selector .each(callback) Itera sobre los elementos .size() o .length Numero de objetos .eq(position) Filtro por posición .get() Devuelve como objeto DOM .get(index) Filtro por posición y devuelve el objeto DOM 12

Introducción Core De las anteriores funciones cabe destacar el método .each puesto que nos permite recorrer los elementos devueltos por el selector Ejemplo: Obtener todos los div ocultos y mostrarlos Ejemplo: Añadir el numero de posición a los li seleccionados 13

Introducción Manipulación jQuery provee de funciones para la obtención y manipulación Elementos HTML Atributos en elementos HTML Clases CSS 14

Manipulación Elementos HTML .html() .html(content) .text() Introducción Manipulación Elementos HTML .html() Retorna el código HTML del elemento (innerHTML) .html(content) Inserta el valor del content (preferiblemente HTML) al elemento .text() Retorna el texto del elemento .text(content) Asigna el valor del content al texto del elemento .append(content) Añade al final del propio elemento el valor del content .preprend(content) Añade al principio del propio elemento el valor del content 15

Manipulación Ejemplos de manipulación en elementos HTML .remove(expr) Introducción Manipulación .remove(expr) Elimina el elemento con la expr o en su defecto se elimina a el mismo si el parámetro es vacío (.remove()) .after(content) Añade el valor del content después del elemento seleccionado .before(content) Añade el valor del content antes del elemento seleccionado Ejemplos de manipulación en elementos HTML 16

Manipulación Atributos en elementos HTML .val() .val(val) .attr(name) Introducción Manipulación Atributos en elementos HTML .val() Retorna el valor del atributo en elementos input .val(val) Inserta el valor del atributo en elementos input .attr(name) Devuelve el valor del elemento del atributo name .attr(properties) Asigna varios valores mediante un objeto javascript .attr(name,value) Asigna el valor al elemento con el atributo name, si este no existe se crea .removeAttr(name) Elimina el atributo del elemento 17

Manipulación Ejemplos de manipulación de atributos en elementos HTML Introducción Manipulación Ejemplos de manipulación de atributos en elementos HTML 18

Manipulación Clases CSS .css(name) .css(properties) .css(name,value) Introducción Manipulación Clases CSS .css(name) Obtiene el valor del estilo .css(properties) Asigna varios valores de estilo mediante un objeto javascript .css(name,value) Asigna un valor al estilo .addClass(class) Añade la clase al elemento .hasClass(class) Devuelve true:false si tiene la clase .removeClass(class) Elimina la clase del elemento 19

Manipulación Ejemplos en clases CSS .height() : .height(val) : Introducción Manipulación .height() : Obtención del alto .height(val) : Asignación del alto .width() : Obtención del ancho .width(val) : Asignación del ancho Ejemplos en clases CSS 20

Eventos Creación de eventos por elementos rápidamente Introducción Eventos Creación de eventos por elementos rápidamente Gran cantidad de eventos disponibles Posibilidad de crear manejadores para aquellos eventos que no contempla jQuery Si se generan nuevos elementos es necesario volver a crear los eventos 21

Eventos Eventos integrados en jQuery Ejemplo Introducción .blur .change .click .dblclick .error .focus .keydown .keypress .keyup .load .mousedown .mouseenter .mouseleave .mousemove .mouseout .mouseup .resize .scroll .select .submit .unload 22

Eventos Creación/Eliminación de eventos propios Ejemplo Introducción Eventos Creación/Eliminación de eventos propios .bind(name,callback) Se genera un evento y cada vez que lo detecte lanzara la función definida en callback .unbind(name) Elimina el manejador para que cuando se lance un evento no lo detecte Ejemplo 23

Introducción Efectos jQuery se caracteriza por la facilidad para crear efectos de movimiento Estos efectos son básicamente la modificación de los estilos en un lapso de tiempo para crear la sensación de movimiento 24

Efectos Funciones definidas .show(speed) .hide(speed) Introducción Efectos Funciones definidas .show(speed) Muestra el elemento, si ya se esta mostrando no hace nada .hide(speed) Oculta el elemento .toggle(speed,callback) Muestra o oculta el elemento, dependiendo del ultimo estado .animate(params,speed,callback) Crea una animación con los estilos seleccionados .stop() Para la animación del elemento 25

Introducción Efectos Ejemplos 26

Ajax Fácil integración con Ajax Introducción Ajax Fácil integración con Ajax Posibilidad de pedir peticiones a alto/bajo nivel Parseo de datos dependiendo de la fuente 27

Documentación online Web oficial de jQuery: Visual jQuery: Introducción Documentación online Web oficial de jQuery: http://docs.jquery.com/ Visual jQuery: http://visualjquery.com/ 28