Introduccin a

JQUERY
DISERTANTE
ING. RASJIDO, JOSE ALBERTO
Introduccin a JQuery 2

Qu es JQUERY?

JQUERY es una librera de cdigo abierto basada en JavaScript.

Fue propuesta en 2006, por John Resig, promotor de la tecnologa

JavaScript dentro de la fundacin Mozilla.

Su propsito es simplificar la manipulacin de los documentos HTML, el

manejo de eventos, las animaciones y el uso de AJAX.
Introduccin a JQuery 3

Cmo invocar JQuery?

La librera JQuery expone sus mtodos y propiedades a travs de dos

propiedades del objeto window:

jQuery

$
Introduccin a JQuery 4

Cmo invocar JQuery?

Ejemplo. Capturando el evento window.onload:

$().ready(

function(){

alert(Hola desde JQuery);

);
Introduccin a JQuery 5

Cmo invocar elementos JQuery?

Se pueden invocar elementos mediante:

$() $(document) Referencia el documento.

$(tag) Referencia a todas las etiquetas que se correspondan con

tag.

$(#identificador) Referencia al elemento con el id

correspondiente.

$(#lista li) Referencia a todos los tems de la lista

correspondiente.
Introduccin a JQuery 6

Clasificacin de mtodos segn su funcionalidad

Los mtodos disponibles para un objeto JQUERY dependen del tipo de

elemento al que representan:

1) Atributos y contenido HTML

2) Estilo CSS

3) Eventos

4) Efectos

5) AJAX
Introduccin a JQuery 7

Funciones para HTML Atributos

Para obtener y/o manipular los atributos de un elemento HTML se

utiliza la funcin:

attr ( nombre_atributo , [ valor_atributo ] )

Ejemplo:

$(#enlace).attr(href,http://www.google.com.ar).attr(tit
le,Enlace a Google);
Introduccin a JQuery 8

Funciones para HTML Atributos

Tambin es posible definir ms de un atributo al mismo tiempo,

mediante una sola llama y un JSON:

Ejemplo:

$(#enlace).attr(

{href:http://www.google.com.ar,title:Enlace a Google}

);
Introduccin a JQuery 9

Funciones para HTML Atributos

Para eliminar un atributo ya definido de un elemento dado:

removeAttr ( nombre_atributo )

Ejemplo:

$(#enlace).removeAttr(title);
Introduccin a JQuery 10

Funciones para HTML Contenido (Texto)

Para obtener o cambiar el texto contenido dentro de una etiqueta, se

utiliza la funcin:

html( [ nombre_elemento ])

Ejemplo:

alert( $(#enlace).html() );

$(#enlace).html(Ir al buscado de Google);

Introduccin a JQuery 11

Funciones para HTML Contenido (Elementos)

Mediante las funciones after() y before(), es posible insertar nuevos

elementos HTML, al mismo nivel de jerarqua que el elemento actual:

Ejemplo:

$(#enlace).after(<a href=http://www.yahoo.com.ar>Ir a
Yahoo</a>);
Introduccin a JQuery 12

Funciones para HTML Mtodos activos y pasivos

Muchos de los mtodos de manipulacin del DOM poseen una versin

pasiva.

Es decir, si hay una funcin que permite agregar un elemento a otro,

entonces hay otra funcin cuyos parmetros se aplican al revs.
Introduccin a JQuery 13

Funciones para HTML Mtodos activos y pasivos

Mtodo activo Mtodo pasivo o inverso

append appendTo
prepend prependTo
after insertAfter
before insertBefore
replaceWith replaceAll
Introduccin a JQuery 14

Clasificacin de mtodos segn su funcionalidad

1) Atributos y contenido HTML

2) Estilo CSS

3) Eventos

4) Efectos

5) AJAX
Introduccin a JQuery 15

Funciones para CSS

Funcin Parmetros
addClass String con un nombre de clase o varios separados
por espacio
css String
css String para estilo, String para valor

css Objeto JSON

hasClass String como nombre de clase

height /width
height / width Entero en pxeles
removeClass String como nombre de clase
Introduccin a JQuery 16

Funciones para CSS

Ejemplo .css()

$("#enlace").css("text-decoration","none").css("color","red");

$("#enlace").css({"text-decoration":"none","color":"red"});
Introduccin a JQuery 17

Funciones para CSS

Ejemplo con selector .hover(handlerIn, handlerOut) :

$("#enlace").hover(

function(){ $(this).css({"color":"green"}) },

function(){ $(this).css({"color":"red"}) }

);
Introduccin a JQuery 18

Clasificacin de mtodos segn su funcionalidad

1) Atributos y contenido HTML

2) Estilo CSS

3) Eventos

4) Efectos

5) AJAX
Introduccin a JQuery 19

Funciones para Eventos

JQuery ofrece diferentes formas de capturar los eventos de los

elementos del DOM.

Se pueden asociar funciones a los diferentes eventos que ofrece el

DOM, e incluso ms de una funcin a un mismo evento. Es decir los
eventos no se sobrescriben, sino que se apilan.
Introduccin a JQuery 20

Funciones para Eventos Enlace esttico

Implica asociar una funcin a un evento, mediante bind():

.bind(nombre_evento, funcion)

Se pueden asociar varios eventos en un mismo enlace:

.bind(mouseover click dblclick, funcion)

Introduccin a JQuery 21

Funciones para Eventos Enlace esttico

$("img").bind( mouseover",

function(){

$(this).css({"border":"1px solid red","box-shadow":"0px 0px 16px

red"});

});

$("img").bind( "mouseout",

function(){

$(this).css({"border":"0px","box-shadow":"none"});

});
Introduccin a JQuery 22

Funciones para Eventos Enlace por atajos

$("img").mouseover(function(){

$(this).css({"border":"1px solid red","box-shadow":"0px 0px 16px

red"});

});

$("img").mouseout(function(){

$(this).css({"border":"0px","box-shadow":"none"});

});
Introduccin a JQuery 23

Funciones para Eventos Eliminacin

Los eventos y/o funciones asociadas se pueden eliminar con unbind()

Su versin ms simple elimina todo enlace que el o los elementos

tuvieran:

$(img).unbind();
Introduccin a JQuery 24

Funciones para Eventos Eliminacin

Se puede especificar el evento a eliminar, utilizando un parmetro del

tipo String con el nombre o los nombres de los eventos:

$(img).unbind(mouseover mouseout);
Introduccin a JQuery 25

Funciones para Eventos Eliminacin

Si no desea eliminar todas las funciones asociadas a un evento,

entonces tambin se puede especificar la funcin a eliminar:

$(#botonSubmit).unbind(click, enviarFormulario);
Introduccin a JQuery 26

Clasificacin de mtodos segn su funcionalidad

1) Atributos y contenido HTML

2) Estilo CSS

3) Eventos

4) Efectos

5) AJAX
Introduccin a JQuery 27

Efectos Mostrando y ocultando elementos

Se pueden mostrar y ocultar elementos sin ningn tipo de animacin,

mediante los mtodos:

.show()

.hide()

Estos mtodos trabajan sobre la propiedad display de CSS.

Introduccin a JQuery 28

Efectos Efectos de FADE

Los efectos de desvanecimiento son los ms clsicos para animar

elementos que aparecen y desaparecen de pantalla:

.fadeIn() transparente a opaco.

.fadeOut()- opaco a transparente

.fadeTo() transparencia personalizada

Introduccin a JQuery 29

Efectos Efectos de FADE

Ejemplo:

$("img").hide();

$("img").fadeIn(2000);

$("img").mouseover(function(){$(this).fadeTo(1000,0.5);});

$("img").mouseout(function(){$(this).fadeTo(1000,1);});
Introduccin a JQuery 30

Encadenamiento de funciones

Una caracterstica de JQuery es que todas las funciones asociadas a

una consulta de elementos, adems de realizar la accin que
pedimos, retorna el mismo objeto JQuery, con lo cual se puede
encadenas funciones.
Introduccin a JQuery 31

Encadenamiento de funciones

Ejemplo simplificado:

$("img").hide()

.fadeIn(2000)

.mouseover(function(){$(this).fadeTo(1000,0.5);})

.mouseout(function(){$(this).fadeTo(1000,1);});
Introduccin a AJAX 32

EJERCICIOS

1) Modificar el documento ejercicio01.html, reemplazando la

funcionalidad de los mtodos con JQuery.

2) Modificar el documento ejercicio02.html, reemplazando la

funcionalidad de los mtodos con JQuery.