El

framework de JavaScript 

JQUERY .................................................................... ....................................................................................................................................... ...................................................................3 INTRODUCCIÓN ..................................................................................................................................... 3 DOM ...................................................................................................................................................... 3 UTILIZAR jQUERY ................................................................................................................................... 4 PRINCIPIOS DE USO ............................................................................................................................... 5 CARGAR LA WEB .................................................................................................................................... 5 Práctica ............................................................................................................................................... 5 ACCESO A LOS ELEMENTOS DE LA WEB .................................................................................................. 6 Con JavaScript .................................................................................. ................................................... 6 Con jQuery .......................................................................................................................................... 6 SELECTORES ........................................................................................................................................... 6 Selector de etiquetas. eti quetas. ...................................................... ................................................................. ....... 6 Selector por identificador ..................................................................... ................................................... 7 Selector por clase CSS ...................................................... ................................................................. ....... 7 Selectores de varios vario s elementos ..................................................................................................... .......... 7 Selectores posicionales .......................................................................................................... .................. 7 Selectores parent>child ........................................................................ ................................................... 7 Selectores de formulario ......................................................................................................................... 8 Selectores de jerarquía ............................................................... ............................................................. 8 TABLAS DE SELECTORES .............................................................. ............................................................. 9 OPERADORES .............................................................................................................. ........................... 10 Ejemplo ............................................................................................. ................................................ 10 EVENTOS .............................................................................................................................................. 10 Práctica ............................................................................................................................................. 11 TIPOS DE EVENTOS ................................................................................................................................ 11 EVENTOS RELACIONADOS CON EL RATÓN............................................................. ........................... 12 EVENTOS RELACIONADOS CON EL TECLADO ............................................................................ ........ 12 EVENTOS COMBINADOS TECLADO-RATÓN...................................... ................................................. 12 OTROS EVENTOS .............................................................................. ................................................. 13 DEFINIR/ELIMINAR EVENTOS: bind/unbind ................................................................ ........................... 14 BIND ............................................................................................................ ...................................... 14 Ejemplo 1. Asignación de un evento a los elementos de una etiqueta .................................... ........ 14 Ejemplo 2. Asignación de una función a varios eventos a la vez ...................................................... 15 UNBING ............................................................ ................................................................. ................ 15 OTRAS UTILIDADES .............................................................................................................................. 15 MÉTODOS ............................................................................................................................................ 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

1

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 PRÁCTICA: MENÚ MEN Ú DESPLEGABLE .......................................................................................................... 27

 ANEXO...................................................................................................................................... ...................................................................................................................................... 31 OPERACIONES HABITUALES HABIT UALES ................................................................................................................. 31

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

jQUERY

2

 jQUERY  INTRODUCCIÓN 1   jQuery es un framework  de JavaScript que permite simplificar el manejo de los documentos HTML, el árbol DOM, manejar eventos, desarrollar animaciones y agregar interacción con Ajax a páginas Web.

JQuery es software libre y de código abierto creado por John Resig que además trabaja para Mozilla Corporation. La primera versión de jQuery estable apareció en el año 2006 y la última, de febrero de 2011, es la versión 1.5.1. Esta última versión se caracteriza por la utilización de Ajax. El uso de jQuery librera al programador de tener que implementar los métodos JavaScript que el framework contiene. Entre otras facilidades, jQuery tiene implementados todos sus métodos para detectar el browser del usuario y adaptar las funciones a cada uno de ellos. La librería jQuery en resumen nos aporta las siguientes ventajas:  

 



Ahorra muchas líneas de código. Hace transparente el soporte de nuestra aplicación para los navegadores principales. Provee de un mecanismo para la captura de eventos. Provee un conjunto de funciones para animar el contenido de la página en forma muy sencilla. Integra funcionalidades para trabajar con AJAX.

DOM Acorde al W3C el  Document Object Model o DOM es una interfaz de programación de aplicaciones (API) para documentos validos HTML y bien construidos XML. Define la estructura lógica de los documentos y el modo en que se accede y manipula. El DOM permite un acceso a la estructura de una página HTML o XHTML mediante el mapeo de los elementos de esta página en un árbol de nodos. Cada elemento se convierte en un nodo y cada porción de texto en un nodo de texto. La siguiente página

Esta es mi primera Web

1

Un framework son librerías de código que contienen métodos métodos ya listos para utilizar

jQUERY

3

Se corresponde con el siguiente árbol de nodos generado automáticamente por DOM

Documento HTML

body

head

meta

title

“Esta es mi Web”

p

“Esta es mi  primera”

strong

“Web”

Otro ejemplo gráfico

UTILIZAR jQUERY  Para utilizar la librería debemos descargarla del sitio oficial (http://jquery.com/ ) e introducir en cada página que lo requiera utilizar la siguiente línea en el bloque :

<script src=" jquery-1.5.1.min.js"> Del sitio oficial de jQuery descargaremos la versión 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 página es mediante la función $(), un alias de jQuery que recibe como parámetro una expresión CSS o el nombre de una etiqueta HTML y devuelve todos los elementos que concuerdan con la expresión.

// Devuelve el elemento con id="cabecera"

$("#cabecera") // Devolverá una matriz de elementos con class="dest class="destacado" acado"

$(".destacado") Una vez obtenidos los elementos, se les puede aplicar cualquiera de las funciones que facilita la biblioteca.

// Se elimina el estilo (removeClass()) (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 más utilizadas en las aplicaciones JavaScript es la siguiente

window.onload = function() {,,,} La orden anterior hace que  function() se ejecute una vez que la página se haya cargado por completo. jQuery dispone de una función equivalente $(document).ready(function(){…}) La gran ventaja de la función de jQuery, es que la página se puede manipular en cuanto se ha cargado su código HTML (y por tanto, se ha construido el árbol DOM de la página) mientras que la función de JavaScript espera a que se carguen todos los elementos de la página, incluyendo todas las imágenes. De esta forma, las aplicaciones realizadas con jQuery pueden responder de forma mucho más rápida que las aplicaciones JavaScript tradicionales.

Práctica Se mostrará una ventana de bienvenida al cargar la página Fichero HTML

<meta charset=utf-8"> <script src="js/jquery-1.5.1.min.js"> <script src=" js/fichero.js" >

Comenzando.....

jQUERY

5

Fichero JavaScript

$(document).ready(function(){ alert("Bienvenid@ a mi página"); });

 ACCESO A LOS ELEMENTOS DE LA WEB Por otra parte, la función getElementById() es posiblemente la más utilizada al desarrollar aplicaciones web, ya que permite seleccionar un elemento a partir de su atributo “id”. Además, existen otras dos funciones relacionadas: getElementsByTagName() y getElementsByName(). jQuery incluye la función $() como una alternativa más rápida y completa para seleccionar cualquier elemento de la página:

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 página Web. Los selectores básicos utilizados en jQuery son:

Selector de etiquetas. $(“h2”) //selecciona todos los elementos que tienen etiqueta

…..



Selector por etiqueta/contenido. jQUERY

6

$(“p:contains(„Hola‟)”) //selecciona los párrafos (

…

) 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 y todos los

Selectores posicionales Los selectores posicionales stán basados en las relaciones posicionales entre elementos según la estructura DOM del documento. Selecciona el primer elemento

de la página $(“p:first”) 

Selecciona el primer de la página que tiene un atributo src acabado en .png $(“img[src$=.png]:first) 

Selecciona todos los párrafos que implementen la clase CSS miClase: $( “p[@miClase]”   “p[@miClase]” ) 

Selecciona todos los divs que contengan algún párrafo dentro:  “div[p]” ) $( “div[p]”  



Selecciona todos los párrafos que tengan al menos un enlace:

$("p[a]") 

Selecciona todos los radio buttons que han sido chequeados

$("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 párrafos

$("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 específica. Selecciona todos los elementos 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 $(“:button”) 

Selecciona todos los elementos activados del formulario: $(“:enabled”) 



Selecciona todos los radio buttons y checkbox del formulario que están pulsados

$(":checked") 

Selecciona todos los radio button que estén chequeados

$(":radio :checked")

Selectores de jerarquía 

Selector de descendientes: selecciona elementos que desciendan de otro elemento (CSS 1)

 jquery("div.entrada h2") 

Selector de hijos: selecciona elementos que sean hijos directos de otro elemento (CSS 2)

 jquery("div.entrada > h2") 

Pseudo clase hijo: selecciona el enésimo hijo de un elemento (CSS 3)

 jquery("tr:nth-child(1)") 

Pseudo clase primer hijo: selecciona el primero hijo de un elemento (CSS 2)

 jquery("tr:first-child") 

Pseudo clase último hijo: selecciona el último hijo de un elemento (CSS 3)

 jquery("tr:last-child") 

Pseudo clase hijo único: selecciona los elementos que sean hijos únicos de otros elementos (CSS 3)

 jquery("div:only-child") jQUERY

8



Pseudo clase primero: selecciona el primer elemento de un grupo de elementos. Equivale a eq(0) (jQuery)

 jquery("td:first)") 

Pseudo clase último: selecciona el último elemento de un grupo de elementos (jQuery)

 jquery("td:last)") 

Pseudo clase mayor que: selecciona todos los elementos con un índice mayor que el indicado en un grupo de elementos (jQuery)

 jquery("td:gt(0)") 

Pseudo clase menor que: selecciona todos los elementos con un índice menor que el indicado en un grupo de elementos (jQuery)

 jquery("td:lt(3)") 

Pseudo clase par: selecciona los elementos pares de un grupo de elementos (jQuery)

 jquery("td:even") 

Pseudo clase impar: selecciona los elementos impares de un grupo de elementos (jQuery)

 jquery("td:odd") 

Selector de hermanos: selecciona todos los hermanos que se encuentren precedidos de otro elemento (CSS 3)

 jquery("div.entrada ~ p") 

Selector de próximo adyacente: similar al anterior, pero sólo selecciona el adyacente directo (CSS 2)

 jquery("div.entrada + p") 

Pseudo clase padre: selecciona los padres de otros elementos (jQuery)

 jquery("h2:parent") 

Pseudo clase vacío: selecciona los elementos que no tengan ningún hijo, incluyendo texto plano (CSS 3)

 jquery(":empty")

TABLAS DE SELECTORES Cuando una función jQuery devuelve varios elementos, lo hace en formato de tabla, donde cada elemento está identificado por una posición de la misma. Entonces mediante: eq(indice) podemos obtener el elemento de la lista a la que se hace referencia de la posición índice+1 , teniendo en cuenta que las lista en jQuery empiezan contar desde 0. Por ejemplo, en la siguiente instrucción almacena una referencia al tercer enlace que implementa la clase “enlaceAmigos”.

enlace = $('a.enlaceAmigos:eq(2)' ) A continuación se muestra como acceder al párrafo número 3 (segunda posición) miParrafo=$(“p:eq(2)”) jQUERY

9

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





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

Ejemplo $(document) document).ready ready((function() { //hace referencia a los enlaces que empiezan por mailto:

$('a[href^="mailto:"]'). addClass addClass('mailto') ('mailto');; //hace referencia a los enlaces que hagan referencia a un fichero pdf 

$('a[href$=".pdf"]'). addClass addClass('enlacePdf') ('enlacePdf');; //hace referencia a un enlace a sitio.com

$('a[href*= $('a[href*= "sitio.com"]'). "sitio.com"]').addClass addClass('sitio') ('sitio');; }); }); Estas clases CSS deben estar previamente definidas en la página, por ejemplo:

.mailto { color: blue blue;; } .enlacePdf { .enlacePdf  { color:green green;; } .sitio { color: yellow yellow;; } De esta forma, los enlaces de tipo malito aparecerán en azul, los enlaces a ficheros pdf  verdes y los enlaces a “ sitio.com”  sitio.com” aparecerán en amarillo. http://parasitovirtual.wordpress.com/2010/12/06/curso-jquery-capitulo-6-selectoresbasicos-de-filtro/  Curso jQuery. Capítulo 6: Selectores básicos de filtro. « El rincón de un parásito 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 interacción del usuario con una Web. Es fundamental que el programador maneje con soltura la gestión 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 acción sobre la página Web, esto puede ser: cargar la página, 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 serán 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.

Práctica En el siguiente formulario HTML, al cargar la página se define un evento clic para el   botón 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.

<meta charset=utf-8"> <script src="js/jquery-1.5.1.min.js" > <script src="js/fichero.js" >

Ejemplo de Formulario Web

Nombre

Fecha

Fichero  fichero.js (JavaScript)

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

TIPOS DE EVENTOS  jQuery dispone de tantas funciones como eventos estándar de JavaScript. El nombre de cada función 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 RATÓN 

click() Detecta el evento clic cuando se produce en un elemento de la página.



dblclick() Detecta un evento cuando se produce un doble clic sobre un elemento.



hover() Esta función en realidad sirve para manejar dos eventos, cuando el ratón 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 botón e independientemente de si lo suelta o no. Sirve tanto para el botón derecho como el izquierdo del ratón.



mouseup() Detecta un evento cuando el usuario ha hecho clic y luego suelta un botón del ratón. El evento mouseup se produce sólo en el momento de soltar el botón.



mouseenter() Detecta el evento se produce al situar el ratón encima de un elemento de la página.



mouseleave() Detecta un evento cuando el ratón sale de encima de un elemento de la página.



mousemove() Detecta el evento que se produce al mover el ratón sobre un elemento de la página.



mouseout() Detecta el evento que se desata cuando el usuario sale con el ratón de la superficie de un elemento.



mouseover() Detecta el evento que se produce cuando el ratón está sobre un elemento, pero tiene como particularidad que puede producirse varias veces mientras se mueve el ratón 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 presión o se mantiene. Se produce una única vez en el momento exacto de la presión.



keypress() Detecta el evento que ocurre cuando se digita un carácter, 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 pulsación e inmediata liberación 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 teníamos pulsada.

Nota: a través del objeto evento, que reciben las funciones que indiquemos como parámetro de estos métodos, podemos saber qué tecla se está pulsando, aparte de otras muchas informaciones.

EVENTOS COMBINADOS TECLADO-RATÓN 

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 aplicación, 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 aplicación, que puede ocurrir cuando el foco está en ese elemento y pulsamos el tabulador, o nos movemos a otro elemento con el ratón.



focus() Sirve para definir acciones cuando se produce el evento focus de Javascript, cuando el elemento gana el foco de la aplicación

OTROS EVENTOS 

resize() Este evento es lanza cuando se cambia el tamaño de la ventana. Este evento sólo se envía al objeto window.



scroll() Este evento se envía a los elementos que cambian su scroll ante una acción 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 sólo 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 sólo es válido para formularios. Dependiendo del navegador es posible enviar el formulario sin necesidad de pinchar en un botón, simplemente pulsando la tecla ENTER. Cuando esto sucede el evento no se lanza, por lo que tenemos que prestar especial atención 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 más 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 función y la segunda vez que se pincha el elemento (y todas las veces pares) se ejecuta la segunda función:



$(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 página web o se dirige hacia otra parte de la web. Se ejecuta siempre, incluso si el usuario cierra el navegador

jQUERY

13

DEFINIR/ELIMINAR DEFINIR/ELIMINA R EVENTOS: bind/unbind

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

controlador_evento) bind (tipo_evento, controlador_evento) tipo_evento: es el evento que se quiere enlazar con el objeto controlador_evento: controlador_even to: se corresponde con la función 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 método bind y utilizar la variable creada en 1. Al final el código jQUERY quedaría 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", $(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. Asignación de un evento a los elementos de una etiqueta Página Web que muestra una ventana de alerta cuando se pulsa sobre alguno de los párrafos de la misma (< p>) Fichero HTML

<meta charset=utf-8"> <script src="js/jquery-1.5.1.min.js" > <script src="js/fichero3.js" >

PRIMER TÍTULO

Este es el primer párrafo

SEGUNDO TÍTULO

Este es el segundo párrafo

jQUERY

14

Fichero jQUERY: enlaza los párrafos

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. Asignación de una función a varios eventos a la vez Fichero jQUERY: enlaza los párrafos

con varios eventos (click, mouseenter, mouseleave) y un controlador único para todos ellos que hace que el contenido de los párrafos 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", $(this).css("color", "blue"); }; $(document).ready(function(){ $("p").bind("click $("p").bind("click mouseenter mouseleave", 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 $(“elemento”).unbind (); Para eliminar un evento asociado a un elemento $(“elemento”).unbind $(“elemento”).unbind(“evento”); (“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 $(miFormulario.elements).hide(); 

Devuelve "true" si el navegador es alguna versión de Internet Explorer $.browser.msie 

Devuelve "true" si el navegador es alguna versión de Safari $.browser.safari 

jQUERY

15

Añade la clase CSS a todos los elementos o la quita si ya la tenían establecida $("p").toggleClass("seleccionado"); 

MÉTODOS text() Para saber el contenido de un elemento el objeto jQuery cuenta con un método llamado  text(), que se puede utilizar para Modificar el contenido de un elemento $(“#miElemento”).text $(“#miElemento”).text (“párrafo Nuevo”) 

Obtener el contenido de un elemento var contenido=$(“#miElemento”). contenido=$(“#miElemento”).text text() 

Ejemplo La siguiente función jQUERY cambia el texto del párrafo que está en primera posición cuando se pulsa dobleclick  en cualquier párrafo de la Web, además muestra el contenido anterior del párrafo 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 método attr() permite agregar propiedades a un elemento HTML y recuperar el valor de su propiedad. Recuperar el valor de la propiedad $(elemento).attr(nombre_propiedad) 

Dar valor a una propiedad $(elemento).attr(nombre de propiedad,valor) 

Eliminar una propiedad $(elemento).removeAttr(nombre de propiedad) 

Ejemplo 1 Esta página Web cambia el atributo del título del enlace al hacer clic sobre el primer párrafo. Fichero html

jQUERY

16

<meta charset="utf-8"> <script src="js/jquery-1.5.1.min.js" > <script src="js/fichero4_color.js" >

PRIMER TÍTULO

Cambia el título

SEGUNDO TÍTULO

Google

Fichero Jquery

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

Ejemplo 2 La página Web contiene botones que modifican los atributos de borde de la tabla Fichero html

<meta charset="utf-8"> href="css/estilos3.css"> <script src="js/jquery-1.5.1.min.js" > <script src="js/fichero4_attr.js" >

jQUERY

17

1111111111	1111111111	1111111111	1111111111
2222222222	2222222222	2222222222	2222222222
3333333333	3333333333	3333333333	3333333333

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 métodos addClass y removeClass nos permiten asociar y desasociar una clase a un elemento o conjunto de elementos HTML. Añadir una clase CSS a un elemento. $(elemento).addClass ( “nombre  “nombre _clase” ) 

Eliminar una clase CSS de un elemento $(elemento).removeClass(“nombre_clase”) removeClass(“nombre_clase”) 

Ejemplo El siguiente ejemplo muestra dos botones que permiten enlazar y eliminar una clase CSS de un elemento respectivamente. Fichero HTML

<meta charset="utf-8"> href="css/estilos1.css"> <script src="js/jquery-1.5.1.min.js" > <script src="js/fichero4_addClass.js" > jQUERY

18

Ejemplo de cambio de estilos

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 código HTML a partir de un elemento de la página. esta propiedad es básicamente = innerHTML del DOM. Para agregar un bloque HMTL $(elemento).html(bloque_HTML) 

Para obtener el bloque HTML contenido a partir del elemento que hace referencia el objeto jQuery. $(elemento).html() 

Ejemplo Hay un botón para modificar el contenido del formulario y otro para ver su contenido Fichero HTML

<meta charset="utf-8"> href="css/estilos1.css"> <script src="js/jquery-1.5.1.min.js" > <script src="js/fichero4_html.js" src="js/fichero4_html.js" > jQUERY

19


Fichero JavaScript

$(document).ready(inicializarEventos); function inicializarEventos(){ $("#boton1").click( presionBoton1); $("#boton2").click(presionBoton2);} function presionBoton1(){ var x; x=$("#formulario"); x.html("

Ingrese x.html("Ingrese nombre: id='nombre'>
Introduzca
Introduz ca clave:

"); } function presionBoton2(){ $("#formulario"). $("#formulario"). alert (x.html()); }

css()   jQuery también permite añadir nuevas propiedades CSS a los elementos de una forma sencilla utilizando el método siguiente:  “propiedadCSS ” , “valor” ) $(elemento).css ( “

Ejemplos //Añade un ancho a todas las etiquetas p $(“p”).css(“width”,”400px”)

//Asigna el color azul azul a los textos de id indicado $(“#miElemento”).css(“color”,”blue”)

//Añade un borde a todas las listas $(“ul”).css(“border”, “solid 1px “)

//Obtiene el valor de la propiedad "color" de CSS del los párrafos de la página

$("p").css("color"); //Establece varias propiedades CSS de un elemento

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

append / prepend  jQuery nos permite añadir contenido HTML al final de otro ya existente jQUERY

20

$(elemento).append(contenidoHTML) También podemos añadir contenido al principio

$(elemento).prepend (contenidoHTML)

Ejemplos //Añadir un texto y unas etiquetas HTML al elemento con id=”miElemento”. id=”miElemento”. $(“#miElemento”).append $(“#miElemento”).append(“

Nuevo (“

Nuevo contenido de miElemento

”)

//Para añadir un elemento al final de la lista

$("ul").append("

otro item al final

"); //Para añadir un elemento al principio de la lista

$("ul").prepend("

otro item al principio

"); principio");

ITERADOR each   jQuery dispone de un método que nos permite asociar una función que se ejecutará por cada elemento que contenga la lista de elemento. Dentro de esta función podemos manipular el elemento actual. La sintaxis del each es:

$(elementos).each(nombre de función)

Ejemplo Resaltar con fondo amarillo todos los párrafos que tienen menos de 50 caracteres. Fichero HTML

<meta charset="utf-8"> href="css/estilos4.css"/> <script src="js/jquery-1.5.1.min.js" > <script src="js/fichero5_each.js" > 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 pequeños efectos visuales y animaciones que, si se utilizan de forma adecuada, mejoran la interacción con la aplicación y su usabilidad. jQuery incluye de serie los efectos visuales más utilizados por los diseñadores, pudiendo controlar mediante sus opciones la duración de cada efecto.

hide/show | slow/fast   jQuery permite manejar los efectos visuales de un página Web utilizando, entre otros, los métodos hide (ocultar) y show (mostrar). Estos métodos ya los hemos visto, pero en este apartado vamos a ver cómo lograr ocultar y mostrar información a distintas velocidades. Muestra un elemento de forma normal (normal), rápìda ( fast ) o lenta (slow), también se puede indicar los milisegundos de la acción. También es posible indicar una función para que se ejecute al finalizar el efecto visual. show([“fast”/”slow”/“normal”  $(elemento).show([“fast”/”slow”/“normal”   /milisegundos],[function]) Para que se muestre de forma instantánea se omite cualquier parámetro Los parámetros funcionan de forma equivalente con hide (ocultar) hide ([“fast”/”slow”/“normal”  $(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 rápidamente. Fichero HTML

<meta charset="utf-8"> href="css/estilos4.css"/> <script src="js/jquery-1.5.1.min.js" > <script src="js/fichero4_show_hide.js" > /title> jQUERY

22

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  fadein) o se oculte Estos métodos provocan también que un elemento se muestre ( fadein ( fadeout ) pero actúa sobre la transparencia de los objetos.

La sintaxis y los atributos son equivalentes a los métodos show/hide fadeIn([“fast”/”slow”/“normal”/milisegundos],[function]) $(elemento).fadeIn([“fast”/”slow”/“normal”/milisegundos],[function]) jQUERY

23

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

Ejemplo Con el mismo código 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").f $("#descripcion").fadeIn("fast");} adeIn("fast");} El método  fadeTo puede modificar la opacidad de un elemento hasta un valor determinado que se pasa por parámetro. Podemos inicializar este método de las siguientes formas:

fadeTo([velocidad],[valor de opacidad]) Indicamos la velocidad de transición del estado (slow/normal/fast) o un valor indicado en milisegúndos.

actual

al

nuevo

estado

El valor de la opacidad es un número real entre 0 (transparente) y 1(opaco) También podemos llamar al método  fadeTo con tres parámetros:

$(elemento).fadeTo([velocidad],[valor de opacidad],[función]) Esta segunda estructura de la función permite ejecutar una función cuando finaliza la transición. Hay que tener en cuenta que  fadeTo por más que indiquemos el valor 0 en opacidad el espacio que ocupa el elemento en la página seguirá ocupado por un recuadro vacío.

Ejemplo Realizaremos un ejemplo que permitirá reducir y aumentar la opacidad de un cuadro por medio de clic a dos botonesFichero HTML

<meta charset="utf-8"> href="css/estilos4.css"/> <script src="js/jquery-1.5.1.min.js" > <script src="js/fichero4_fadeTo.js" > jQUERY

24

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 método is pasándole como parámetro la función 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 método toggle para alternar la ejecución de dos funciones, pero en este apartado lo veremos para intercambiar la visibilidad de un elemento. El método toggle permite ocultar un elemento si éste está visible y mostrarlo si está oculto. toggle([“fast”/”slow”/“normal”/milisegundos],[function]) $(elemento).toggle([“fast”/”slow”/“normal”/milisegundos],[function])

Ejemplo Veremos el funcionamiento de toogle en una página Web que presenta un botón que muestra/oculta un cuadro, a la vez también cambia el texto del botón según el estado del cuadro. Fichero HTML

jQUERY

25

<meta charset="utf-8"> href="css/estilos4.css"/> <script src="js/jquery-1.5.1.min.js" > <script src="js/fichero4_toggle.js" > 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 método animate permite realizar animaciones personalizadas. Su sintaxis es la siguiente:

$(elemento).animate({propiedades},[duracin],[f_animación],[callback]) Donde: 



 propiedades, es el único parámetro obligatorio y se utiliza para indicar que atributos CSS se quieren actualizar con nuevos valores. JQuery sólo permite el cambio de propiedades CSS que tengan valores numéricos. Por ejemplo podríamos cambiar el tamaño de la letra pero no su fuente. La medida por defecto es la de píxeles. Los nuevos valores se deben indicar de forma absoluta o de forma relativa utilizando la notación “+=nº” p “+=nº”  duración, indica la duración de la animación en milisegundos o un valor identificativo de la velocidad (normal, fast o slow).

jQUERY

26





 función de animación, es una función que contiene las instrucciones que indican cómo se realizará la animación, tiene dos posibles valores swing (por defecto) y linear .  callback, este parámetro permite ejecutar una función cuando finaliza la animación.

Ejemplo Veremos el funcionamiento de animate en una página Web que presenta un botón que realiza la animación de un cuadro de texto. Fichero HTML

<meta charset="utf-8"> href="css/estilos4.css"/> <script src="js/jquery-1.5.1.min.js" > <script src="js/fichero4_animate.js" > Fichero JavaScript

$(document).ready(inicializarEventos); function inicializarEventos(){ $("#boton1").click(hac $("#boton1").click(hacerAnimacion);} erAnimacion);} function hacerAnimacion(){ $("#descripcion"). animate({ 'border-bottom-width': 'border-bottom-width': "20",'font-size': "20",'font-size': '25pt'});} '25pt'});} http://www.w3schools.com/jquery/jquery_effects.asp

PRÁCTICA: MENÚ DESPLEGABLE Fichero HTML

<meta charset="utf-8"> jQUERY

27

ss"/> <script src="../js/jquery-1.5.1.min.js" > <script src="jquery_menuDesplegable.js" > 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: 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: text-decoration: none;} ul li ul a:hover { background-color: #369; color: #fff;} Fichero JavaScript

$(document).ready(function() { $("#menu").children().chil $("#menu").children().children("li").ea dren("li").each(function ch(function () { if ($(this).find("ul").size()!=0 ($(this).find("ul").size()!=0)) $(this).find("ul").hide(); }); $("a").click(function(e) $("a").click(function(e) { if ($(this).parent().find("ul" ($(this).parent().find("ul").size()!=0) ).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 específico. $('#elemento').addClass('clase');

2. Quitar una clase CSS de un elemento específico. $('#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. Añadir HTML a un elemento específico. $('#id-del-elementp').append('codigo HTML aquí');

6. Verificar si existe o no un elemento. if ($('img').length) { log('Se encontraron elementos en la página 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 http://api.jquery.com/toggle/   jQuery API http://www.maestrosdelweb.com/editorial/javascript-facil-y-rapido-con-jquery/  JavaScript fácil y rápido con jQuery http://tecnokun.org/manipulando-el-dom-con-jquery-10-ejemplos-practicos/  Manipulando DOM con jQuery: 10+ejemplos prácticos 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: webs/javascript/jquery/  JQuery: El rincón de un parásito virtual http://www.javascriptya.com.ar/jquery/index.php?inicio=18 jQuery http://www.javascriptya.com.ar/jquery/index.php?inicio=18  jQuery ya!

FUENTES

32