Upload
juana-atilano
View
9
Download
0
Embed Size (px)
Citation preview
Introducción a jQueryFormación interna
05 de junio de 2009
Introducción
• Antes de Empezar
• jQuery– Selectores– Core– Manipulación– Eventos– Efectos– Ajax
Antes de empezar
Introducción
• jQuery asume conocimientos sobre:
– Programación básica– Conocimientos de Javascript– Experiencia con HTML– Conocimientos de selectores CSS
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; } };
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
JQuery
Introducción
• Ligero (19Kb versión 1.3.2)
• Navegadores soportados:– Firefox 2.0+– Internet Explorer 6+– Safari 3+– Opera 9+– Chrome 1+
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
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)
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
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
Selectores Complejos
Introducción
• Ejemplos:
• Para más información sobre selectores visitar:– http://docs.jquery.com/Selectors
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
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
Manipulación
Introducción
• jQuery provee de funciones para la obtención y manipulación
– Elementos HTML
– Atributos en elementos HTML
– Clases CSS
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
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
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
Manipulación
Introducción
• Ejemplos de manipulación de atributos en elementos HTML
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
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
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
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
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
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
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
Efectos
Introducción
• Ejemplos
Ajax
Introducción
• Fácil integración con Ajax
• Posibilidad de pedir peticiones a alto/bajo nivel
• Parseo de datos dependiendo de la fuente
Documentación online
Introducción
• Web oficial de jQuery:– http://docs.jquery.com/
• Visual jQuery:– http://visualjquery.com/