Introducción a jQuery Formación interna

Presentación del tema: "Introducción a jQuery Formación interna"— Transcripción de la presentación:

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

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

3 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

4 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

5 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

6 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

7 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

8 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

9 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

10 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

11 Selectores Complejos Ejemplos:
Introducción Selectores Complejos Ejemplos: Para más información sobre selectores visitar: 11

12 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

13 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

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

15 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

16 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

17 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

18 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

19 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

20 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

21 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

22 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

23 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

24 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

25 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

26 Introducción Efectos Ejemplos 26

27 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

28 Documentación online Web oficial de jQuery: Visual jQuery:
Introducción Documentación online Web oficial de jQuery: Visual jQuery: 28

29