El framework de JavaScript

JQUERY .......................................................................................................................................3
INTRODUCCIN ..................................................................................................................................... 3 DOM ...................................................................................................................................................... 3 UTILIZAR jQUERY ................................................................................................................................... 4 PRINCIPIOS DE USO ............................................................................................................................... 5 CARGAR LA WEB .................................................................................................................................... 5 Prctica ............................................................................................................................................... 5 ACCESO A LOS ELEMENTOS DE LA WEB .................................................................................................. 6 Con JavaScript ..................................................................................................................................... 6 Con jQuery .......................................................................................................................................... 6 SELECTORES ........................................................................................................................................... 6 Selector de etiquetas. .............................................................................................................................. 6 Selector por identificador ........................................................................................................................ 7 Selector por clase CSS .............................................................................................................................. 7 Selectores de varios elementos ............................................................................................................... 7 Selectores posicionales ............................................................................................................................ 7 Selectores parent>child ........................................................................................................................... 7 Selectores de formulario ......................................................................................................................... 8 Selectores de jerarqua ............................................................................................................................ 8 TABLAS DE SELECTORES ........................................................................................................................... 9 OPERADORES ......................................................................................................................................... 10 Ejemplo ............................................................................................................................................. 10 EVENTOS .............................................................................................................................................. 10 Prctica ............................................................................................................................................. 11 TIPOS DE EVENTOS ................................................................................................................................ 11 EVENTOS RELACIONADOS CON EL RATN........................................................................................ 12 EVENTOS RELACIONADOS CON EL TECLADO .................................................................................... 12 EVENTOS COMBINADOS TECLADO-RATN....................................................................................... 12 OTROS EVENTOS ............................................................................................................................... 13 DEFINIR/ELIMINAR EVENTOS: bind/unbind........................................................................................... 14 BIND .................................................................................................................................................. 14 Ejemplo 1. Asignacin de un evento a los elementos de una etiqueta ............................................ 14 Ejemplo 2. Asignacin de una funcin a varios eventos a la vez ...................................................... 15 UNBING ............................................................................................................................................. 15 OTRAS UTILIDADES .............................................................................................................................. 15 MTODOS ............................................................................................................................................ 16 text() ...................................................................................................................................................... 16 Ejemplo ............................................................................................................................................. 16 attr()/removeAttr .................................................................................................................................. 16 Ejemplo 1 .......................................................................................................................................... 16 Ejemplo 2 ......................................................................................................................................... 17 addClass/removeClass ........................................................................................................................... 18 Ejemplo ............................................................................................................................................. 18 html() ..................................................................................................................................................... 19 Ejemplo ............................................................................................................................................. 19 css() ........................................................................................................................................................ 20

jQUERY

Ejemplos............................................................................................................................................ 20 append / prepend .................................................................................................................................. 20 Ejemplos............................................................................................................................................ 21 ITERADOR each .................................................................................................................................... 21 Ejemplo ............................................................................................................................................. 21 EFECTOS VISUALES ............................................................................................................................... 22 hide/show | slow/fast.......................................................................................................................... 22 Ejemplo ............................................................................................................................................. 22 fadeIn / fadeOut / fadeTo ...................................................................................................................... 23 Ejemplo ............................................................................................................................................. 24 Ejemplo ............................................................................................................................................. 24 Comprobar si un element es visible ...................................................................................................... 25 toggle()................................................................................................................................................... 25 Ejemplo ............................................................................................................................................. 25 animate .................................................................................................................................................. 26 Ejemplo ............................................................................................................................................. 27 PRCTICA: MEN DESPLEGABLE .......................................................................................................... 27

ANEXO ...................................................................................................................................... 31
OPERACIONES HABITUALES ................................................................................................................. 31

FUENTES ................................................................................................................................. 32

jQUERY

jQUERY
INTRODUCCIN
jQuery es un framework1 de JavaScript que permite simplificar el manejo de los documentos HTML, el rbol DOM, manejar eventos, desarrollar animaciones y agregar interaccin con Ajax a pginas Web. JQuery es software libre y de cdigo abierto creado por John Resig que adems trabaja para Mozilla Corporation. La primera versin de jQuery estable apareci en el ao 2006 y la ltima, de febrero de 2011, es la versin 1.5.1. Esta ltima versin se caracteriza por la utilizacin de Ajax. El uso de jQuery librera al programador de tener que implementar los mtodos JavaScript que el framework contiene. Entre otras facilidades, jQuery tiene implementados todos sus mtodos para detectar el browser del usuario y adaptar las funciones a cada uno de ellos. La librera jQuery en resumen nos aporta las siguientes ventajas: Ahorra muchas lneas de cdigo. Hace transparente el soporte de nuestra aplicacin para los navegadores principales. Provee de un mecanismo para la captura de eventos. Provee un conjunto de funciones para animar el contenido de la pgina en forma muy sencilla. Integra funcionalidades para trabajar con AJAX.

DOM
Acorde al W3C el Document Object Model o DOM es una interfaz de programacin de aplicaciones (API) para documentos validos HTML y bien construidos XML. Define la estructura lgica de los documentos y el modo en que se accede y manipula. El DOM permite un acceso a la estructura de una pgina HTML o XHTML mediante el mapeo de los elementos de esta pgina en un rbol de nodos. Cada elemento se convierte en un nodo y cada porcin de texto en un nodo de texto. La siguiente pgina
<!DOCTYPE HTML> <head> <title>Esta es mi Web</title> </head> <body> <p>Esta es mi primera <strong>Web</strong></p>
1

Un framework son libreras de cdigo que contienen mtodos ya listos para utilizar

jQUERY

</body> </html>

Se corresponde con el siguiente rbol de nodos generado automticamente por DOM

Documento HTML

head

body

meta

title

Esta es mi Web

Esta es mi primera

strong

Web

Otro ejemplo grfico

UTILIZAR jQUERY
Para utilizar la librera debemos descargarla del sitio oficial (http://jquery.com/) e introducir en cada pgina que lo requiera utilizar la siguiente lnea en el bloque <head>:
<script src=" jquery-1.5.1.min.js"></script>

Del sitio oficial de jQuery descargaremos la versin descomprimida que ocupa alrededor de 84 Kb (es el archivo jquery-1.5.1.min.js). jQUERY 4

PRINCIPIOS DE USO
La forma de interactuar con la pgina es mediante la funcin $(), un alias de jQuery que recibe como parmetro una expresin CSS o el nombre de una etiqueta HTML y devuelve todos los elementos que concuerdan con la expresin. // Devuelve el elemento con id="cabecera"
$("#cabecera")

// Devolver una matriz de elementos con class="destacado"

$(".destacado")

Una vez obtenidos los elementos, se les puede aplicar cualquiera de las funciones que facilita la biblioteca. // Se elimina el estilo (removeClass()) y se aplica uno nuevo (addClass()) a todos los nodos con class=" destacado "
$(". destacado ").removeClass("destacado ").addClass("nodestacado");

CARGAR LA WEB
Una de las funciones ms utilizadas en las aplicaciones JavaScript es la siguiente
window.onload = function() {,,,}

La orden anterior hace que function() se ejecute una vez que la pgina se haya cargado por completo. jQuery dispone de una funcin equivalente
$(document).ready(function(){})

La gran ventaja de la funcin de jQuery, es que la pgina se puede manipular en cuanto se ha cargado su cdigo HTML (y por tanto, se ha construido el rbol DOM de la pgina) mientras que la funcin de JavaScript espera a que se carguen todos los elementos de la pgina, incluyendo todas las imgenes. De esta forma, las aplicaciones realizadas con jQuery pueden responder de forma mucho ms rpida que las aplicaciones JavaScript tradicionales.

Prctica
Se mostrar una ventana de bienvenida al cargar la pgina Fichero HTML
<!DOCTYPE HTML> <html> <head> <meta charset=utf-8"> <title>Ejemplo 1</title> <script src="js/jquery-1.5.1.min.js"></script> <script src=" js/fichero.js" ></script> </head> <body> <h1> Comenzando.....</h1> </body> </html>

jQUERY

Fichero JavaScript
$(document).ready(function(){ alert("Bienvenid@ a mi pgina"); });

ACCESO A LOS ELEMENTOS DE LA WEB

Por otra parte, la funcin getElementById() es posiblemente la ms utilizada al desarrollar aplicaciones web, ya que permite seleccionar un elemento a partir de su atributo id. Adems, existen otras dos funciones relacionadas: getElementsByTagName() y getElementsByName(). jQuery incluye la funcin $() como una alternativa ms rpida y completa para seleccionar cualquier elemento de la pgina:

Con JavaScript
// Seleccionar un elemento
document.getElementById("miParrafo");

// Seleccionar todos los enlaces

document.getElementsByTagName("a");

// Seleccionar todo lo anterior

----

// Seleccionar mediante la clase CSS

----

Con jQuery
// Seleccionar un elemento
$("#miParrafo");

// Seleccionar todos los enlaces

$("a");

// Seleccionar todo lo anterior

$("#miParrafo, a")

// Seleccionar mediante la clase CSS

$(".miClase")

SELECTORES
jQuery utiliza selectores para identificar aquellos elementos sobre los que se quiere actuar. Un selector es una cadena de caracteres que identifica a uno o varios elementos de una pgina Web. Los selectores bsicos utilizados en jQuery son:

Selector de etiquetas.
$(h2)

//selecciona todos los elementos que tienen etiqueta <h2>..</h2> Selector por etiqueta/contenido. jQUERY 6

$(p:contains(Hola))

//selecciona los prrafos (<p></p>) que contengan la palabra Hola Selector por etiqueta/propiedad.
$("div:visible")

//selecciona los div que tengan la propiedad visible=true Selector por etiqueta/clase.
$("li.nombreClase")

//selecciona los li que tengan asignada la clase CSS nombreClase

Selector por identificador

$(# misComentarios)

//selecciona todos los elementos que tienen el atributo id=misComentarios

Selector por clase CSS

$(.miClase)

//selecciona todos los elementos que tienen como atributo class=miClase

Selectores de varios elementos

$(p, a)

//Selecciona todos los <a> y todos los <p>

Selectores posicionales
Los selectores posicionales stn basados en las relaciones posicionales entre elementos segn la estructura DOM del documento. Selecciona el primer elemento <p> de la pgina Selecciona el primer <img> de la pgina que tiene un atributo src acabado en .png Selecciona todos los prrafos que implementen la clase CSS miClase: Selecciona todos los divs que contengan algn prrafo dentro: Selecciona todos los prrafos que tengan al menos un enlace: Selecciona todos los radio buttons que han sido chequeados
$(p:first)

$(img[src$=.png]:first)

$(p[@miClase]) $(div[p]) $("p[a]") $("input[@type=radio][@checked]")

Selectores parent>child
Los selectores parent>child permite que se pueda puedan acceder a los elementos que sean hijos directos de otros. jQUERY 7

//selecciona todas las etiquetas b que son hijas directas de los prrafos
$("p > b")

//selecciona todas las etiquetas que son hijas directas del elemento con id="capa"
$("#capa > *")

Selectores de formulario
Los selectores de formulario permiten seleccionar elementos de formulario de forma especfica. Selecciona todos los elementos <input> con un tipo de atributo igual al nombre del selector.

$(:text)

//selecciona todos los input que tengan tipo texto

$(:checkbox)

//selecciona todos los input que tengan tipo checkbox Selecciona todos los elementos input
$(:input)

Selecciona todos los elementos button Selecciona todos los elementos activados del formulario: Selecciona todos los radio buttons y checkbox del formulario que estn pulsados Selecciona todos los radio button que estn chequeados

$(:button) $(:enabled)

$(":checked")

$(":radio :checked")

Selectores de jerarqua
Selector de descendientes: selecciona elementos que desciendan de otro elemento (CSS 1) Selector de hijos: selecciona elementos que sean hijos directos de otro elemento (CSS 2) Pseudo clase hijo: selecciona el ensimo hijo de un elemento (CSS 3) Pseudo clase primer hijo: selecciona el primero hijo de un elemento (CSS 2) Pseudo clase ltimo hijo: selecciona el ltimo hijo de un elemento (CSS 3) Pseudo clase hijo nico: selecciona los elementos que sean hijos nicos de otros elementos (CSS 3)

jquery("div.entrada h2")

jquery("div.entrada > h2")

jquery("tr:nth-child(1)") jquery("tr:first-child") jquery("tr:last-child")

jquery("div:only-child")

jQUERY

Pseudo clase primero: selecciona el primer elemento de un grupo de elementos. Equivale a eq(0) (jQuery) Pseudo clase ltimo: selecciona el ltimo elemento de un grupo de elementos (jQuery) Pseudo clase mayor que: selecciona todos los elementos con un ndice mayor que el indicado en un grupo de elementos (jQuery) Pseudo clase menor que: selecciona todos los elementos con un ndice menor que el indicado en un grupo de elementos (jQuery) Pseudo clase par: selecciona los elementos pares de un grupo de elementos (jQuery) Pseudo clase impar: selecciona los elementos impares de un grupo de elementos (jQuery) Selector de hermanos: selecciona todos los hermanos que se encuentren precedidos de otro elemento (CSS 3) Selector de prximo adyacente: similar al anterior, pero slo selecciona el adyacente directo (CSS 2) Pseudo clase padre: selecciona los padres de otros elementos (jQuery) Pseudo clase vaco: selecciona los elementos que no tengan ningn hijo, incluyendo texto plano (CSS 3)

jquery("td:first)")

jquery("td:last)")

jquery("td:gt(0)")

jquery("td:lt(3)")

jquery("td:even")

jquery("td:odd")

jquery("div.entrada ~ p")

jquery("div.entrada + p")

jquery("h2:parent")

jquery(":empty")

TABLAS DE SELECTORES
Cuando una funcin jQuery devuelve varios elementos, lo hace en formato de tabla, donde cada elemento est identificado por una posicin de la misma. Entonces mediante: eq(indice) podemos obtener el elemento de la lista a la que se hace referencia de la posicin ndice+1, teniendo en cuenta que las lista en jQuery empiezan contar desde 0. Por ejemplo, en la siguiente instruccin almacena una referencia al tercer enlace que implementa la clase enlaceAmigos.
enlace = $('a.enlaceAmigos:eq(2)')

A continuacin se muestra como acceder al prrafo nmero 3 (segunda posicin)

miParrafo=$(p:eq(2))

jQUERY

OPERADORES
Se pueden utilizar los operadores ^= , $= y *=.

^= para obtener los elementos de una pgina HTML que contengan un atributo que empiece por un valor determinado. $= para obtener los elementos de una pgina HTML que acabe por un valor determinado. *= para obtener los elementos de una pgina HTML que contenga un valor determinado.

Ejemplo
$(document).ready(function() {

//hace referencia a los enlaces que empiezan por mailto:

$('a[href^="mailto:"]').addClass('mailto');

//hace referencia a los enlaces que hagan referencia a un fichero pdf

$('a[href$=".pdf"]').addClass('enlacePdf');

//hace referencia a un enlace a sitio.com

$('a[href*= "sitio.com"]').addClass('sitio'); });

Estas clases CSS deben estar previamente definidas en la pgina, por ejemplo:
.mailto { color: blue; } .enlacePdf { color:green; } .sitio { color: yellow; }

De esta forma, los enlaces de tipo malito aparecern en azul, los enlaces a ficheros pdf verdes y los enlaces a sitio.com aparecern en amarillo. http://parasitovirtual.wordpress.com/2010/12/06/curso-jquery-capitulo-6-selectoresbasicos-de-filtro/ Curso jQuery. Captulo 6: Selectores bsicos de filtro. &laquo; El rincn de un parsito virtual http://www.emenia.es/curso-de-jquery-2-selectores-primera-parte/ Curso de jQuery: Selectores http://www.desarrolloweb.com/articulos/ejemplo-selectores-jquery.html Ejemplo para practicar con selectores en jQUERY

EVENTOS
Los eventos son los elementos fundamentales de la interaccin del usuario con una Web. Es fundamental que el programador maneje con soltura la gestin de eventos ya que ello es lo que va a permitir dar funcionalidad a la Web. Un evento se provoca cuando el usuario o el sistema realiza alguna accin sobre la pgina Web, esto puede ser: cargar la pgina, pulsar con el teclado sobre un elemento, pulsar una tecla, etc. jQUERY 10

Cuando se provoca un evento, este se puede manejar con un controlador de evento que ejecute unas determinadas acciones. Los controladores de eventos sern funciones JavaScript enlazadas al evento correspondiente. Para determinar que un evento debe ser capturado se utiliza la siguiente sintaxis jQuery.
$(elemento).evento(function(event){})

//event es una variable que representa al evento que se ha producido.

Prctica
En el siguiente formulario HTML, al cargar la pgina se define un evento clic para el botn con id elBoton y el controlador de evento correspondiente que muestra una ventana con el nombre introducido en el campo con id=elCampo o un mensaje de aviso.
<!DOCTYPE html> <html> <head> <meta charset=utf-8"> <title>Ejemplo 2</title> <script src="js/jquery-1.5.1.min.js" ></script> <script src="js/fichero.js" ></script> </head> <body> <h1>Ejemplo de Formulario Web</h1> <form > Nombre <input name="nombre" id="elNombre" placeholder="Escribe tu nombre" autofocus></p> Fecha<input name="fecha" type="date"> <input type="button" id="elBoton" value="Para pulsar"> </form> </body> </html>

Fichero fichero.js (JavaScript)

$(document).ready(function(){ $("#elBoton").click(function(event){ //cuando se produce el evento click var selectorEscrito = $("#elNombre").attr("value"); if (selectorEscrito==""){ alert("Escribe tu nombre") }else{ alert("tu nombre es " + selectorEscrito); } }); });

TIPOS DE EVENTOS
jQuery dispone de tantas funciones como eventos estndar de JavaScript. El nombre de cada funcin es el mismo que el del evento, sin el habitual prefijo on: focus(), blur(), keyup(),mouseover(), mouseup(), resize(), submit(), etc. jQUERY 11

EVENTOS RELACIONADOS CON EL RATN

click() Detecta el evento clic cuando se produce en un elemento de la pgina. dblclick() Detecta un evento cuando se produce un doble clic sobre un elemento. hover() Esta funcin en realidad sirve para manejar dos eventos, cuando el ratn entra y sale de encima de un elemento. Por tanto se debe enviar dos funcioness en vez de una. mousedown() Detecta un evento cuando el usuario hace clic en el momento que presiona el botn e independientemente de si lo suelta o no. Sirve tanto para el botn derecho como el izquierdo del ratn. mouseup() Detecta un evento cuando el usuario ha hecho clic y luego suelta un botn del ratn. El evento mouseup se produce slo en el momento de soltar el botn. mouseenter() Detecta el evento se produce al situar el ratn encima de un elemento de la pgina. mouseleave() Detecta un evento cuando el ratn sale de encima de un elemento de la pgina. mousemove() Detecta el evento que se produce al mover el ratn sobre un elemento de la pgina. mouseout() Detecta el evento que se desata cuando el usuario sale con el ratn de la superficie de un elemento. mouseover() Detecta el evento que se produce cuando el ratn est sobre un elemento, pero tiene como particularidad que puede producirse varias veces mientras se mueve el ratn sobre el elemento, sin necesidad de haber salido.

EVENTOS RELACIONADOS CON EL TECLADO

keydown() Detecta el evento que se produce en el momento que se presiona una tecla del teclado, independientemente de si se libera la presin o se mantiene. Se produce una nica vez en el momento exacto de la presin. keypress() Detecta el evento que ocurre cuando se digita un carcter, o se presiona otro tipo de tecla. Es como el evento keypress de Javascript, por lo que se entiende que keypress() se ejecuta una vez, como respuesta a una pulsacin e inmediata liberacin de la tecla, o varias veces si se pulsa una tecla y se mantiene pulsada. keyup()Detecta el evento que se produce en el momento de liberar una tecla, es decir, al dejar de presionar una tecla que tenamos pulsada.

Nota: a travs del objeto evento, que reciben las funciones que indiquemos como parmetro de estos mtodos, podemos saber qu tecla se est pulsando, aparte de otras muchas informaciones.

EVENTOS COMBINADOS TECLADO-RATN

blur() El evento blur se lanza sobre un elemento que acaba de perder el foco. Normalmente este evento es aplicable a inputs de formularios. jQUERY 12

focusin() Evento que se produce cuando el elemento gana el foco de la aplicacin, que puede producirse al hacer clic sobre un elemento o al presionar el tabulador y situar el foco en ese elemento. focusout() Ocurre cuando el elemento pierde el foco de la aplicacin, que puede ocurrir cuando el foco est en ese elemento y pulsamos el tabulador, o nos movemos a otro elemento con el ratn. focus() Sirve para definir acciones cuando se produce el evento focus de Javascript, cuando el elemento gana el foco de la aplicacin

OTROS EVENTOS
resize() Este evento es lanza cuando se cambia el tamao de la ventana. Este evento slo se enva al objeto window. scroll() Este evento se enva a los elementos que cambian su scroll ante una accin del usuario. Se aplica a los objetos window, frames y elementos con la propiedad overflow CSS puesta en estado scroll. select() El evento select se lanza cuando el usuario selecciona un texto del elemento sobre el que se gestiona el evento. Este evento slo se aplica a los textarea y a los input de tipo texto. submit() Este evento se lanza cuando un usuario est tratando de enviar un formulario. Este evento slo es vlido para formularios. Dependiendo del navegador es posible enviar el formulario sin necesidad de pinchar en un botn, simplemente pulsando la tecla ENTER. Cuando esto sucede el evento no se lanza, por lo que tenemos que prestar especial atencin a este comportamiento para gestionarlo en su correspondiente evento keypressed. toggle() El evento toggle se utiliza para generar comportamientos de cambio de estado generados al pinchar sobre un elemento. Por ejemplo, puede interesarnos que al pinchar sobre un elemento se visualice y que al volver a pinchar se oculte. Toggle nos permite hacer esto asociando dos o ms funciones al mismo evento que se van ejecutando de forma secuencial. La primera vez que se pincha sobre el elemento (y todas las veces impares), se ejecuta la primera funcin y la segunda vez que se pincha el elemento (y todas las veces pares) se ejecuta la segunda funcin:
$(document).ready(function(){ $("p").toggle(function(){ alert("Me acabas de activar"); },function(){ alert("Me acabas de desactivar"); }); });

unload() El evento unload se lanza cuando un usuario navega fuera de la pgina web o se dirige hacia otra parte de la web. Se ejecuta siempre, incluso si el usuario cierra el navegador

jQUERY

13

DEFINIR/ELIMINAR EVENTOS: bind/unbind

BIND
El mtodo bind() permite definir cualquier tipo de eventos y los enlaza con el controlador de evento que el programador desee. Su sintaxis es la siguiente:
bind (tipo_evento, controlador_evento)

tipo_evento: es el evento que se quiere enlazar con el objeto controlador_evento: se corresponde con la funcin que har de controlador para el evento definido. A la hora de aplicar bind se deben seguir los siguientes pasos en el fichero jQUERY: 1. Definir los controladores de eventos como funciones y asignar cada controlador a una variable que posteriormente va a ser referenciada. 2. Aplicar el mtodo bind y utilizar la variable creada en 1. Al final el cdigo jQUERY quedara como sigue: //1. Definir el controlador de evento
var functionControlador=function(event){ if ($(this).css("color")=="#0000ff") $(this).css("color", "#ffff00"); else $(this).css("color", "blue"); }; $(document).ready(function(){

//2. Utilizar bind para asignar eventos/controladores al element p

$("p").bind("click mouseenter mouseleave", functionControlador); });

Ejemplo 1. Asignacin de un evento a los elementos de una etiqueta

Pgina Web que muestra una ventana de alerta cuando se pulsa sobre alguno de los prrafos de la misma (<p>) Fichero HTML
<!DOCTYPE HTML> <html> <head> <meta charset=utf-8"> <script src="js/jquery-1.5.1.min.js" ></script> <script src="js/fichero3.js" ></script> <title>Ejercicio3_Eventos1</title> </head> <body> <h1>PRIMER TTULO</h1> <p>Este es el primer prrafo</p> <h2>SEGUNDO TTULO</h2> <p>Este es el segundo prrafo </p>

jQUERY

14

</body> </html>

Fichero jQUERY: enlaza los prrafos <p> con el evento click y un controlador de evento que muestra un mensaje de alerta cuando se produce el evento.
$(document).ready(function(){ $("p").bind("click", function(){ alert("Has hecho clic"); }); });

Ejemplo 2. Asignacin de una funcin a varios eventos a la vez

Fichero jQUERY: enlaza los prrafos <p> con varios eventos (click, mouseenter, mouseleave) y un controlador nico para todos ellos que hace que el contenido de los prrafos cambie de color al producirse el evento correspondiente.
var functionControlador=function(event){ if ($(this).css("color")=="#0000ff") $(this).css("color", "#ffff00"); else $(this).css("color", "blue"); }; $(document).ready(function(){ $("p").bind("click mouseenter mouseleave", functionControlador); });

UNBING
Se puede utilizar unbind para eliminar un evento previamente asignado a uno o varios elementos. Para eliminar todos los eventos asociados a un elemento
$(elemento).unbind();

Para eliminar un evento asociado a un elemento

$(elemento).unbind(evento);

OTRAS UTILIDADES
jQuery incluye muchas otras funciones para facilitar el desarrollo de las aplicaciones web, entre otras: Oculta todos los elementos de un formulario Devuelve "true" si el navegador es alguna versin de Internet Explorer Devuelve "true" si el navegador es alguna versin de Safari
$(miFormulario.elements).hide(); $.browser.msie $.browser.safari

jQUERY

15

Aade la clase CSS a todos los elementos o la quita si ya la tenan establecida

$("p").toggleClass("seleccionado");

MTODOS
text()
Para saber el contenido de un elemento el objeto jQuery cuenta con un mtodo llamado text(), que se puede utilizar para Modificar el contenido de un elemento Obtener el contenido de un elemento
$(#miElemento).text (prrafo Nuevo) var contenido=$(#miElemento).text()

Ejemplo
La siguiente funcin jQUERY cambia el texto del prrafo que est en primera posicin cuando se pulsa dobleclick en cualquier prrafo de la Web, adems muestra el contenido anterior del prrafo en una ventana.
$(document).ready(function(){ $("p").dblclick(function(){ var contenido=$("p:eq(1)").text() alert(contenido); $("p:eq(1)").text("nuevo texto"); }) });

attr()/removeAttr
El mtodo attr() permite agregar propiedades a un elemento HTML y recuperar el valor de su propiedad. Recuperar el valor de la propiedad Dar valor a una propiedad Eliminar una propiedad
$(elemento).attr(nombre_propiedad) $(elemento).attr(nombre de propiedad,valor) $(elemento).removeAttr(nombre de propiedad)

Ejemplo 1
Esta pgina Web cambia el atributo del ttulo del enlace al hacer clic sobre el primer prrafo. Fichero html
<!DOCTYPE HTML> <html> <head>

jQUERY

16

<meta charset="utf-8"> <script src="js/jquery-1.5.1.min.js" ></script> <script src="js/fichero4_color.js" ></script> <title>Ejercicio3_Eventos1</title> </head> <body> <h1>PRIMER TTULO</h1> <p>Cambia el ttulo</p> <h2>SEGUNDO TTULO</h2> <a href="http://www.google.com" title="Acceso a google" id="miEnlace">Google</a></p> </body> </html>

Fichero Jquery
$(document).ready(function(){ $("p").click(function(){ $("#miEnlace").attr("title","Pepe"); }) });

Ejemplo 2
La pgina Web contiene botones que modifican los atributos de borde de la tabla Fichero html
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/estilos3.css"> <script src="js/jquery-1.5.1.min.js" ></script> <script src="js/fichero4_attr.js" ></script> <title>Ejercicio3_Eventos1</title> </head> <body> <input type="button" id="boton1" value="Aadir propiedad border"><br> <input type="button" id="boton2" value="Recuperar valor de la propiedad border"><br> <input type="button" id="boton3" value="Eliminar la propiedad border"> <table id="tabla1"> <tr> <td>1111111111</td><td>1111111111</td><td>1111111111</td ><td>1111111111</td> </tr> <tr> <td>2222222222</td><td>2222222222</td><td>2222222222</td ><td>2222222222</td> </tr>

jQUERY

17

<tr> <td>3333333333</td><td>3333333333</td><td>3333333333</td ><td>3333333333</td> </tr> </table> </body> </html>

Fichero Jquery
$(document).ready(inicializarEventos); function inicializarEventos(){ $("#boton1").click(agregarPropiedadBorder); $("#boton2").click(recuperarPropiedadBorder); $("#boton3").click(eliminarPropiedadBorder);} function agregarPropiedadBorder(){ $("#tabla1").attr("border","1");} function recuperarPropiedadBorder(){ var x=$("#tabla1"); if (x.attr("border")!=undefined) alert(x.attr("border")); else alert("No est definida la propiedad border en la tabla");} function eliminarPropiedadBorder(){ $("#tabla1").removeAttr("border");}

addClass/removeClass
Los mtodos addClass y removeClass nos permiten asociar y desasociar una clase a un elemento o conjunto de elementos HTML. Aadir una clase CSS a un elemento. Eliminar una clase CSS de un elemento
$(elemento).addClass(nombre_clase) $(elemento).removeClass(nombre_clase)

Ejemplo
El siguiente ejemplo muestra dos botones que permiten enlazar y eliminar una clase CSS de un elemento respectivamente. Fichero HTML
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/estilos1.css"> <script src="js/jquery-1.5.1.min.js" ></script> <script src="js/fichero4_addClass.js" ></script>

jQUERY

18

<title>Ejercicio4_addClass</title> </head> <body> <h1>Ejemplo de cambio de estilos</h1> <input type="button" id="elBotonA" value="Adir clase"> <input type="button" id="elBotonE" value="Eliminar clase"> </body> </html>

Fichero JavaScript
$(document).ready(inicializarEventos); function inicializarEventos(){ $("#elBotonE").click(desasociarClase); $("#elBotonA").click(asociarClase);} function asociarClase(){ var x=$("h1"); x.addClass("azul");} function desasociarClase(){ var x=$("h1"); x.removeClass("azul");}

Fichero de estilos
.azul{ color: #0000cc;

html()
Es posible agregar bloques de cdigo HTML a partir de un elemento de la pgina. esta propiedad es bsicamente = innerHTML del DOM. Para agregar un bloque HMTL Para obtener el bloque HTML contenido a partir del elemento que hace referencia el objeto jQuery.
$(elemento).html(bloque_HTML)

$(elemento).html()

Ejemplo
Hay un botn para modificar el contenido del formulario y otro para ver su contenido Fichero HTML
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/estilos1.css"> <script src="js/jquery-1.5.1.min.js" ></script> <script src="js/fichero4_html.js" ></script> <title>Ejercicio4_html</title>

jQUERY

19

</head> <body> <input type="button" id="boton1" value="Mostrar formulario"> <input type="button" id="boton2" value="Mostrar elementos html del formulario"><br> <div id="formulario"> </div> </body> </html>

Fichero JavaScript
$(document).ready(inicializarEventos); function inicializarEventos(){ $("#boton1").click(presionBoton1); $("#boton2").click(presionBoton2);} function presionBoton1(){ var x; x=$("#formulario"); x.html("<form>Ingrese nombre:<input type='text' id='nombre'> <br>Introduzca clave:<input type='text' id='clave'> <br> <input type='submit' value='confirmar'></form>"); } function presionBoton2(){ $("#formulario"). alert (x.html()); }

css()
jQuery tambin permite aadir nuevas propiedades CSS a los elementos de una forma sencilla utilizando el mtodo siguiente:
$(elemento).css (propiedadCSS, valor)

Ejemplos
//Aade un ancho a todas las etiquetas p
$(p).css(width,400px)

//Asigna el color azul a los textos de id indicado

$(#miElemento).css(color,blue)

//Aade un borde a todas las listas

$(ul).css(border, solid 1px )

//Obtiene el valor de la propiedad "color" de CSS del los prrafos de la pgina

$("p").css("color");

//Establece varias propiedades CSS de un elemento

$("# miElemento ").css({ color: "red", background: "blue", font-weight: "bold" });

append / prepend
jQuery nos permite aadir contenido HTML al final de otro ya existente jQUERY 20

$(elemento).append(contenidoHTML)

Tambin podemos aadir contenido al principio

$(elemento).prepend(contenidoHTML)

Ejemplos
//Aadir un texto y unas etiquetas HTML al elemento con id=miElemento.
$(#miElemento).append(<p>Nuevo contenido de miElemento</p>)

//Para aadir un elemento al final de la lista

$("ul").append("<li>otro item al final</li>");

//Para aadir un elemento al principio de la lista

$("ul").prepend("<li>otro item al principio</li>");

ITERADOR each
jQuery dispone de un mtodo que nos permite asociar una funcin que se ejecutar por cada elemento que contenga la lista de elemento. Dentro de esta funcin podemos manipular el elemento actual. La sintaxis del each es:
$(elementos).each(nombre de funcin)

Ejemplo
Resaltar con fondo amarillo todos los prrafos que tienen menos de 50 caracteres. Fichero HTML
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/estilos4.css"/> <script src="js/jquery-1.5.1.min.js" ></script> <script src="js/fichero5_each.js" ></script> <title>Uso de each</title> </head> <body> <div id="parrafos"> <p>La memoria es como el mal amigo; cuando ms falta te hace, te falla.</p> <p>Ms rpido se coge al mentiroso que al cojo.</p> <p>Cuando los que mandan pierden la vergenza, los que obedecen pierden el respeto.</p> <p>En todas las tierras el sol sale al amanecer.</p> </div> </body> </html>

Fichero JavaScript
$(document).ready(inicializarEventos);

jQUERY

21

function inicializarEventos(){ $("#parrafos p").each(resaltarParrafos);} function resaltarParrafos(){ var x=$(this); if (x.text().length<50) x.css("background-color","#ff0");}

EFECTOS VISUALES
Todas las aplicaciones web modernas incorporan pequeos efectos visuales y animaciones que, si se utilizan de forma adecuada, mejoran la interaccin con la aplicacin y su usabilidad. jQuery incluye de serie los efectos visuales ms utilizados por los diseadores, pudiendo controlar mediante sus opciones la duracin de cada efecto.

hide/show | slow/fast
jQuery permite manejar los efectos visuales de un pgina Web utilizando, entre otros, los mtodos hide (ocultar) y show (mostrar). Estos mtodos ya los hemos visto, pero en este apartado vamos a ver cmo lograr ocultar y mostrar informacin a distintas velocidades. Muestra un elemento de forma normal (normal), rpda (fast) o lenta (slow), tambin se puede indicar los milisegundos de la accin. Tambin es posible indicar una funcin para que se ejecute al finalizar el efecto visual.
$(elemento).show([fast/slow/normal/milisegundos],[function])

Para que se muestre de forma instantnea se omite cualquier parmetro Los parmetros funcionan de forma equivalente con hide (ocultar)
$(elemento).hide([fast/slow/normal/milisegundos],,[function])

Ejemplo
Este efecto lo vamos a ver con un ejemplo que muestra un recuadro con texto y mediante el uso de dos botones podremos hacer que se oculte lentamente le cuadro o que se muestra rpidamente. Fichero HTML
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/estilos4.css"/> <script src="js/jquery-1.5.1.min.js" ></script> <script src="js/fichero4_show_hide.js" ></script> <title>Mostar/Ocultar rpidamente/suavemente</title> </head> <body>

jQUERY

22

<input type="button" id="boton1" value="Ocultar recuadro"> <input type="button" id="boton2" value="Mostrar recuadro"> <div id="descripcion" class="recuadro"> <p>HTML5 es una nueva e innovadora tcnologa para la craecin de pginas Web </p> </div> </body> </html>

Fichero JavaScript
$(document).ready(inicializarEventos); function inicializarEventos(){ $("#boton1").click(ocultarRecuadro); $("#boton2").click(mostrarRecuadro);} function ocultarRecuadro(){ $("#descripcion").hide("slow");} function mostrarRecuadro(){ $("#descripcion").show("fast");}

Fichero CSS
.recuadro { background-color:#ffffcc; font-family:verdana; font-size:14px; border-top-width:1px; border-right-width:3px; border-bottom-width:3px; border-left-width:1px; border-top-style:dotted; border-right-style:solid; border-bottom-style:solid; border-left-style:dotted; border-top-color:#ffaa00; border-right-color:#ff0000; border-bottom-color:#ff0000; border-left-color:#ffaa00;

fadeIn / fadeOut / fadeTo

Estos mtodos provocan tambin que un elemento se muestre (fadein) o se oculte (fadeout) pero acta sobre la transparencia de los objetos. La sintaxis y los atributos son equivalentes a los mtodos show/hide
$(elemento).fadeIn([fast/slow/normal/milisegundos],[function])

jQUERY

23

$(elemento).fadeOut([fast/slow/normal/milisegundos],[function])

Ejemplo
Con el mismo cdigo HTML del ejemplo anterior pero utilizando el siguiente fichero JavaScript conseguimos el efecto de ocultar y mostrar el cuadro actuando sobre la opacidad del mismo.
$(document).ready(inicializarEventos); function inicializarEventos(){ $("#boton1").click(ocultarRecuadro); $("#boton2").click(mostrarRecuadro);} function ocultarRecuadro(){ $("#descripcion").fadeOut("slow");} function mostrarRecuadro(){ $("#descripcion").fadeIn("fast");}

El mtodo fadeTo puede modificar la opacidad de un elemento hasta un valor determinado que se pasa por parmetro. Podemos inicializar este mtodo de las siguientes formas:
fadeTo([velocidad],[valor de opacidad])

Indicamos la velocidad de transicin del estado actual al nuevo estado (slow/normal/fast) o un valor indicado en milisegndos. El valor de la opacidad es un nmero real entre 0 (transparente) y 1(opaco) Tambin podemos llamar al mtodo fadeTo con tres parmetros:
$(elemento).fadeTo([velocidad],[valor de opacidad],[funcin])

Esta segunda estructura de la funcin permite ejecutar una funcin cuando finaliza la transicin. Hay que tener en cuenta que fadeTo por ms que indiquemos el valor 0 en opacidad el espacio que ocupa el elemento en la pgina seguir ocupado por un recuadro vaco.

Ejemplo
Realizaremos un ejemplo que permitir reducir y aumentar la opacidad de un cuadro por medio de clic a dos botonesFichero HTML
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/estilos4.css"/> <script src="js/jquery-1.5.1.min.js" ></script> <script src="js/fichero4_fadeTo.js" ></script> <title>Mostar/Ocultar utilizando la opacidad</title> </head>

jQUERY

24

<body> <input type="button" id="boton1" value="Reducir opacidad"> <input type="button" id="boton2" value="Aumentar opacidado"> <div id="descripcion" class="recuadro"> <p>HTML5 es una nueva e innovadora tcnologa para la craecin de pginas Web </p> </div> </body> </html>

Fichero JavaScript
$(document).ready(inicializarEventos); function inicializarEventos(){ $("#boton1").click(reducirOpacidad); $("#boton2").click(aumentarOpacidad);} function reducirOpacidad(){ $("#descripcion").fadeTo("fast",0.5);} function aumentarOpacidad(){ $("#descripcion").fadeTo("slow",1);}

Comprobar si un element es visible

A veces puede ser necesario saber si un elemento est visible o no y para ello podemos utilizar el mtodo is pasndole como parmetro la funcin hidden (oculto) o visible (visible) //devuelve true si est oculto
$(elemento).is(:hidden)

//devuelve true si est visible

$(elemento).is(:visible)

toggle()
Ya hemos visto el mtodo toggle para alternar la ejecucin de dos funciones, pero en este apartado lo veremos para intercambiar la visibilidad de un elemento. El mtodo toggle permite ocultar un elemento si ste est visible y mostrarlo si est oculto.
$(elemento).toggle([fast/slow/normal/milisegundos],[function])

Ejemplo
Veremos el funcionamiento de toogle en una pgina Web que presenta un botn que muestra/oculta un cuadro, a la vez tambin cambia el texto del botn segn el estado del cuadro. Fichero HTML
<!DOCTYPE HTML>

jQUERY

25

<html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/estilos4.css"/> <script src="js/jquery-1.5.1.min.js" ></script> <script src="js/fichero4_toggle.js" ></script> <title>Mostar/Ocultar utilizando la opacidad</title> </head> <body> <input type="button" id="boton1" value="Ocultar"> <div id="descripcion" class="recuadro"> <p>HTML5 es una nueva e innovadora tcnologa para la craecin de pginas Web </p> </div> </body> </html>

Fichero JavaScript
$(document).ready(inicializarEventos); function inicializarEventos(){ $("#boton1").click(modificarVisibilidad);} function modificarVisibilidad(){ $("#descripcion").toggle("slow",cambiarBoton);} function cambiarBoton(){ if ($("#descripcion").is(":hidden") == true) $("#boton1").attr("value","Mostrar"); else $("#boton1").attr("value","Ocultar");}

animate
El mtodo animate permite realizar animaciones personalizadas. Su sintaxis es la siguiente:
$(elemento).animate({propiedades},[duracin],[f_animacin],[callback])

Donde: propiedades, es el nico parmetro obligatorio y se utiliza para indicar que atributos CSS se quieren actualizar con nuevos valores. JQuery slo permite el cambio de propiedades CSS que tengan valores numricos. Por ejemplo podramos cambiar el tamao de la letra pero no su fuente. La medida por defecto es la de pxeles. Los nuevos valores se deben indicar de forma absoluta o de forma relativa utilizando la notacin +=n p +=n duracin, indica la duracin de la animacin en milisegundos o un valor identificativo de la velocidad (normal, fast o slow).

jQUERY

26

funcin de animacin, es una funcin que contiene las instrucciones que indican cmo se realizar la animacin, tiene dos posibles valores swing (por defecto) y linear. callback, este parmetro permite ejecutar una funcin cuando finaliza la animacin.

Ejemplo
Veremos el funcionamiento de animate en una pgina Web que presenta un botn que realiza la animacin de un cuadro de texto. Fichero HTML
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/estilos4.css"/> <script src="js/jquery-1.5.1.min.js" ></script> <script src="js/fichero4_animate.js" ></script> <title>Uso de animate</title> </head> <body> <input type="button" id="boton1" value="Animar"> <div id="descripcion" class="recuadro" > <p>HTML5 es una nueva e innovadora tcnologa para la creacin de pginas Web </p> </div> </body> </html>

Fichero JavaScript
$(document).ready(inicializarEventos); function inicializarEventos(){ $("#boton1").click(hacerAnimacion);} function hacerAnimacion(){ $("#descripcion").animate({ 'border-bottom-width': "20",'font-size': '25pt'});}

http://www.w3schools.com/jquery/jquery_effects.asp

PRCTICA: MEN DESPLEGABLE

Fichero HTML
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8">

jQUERY

27

<link rel="stylesheet" href="estilos_menuDesplegable.css"/> <script src="../js/jquery-1.5.1.min.js" ></script> <script src="jquery_menuDesplegable.js" ></script> <title>Uso de animate</title> </head> <body> <div id="menu"> <ul> <li><a href="http://www.google.com.ar">Google</a></li> <li><a class="imagen" href="#">Peridicos</a> <ul> <li><a href="http://www.lavozdegalicia.es">La Voz de Galicia</A></li> <li><a href="http://www.farodevigo.es">El Faro de Vigo</A></li> </ul> </li> <li><a class="imagen" href="#">Televisiones</a> <ul> <li><a href="http://www.rtve.es">Televisin espaola</a></li> <li><a href="http://www.cuatro.com">Cuatro</a></li> </ul> </li> <li><a href="http://www.msn.com">MSN</a></li> </ul> </div> </body> </html>

Fichero CSS
#menu { font-family: Arial; margin:0px; padding:0px;} #menu ul { margin:0px; padding:0px; list-style-type:none;} #menu a { display: block; padding: 3px; width: 160px; background-color: #f7f8e8; border-bottom: 1px solid #eee; text-align:center;}

jQUERY

28

.imagen { background-image:url(imagenes/triangulo.gif); background-position:top left; background-repeat:no-repeat;} #menu a:link, #menu a:visited { color: #f00; text-decoration: none;} #menu a:hover { background-color: #369; color: #fff;} #menu li ul li a{ display: block; padding: 3px; width: 160px; background-color: #ffa; border-bottom: 1px solid #eee; text-align:center;} ul li ul a:link, ul li ul a:visited { color: #000; text-decoration: none;} ul li ul a:hover { background-color: #369; color: #fff;}

Fichero JavaScript
$(document).ready(function() { $("#menu").children().children("li").each(function () { if ($(this).find("ul").size()!=0) $(this).find("ul").hide(); }); $("a").click(function(e) { if ($(this).parent().find("ul").size()!=0) { if ($(this).parent().find("ul").css("display")=="none") $(this).parent().find("ul").show(); else $(this).parent().find("ul").hide(); } }) })

jQUERY

29

jQUERY

30

ANEXO
OPERACIONES HABITUALES
1. Agregar una clase CSS a un elemento especfico.
$('#elemento').addClass('clase');

2. Quitar una clase CSS de un elemento especfico.

$('#elemento'). removeClass('clase');

3. Comprobar si un elemento tiene una clase CSS asignada.

$(id).hasClass(clase)

4. Reemplazar una hoja de estilo (CSS) con jQuery.

$('link[media='screen']').attr('href', 'nueva_hoja.css');

5. Aadir HTML a un elemento especfico.

$('#id-del-elementp').append('codigo HTML aqu');

6. Verificar si existe o no un elemento.

if ($('img').length) { log('Se encontraron elementos en la pgina usando "img"'); } else { log('No se encontraron elementos img'); }

7. Conocer el elemento padre de otro elemento.

var id = $("button").closest("div").attr("id");

8. Obtener los elementos primos de un elemento.

$("div").siblings()

9. Remover un elemento de una lista desplegable.

$("#selectList option[value='2']").remove();

10. Obtener el texto de un elemento seleccionado.

$('#selectList :selected').text();

ANEXO

31

FUENTES
http://api.jquery.com/toggle/ jQuery API http://www.maestrosdelweb.com/editorial/javascript-facil-y-rapido-con-jquery/ JavaScript fcil y rpido con jQuery http://tecnokun.org/manipulando-el-dom-con-jquery-10-ejemplos-practicos/ Manipulando DOM con jQuery: 10+ejemplos prcticos http://www.emenia.es/curso-de-jquery-2-selectores-primera-parte/ Curso de jQuery: Selectores http://parasitovirtual.wordpress.com/category/cursos-y-articulos/desarrollo-dewebs/javascript/jquery/ JQuery: El rincn de un parsito virtual http://www.javascriptya.com.ar/jquery/index.php?inicio=18 jQuery ya!

FUENTES

32