Introduccin a jQuery

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

Esta diseado para cambiar la manera de programar en Javascript

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

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

Introduccin

Selectores Complejos

Listado de Selectores ms utilizados:

:first :eq(i) :selected :visible :radio

:last :gt(i) :disabled :first-child :checkbox

:not() :lt(i) :has(sel) :last-child :image

:even :checked :parent :input :submit

:odd :button :hidden :text :enabled

:file

:empty

:animated

Introduccin

Selectores Complejos
Ejemplos:

Para ms informacin sobre selectores visitar:

http://docs.jquery.com/Selectors

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

Ejemplo: Aadir el numero de posicin a los li seleccionados

Introduccin

Manipulacin

jQuery provee de funciones para la obtencin y manipulacin

Elementos HTML Atributos en elementos HTML Clases CSS

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

Ejemplos de manipulacin en elementos HTML

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

Ejemplos de manipulacin de atributos en elementos HTML

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

Ejemplos en clases CSS

Introduccin

Eventos

Creacin de eventos por elementos rpidamente 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

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

jQuery se caracteriza por la facilidad para crear efectos de movimiento

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/