La descarga está en progreso. Por favor, espere

La descarga está en progreso. Por favor, espere

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

Presentaciones similares


Presentación del tema: "Introducción a jQuery Formación interna 05 de junio de 2009."— 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

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

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

5 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

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

7 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

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

9 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

10 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

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

12 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

13 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

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

15 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

16 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

17 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

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

19 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

20 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

21 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

22 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

23 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

24 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

25 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

26 Efectos Introducción Ejemplos

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

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

29


Descargar ppt "Introducción a jQuery Formación interna 05 de junio de 2009."

Presentaciones similares


Anuncios Google