introducción a jquery formación interna 05 de junio de 2009

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

Upload: juana-atilano

Post on 02-Mar-2015

5 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Introducción a jQuery Formación interna 05 de junio de 2009

Introducción a jQueryFormación interna

05 de junio de 2009

Page 2: 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

Page 3: Introducción a jQuery Formación interna 05 de junio de 2009

Antes de empezar

Introducción

• jQuery asume conocimientos sobre:

– Programación básica– Conocimientos de Javascript– Experiencia con HTML– Conocimientos de selectores CSS

Page 4: Introducción a jQuery Formación interna 05 de junio de 2009

Antes de empezar

Introducción

• 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; } };

Page 5: Introducción a jQuery Formación interna 05 de junio de 2009

JQuery

Introducción

• 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

Page 6: Introducción a jQuery Formación interna 05 de junio de 2009

JQuery

Introducción

• Ligero (19Kb versión 1.3.2)

• Navegadores soportados:– Firefox 2.0+– Internet Explorer 6+– Safari 3+– Opera 9+– Chrome 1+

Page 7: Introducción a jQuery Formación interna 05 de junio de 2009

JQuery

Introducción

• 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

Page 8: Introducción a jQuery Formación interna 05 de junio de 2009

Selectores

Introducción

• 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)

Page 9: Introducción a jQuery Formación interna 05 de junio de 2009

Selectores Basicos

Introducción

• 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

Page 10: Introducción a jQuery Formación interna 05 de junio de 2009

Selectores Complejos

Introducción

• 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

Page 11: Introducción a jQuery Formación interna 05 de junio de 2009

Selectores Complejos

Introducción

• Ejemplos:

• Para más información sobre selectores visitar:– http://docs.jquery.com/Selectors

Page 12: Introducción a jQuery Formación interna 05 de junio de 2009

Core

Introducción

• 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

Page 13: Introducción a jQuery Formación interna 05 de junio de 2009

Core

Introducción

• 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

Page 14: Introducción a jQuery Formación interna 05 de junio de 2009

Manipulación

Introducción

• jQuery provee de funciones para la obtención y manipulación

– Elementos HTML

– Atributos en elementos HTML

– Clases CSS

Page 15: Introducción a jQuery Formación interna 05 de junio de 2009

Manipulación

Introducció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

Page 16: Introducción a jQuery Formación interna 05 de junio de 2009

Manipulación

Introducció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

Page 17: Introducción a jQuery Formación interna 05 de junio de 2009

Manipulación

Introducció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

Page 18: Introducción a jQuery Formación interna 05 de junio de 2009

Manipulación

Introducción

• Ejemplos de manipulación de atributos en elementos HTML

Page 19: Introducción a jQuery Formación interna 05 de junio de 2009

Manipulación

Introducció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

Page 20: Introducción a jQuery Formación interna 05 de junio de 2009

Manipulación

Introducció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

Page 21: Introducción a jQuery Formación interna 05 de junio de 2009

Eventos

Introducción

• 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

Page 22: Introducción a jQuery Formación interna 05 de junio de 2009

Eventos

Introducción

• Eventos integrados en jQuery

• Ejemplo

.blur .change .click .dblclick .error

.focus .keydown .keypress .keyup .load

.mousedown

.mouseenter

.mouseleave

.mousemove

.mouseout

.mouseup .resize .scroll .select .submit

.unload

Page 23: Introducción a jQuery Formación interna 05 de junio de 2009

Eventos

Introducción

• 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

Page 24: Introducción a jQuery Formación interna 05 de junio de 2009

Efectos

Introducción

• 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

Page 25: Introducción a jQuery Formación interna 05 de junio de 2009

Efectos

Introducción

• 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

Page 26: Introducción a jQuery Formación interna 05 de junio de 2009

Efectos

Introducción

• Ejemplos

Page 27: Introducción a jQuery Formación interna 05 de junio de 2009

Ajax

Introducción

• Fácil integración con Ajax

• Posibilidad de pedir peticiones a alto/bajo nivel

• Parseo de datos dependiendo de la fuente

Page 28: Introducción a jQuery Formación interna 05 de junio de 2009

Documentación online

Introducción

• Web oficial de jQuery:– http://docs.jquery.com/

• Visual jQuery:– http://visualjquery.com/

Page 29: Introducción a jQuery Formación interna 05 de junio de 2009