Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
Formacin interna
05 de junio de 2009
Introduccin
Antes de Empezar
jQuery
Selectores Core Manipulacin Eventos Efectos Ajax
Introduccin
Antes de empezar
jQuery asume conocimientos sobre:
Programacin bsica Conocimientos de Javascript Experiencia con HTML Conocimientos de selectores CSS
Introduccin
Antes de empezar
Conocimientos bsicos de Javascript:
Variables:
var a=1,b=2;
Array:
var arr = [1,2,3];
Funcines:
function suma(x,y) { return x+y; } ;
Objetos:
var obj = { data: "datos", x: 10, y: 33, suma : function() { return obj.x+obj.y; } };
Introduccin
JQuery
Librera que simplifica el desarrollo de la parte de cliente de las aplicaciones Web.
Define mtodos para:
Manipular elementos Animaciones Comunicacin mediante AJAX
Introduccin
JQuery
Ligero (19Kb versin 1.3.2)
Navegadores soportados:
Firefox 2.0+ Internet Explorer 6+ Safari 3+ Opera 9+ Chrome 1+
Introduccin
JQuery
Usando jQuery:
Aadir referencia a la librera Usar $(document).ready() es lo equivalente al evento onLoad y que se ejecuta una vez cargada la pagina
Introduccin
Selectores
El Selector permite tener acceso a elementos DOM mediante selectores CSS o XPATH
Se puede representar mediante jQuery() o el mtodo abreviado $() Devuelve un listado de elementos (array)
Introduccin
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
Introduccin
Selectores Complejos
:file
:empty
:animated
Introduccin
Selectores Complejos
Ejemplos:
Introduccin
Core
El ncleo del jQuery permite la iteracin por los elementos devueltos por el selector
.each(callback)
Itera sobre los elementos
.size() o .length
Numero de objetos
.eq(position)
Filtro por posicin
.get()
Devuelve como objeto DOM
.get(index)
Filtro por posicin y devuelve el objeto DOM
Introduccin
Core
De las anteriores funciones cabe destacar el mtodo .each puesto que nos permite recorrer los elementos devueltos por el selector
Ejemplo: Obtener todos los div ocultos y mostrarlos
Introduccin
Manipulacin
Introduccin
Manipulacin
Elementos HTML
.html()
Retorna el cdigo 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)
Aade al final del propio elemento el valor del content
.preprend(content)
Aade al principio del propio elemento el valor del content
Introduccin
Manipulacin
.remove(expr)
Elimina el elemento con la expr o en su defecto se elimina a el mismo si el parmetro es vaco (.remove())
.after(content)
Aade el valor del content despus del elemento seleccionado
.before(content)
Aade el valor del content antes del elemento seleccionado
Introduccin
Manipulacin
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
Introduccin
Manipulacin
Introduccin
Manipulacin
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)
Aade la clase al elemento
.hasClass(class)
Devuelve true:false si tiene la clase
.removeClass(class)
Elimina la clase del elemento
Introduccin
Manipulacin
.height() :
Obtencin del alto
.height(val) :
Asignacin del alto
.width() :
Obtencin del ancho
.width(val) :
Asignacin del ancho
Introduccin
Eventos
Creacin de eventos por elementos rpidamente Gran cantidad de eventos disponibles Posibilidad de crear manejadores para aquellos eventos que no contempla jQuery
Introduccin
Eventos
Eventos integrados en jQuery
.blur .focus .mousedown .mouseup .unload .change .keydown .mouseenter .resize .click .keypress .mouseleave .scroll .dblclick .keyup .mousemove .select .error .load .mouseout .submit
Ejemplo
Introduccin
Eventos
Creacin/Eliminacin de eventos propios
.bind(name,callback)
Se genera un evento y cada vez que lo detecte lanzara la funcin definida en callback
.unbind(name)
Elimina el manejador para que cuando se lance un evento no lo detecte
Ejemplo
Introduccin
Efectos
Estos efectos son bsicamente la modificacin de los estilos en un lapso de tiempo para crear la sensacin de movimiento
Introduccin
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 animacin con los estilos seleccionados
.stop()
Para la animacin del elemento
Introduccin
Efectos
Ejemplos
Introduccin
Ajax
Fcil integracin con Ajax Posibilidad de pedir peticiones a alto/bajo nivel Parseo de datos dependiendo de la fuente
Introduccin
Documentacin online
Web oficial de jQuery:
http://docs.jquery.com/
Visual jQuery:
http://visualjquery.com/