MANUAL DE JQUERY

Manual de JQuery

INDICEIntroduccin a jQuery ....................................................................................... 7Qu es jQuery, para qu sirve y qu ventajas tiene el utilizar este framework Javascript. ........................................... 8 Qu es jQuery ...................................................................................................................................................... 8 Ventajas de jQuery con respecto a otras alternativas ............................................................................................ 9 JQuery, es para mi? ............................................................................................................................................. 9 Demo 1 de jQuery .............................................................................................................................................. 10 Demo 2 de jQuery .............................................................................................................................................. 10 Una descripcin de la puesta en marcha de tu primer script jQuery, en tu propia pgina web, paso a paso. ............... 11 1.- Descarga la ltima versin del framework ..................................................................................................... 11 2.- Crea una pgina HTML simple....................................................................................................................... 12 3.- Ejecutar cdigo cuando la pgina ha sido cargada ......................................................................................... 12 4.- Insertar un manejador de evento a la etiqueta A (enlace) que hay en la pgina ............................................... 13 5.- Guarda el archivo html y brelo en un navegador .......................................................................................... 14 6.- Extra: Bloquear el comportamiento normal de un enlace ............................................................................... 14 Para complicarlo slo un poco ms, vamos a aadir y quitar clases del elemento con respuesta a acciones del usuario, para aprender tambin nuevos eventos de usuario. ................................................................................................ 15 1.- Crear la pgina con una capa, un enlace y la definicin de una clase CSS ........................................................ 15 2.- Recordar: aadir siempre los scripts jQuery cuando el documento est "ready" ............................................... 16 3.- Aadir los eventos mouseover y mouseout para aadir y quitar una clase CSS ................................................ 16 4.- Cdigo completo del ejemplo jQuery.............................................................................................................. 16 Ocultar y mostrar una capa con jQuery .............................................................................................................. 17 Mostrar u ocultar elementos como respuesta a un evento ................................................................................... 18 Ejemplo de efectos e interaccin en jQuery ......................................................................................................... 19 Con callback de jQuery podemos hacer una secuencia de llamadas a funciones o una pila de funciones que se ejecutarn una detrs de otra. ............................................................................................................................... 21 Cmo realizar una pila de ejecucin de funciones ................................................................................................ 22 Ejemplo real de callback con jQuery ................................................................................................................... 22 Es muy fcil desarrollar Ajax en jQuery. En este artculo veremos el ejemplo ms sencillo de Ajax con el framework Javascript jQuery................................................................................................................................................... 23 Traer un contenido con Ajax al pulsar un enlace .................................................................................................. 23 Pasar parmetros y ejecutar acciones despus de la llamada a Ajax .................................................................... 25 Vemos ms posibilidades de Ajax en jQuery, modificando un ejemplo anterior, para crear un mensaje de carga mientras que el usuario espera la respuesta Ajax del servidor. ................................................................................. 26 Por qu un mensaje de carga al hacer Ajax ......................................................................................................... 26 2

Manual de JQuery Preparando el cdigo HTML ............................................................................................................................... 26 Llamada a Ajax con jQuery y el mensaje de carga ............................................................................................... 26 Cdigo de la pgina PHP que se invoca por Ajax ................................................................................................. 28

Core de jQuery ...............................................................................................29El core de jQuery lo forman las funciones ms recurridas y que forman la base sobre la que se asienta el cualquier cosa en este framework Javascript................................................................................................................................. 29 Core de jQuery ................................................................................................................................................... 29 La funcin dlar $()................................................................................................................................................ 30 Funcin jQuery enviando un selector y un contexto ............................................................................................. 30 Usos interesantes de $() ......................................................................................................................................... 32 Funcin jQuery pasando un HTML...................................................................................................................... 32 Funcin jQuery pasando elementos .................................................................................................................... 32 Funcin jQuery pasando una funcin .................................................................................................................. 33 El mtodo each del core de jQuery, para ejecutar una funcin en cada uno de los elementos de un grupo. ................ 34 Cmo funciona each .......................................................................................................................................... 34 Retornando valores en la funcin que enviamos a each ....................................................................................... 36 Dos formas de acceder al nmero de elementos que hay en un objeto jQuery, a travs del mtodo size() y la propiedad length. .................................................................................................................................................................. 36 Mtodo size() del Core de jQuery ........................................................................................................................ 37 Propiedad length del objeto jQuery .................................................................................................................... 37 El mtodo data() del core de jQuery sirve para almacenar informacin en los elementos de la pgina, en pares nombre de variable y valor. Veremos tambin el mtodo removeData() para eliminar datos almacenados............................ 38 Mtodo data() ................................................................................................................................................... 38 Mtodo removeData() ....................................................................................................................................... 39 Ejemplo completo de los mtodos data() y removeData() del Core de jQuery ....................................................... 39 Ahora veremos algunos puntos interesantes y nuevos ejemplos sobre el funcionamiento de los mtodos data() y removeData() de jQuery. ....................................................................................................................................... 41 Datos de tipo objeto asignados por referencia con data() .................................................................................... 43

Selectores de jQuery.......................................................................................46Los selectores sirven para seleccionar elementos de la pgina a partir de una cadena de texto que le pasamos a la funcin jQuery....................................................................................................................................................... 46 Selectores bsicos en jQuery .............................................................................................................................. 46 Conclusin sobre los selectores........................................................................................................................... 47 Ejemplo de pgina que nos permitir hacer prcticas con los selectores de jQuery. .................................................. 47 Cdigo completo del ejemplo de selectores ......................................................................................................... 50

3

Manual de JQuery Selectores que sirven para seleccionar elementos atendiendo a la estructura o jerarqua de las etiquetas de la pgina. ............................................................................................................................................................................. 50 Probando los selectores jQuery de Jerarqua ....................................................................................................... 51

Mtodos de Attributes en jQuery ..................................................................... 53En jQuery existe una funcin llamada attr() que sirve para recuperar y alterar atributos de los elementos de la pgina. ............................................................................................................................................................................. 53 Lectura de un atributo ....................................................................................................................................... 53 Modificar un atributo ......................................................................................................................................... 54 Modificar varios valores de atributos a la vez ...................................................................................................... 54 Un uso adicional del mtodo attr() de jQuery, para modificar atributos con el valor devuelto de una funcin y borrar atributos de elementos de la pgina con removeAttr(). ........................................................................................... 55 Asignar un valor de atributo procesado por una funcin ...................................................................................... 55 Eliminar un atributo de uno o varios elementos con removeAttr() ........................................................................ 56

Mtodos de CSS de jQuery .............................................................................. 57Sin duda css() es uno de los mtodos ms utilizados en el da a da del trabajo con jQuery. Sirve para cambiar y obtener el valor de cualquier atributo css. ............................................................................................................... 57 .css( nombre_propiedad_css ) ............................................................................................................................ 57 .css( nombre_propiedad_css, valor ) ................................................................................................................... 57 Seguimos viendo funciones CSS del framework Javascript jQuery, en este caso las que sirven para conocer el tamao y posicin de los elementos en la pgina................................................................................................................. 58 Funcin que muestra las dimensiones de un elemento......................................................................................... 59 Funcin para mostrar la posicin de un elemento ................................................................................................ 60 Ejemplo completo sobre los mtodos de dimensiones y posicin de elementos ..................................................... 60

Eventos en jQuery ..........................................................................................62Una introduccin al trabajo con eventos en el framework Javascript jQuery. ........................................................... 62 Ejemplo de evento dblclick ................................................................................................................................. 63 1) Eventos relacionados con el ratn................................................................................................................... 64 2) Eventos relacionados con el teclado ............................................................................................................... 65 3) Eventos combinados teclado o ratn .............................................................................................................. 65 Explicaciones iniciales sobre el objeto evento en jQuery y mostramos cmo averiguar la posicin del ratn al producirse un evento en la pgina. ......................................................................................................................... 66 Averiguar la posicin del ratn al hacer clic......................................................................................................... 66 Prctica con eventos de ratn en jQuery, en la que mostraremos el uso de mouseenter y mouseleave, junto con el objeto evento, para averiguar la posicin del ratn. ................................................................................................ 67 Efecto de tip simple en jQuery con los eventos mouseenter y mouseleave ............................................................ 68 Cmo trabajar con eventos de teclado en jQuery y saber qu teclas han pulsado los usuarios, a travs de la propiedad which del objeto evento. ........................................................................................................................................ 70 4

Manual de JQuery Secuencia de eventos de teclado ........................................................................................................................ 70 Averiguar qu tecla fue pulsada ......................................................................................................................... 71 El mtodo bind() sirve para definir eventos de manera genrica, de cualquier tipo. Con el mtodo unbind() podemos eliminar un manejador cualquiera indicado con bind()............................................................................................. 72 Mtodo bind() para definir cualquier tipo de evento ............................................................................................. 73 Eliminar un evento con la funcin unbind() ......................................................................................................... 73 Ejemplos con los mtodos bind() y unbind() de jQuery ......................................................................................... 74 Mtodo live() para definir eventos en jQuery: cmo crear eventos sobre elementos que coincidan con un selector, en el momento actual o en el futuro. .............................................................................................................................. 75 Ejemplo de asignacin de manejador de evento por live() .................................................................................... 75

Desarrollo de plugins en jQuery ....................................................................... 78Veamos qu son los Plugins en jQuery y cmo podemos crearlos para expandir las posibilidades del framework. ...... 78 Qu son los Plugins............................................................................................................................................ 78 Cmo se crea un plugin de jQuery ....................................................................................................................... 79 Para construir plugins en jQuery tenemos que seguir una serie de normas. Adems veremos un nuevo ejemplo prctico sobre el desarrollo de plugins en jQuery. .................................................................................................... 79 Ejemplo de un plugin en jQuery .......................................................................................................................... 80 Segundo ejemplo de plugin prctico en jQuery para hacer textarea que lleva la cuenta de los caracteres escritos por el usuario. ................................................................................................................................................................. 82 Entendamos el plugin textarea con contador de caracteres ................................................................................. 82 Manera de gestionar opciones en los plugins de jQuery, a travs de un objeto de options enviado al invocar el plugin, para hacerlos un poco ms verstiles y con configuracin ms fcil. ........................................................................ 84 Por qu son interesantes los options en plugins................................................................................................... 84 Definir opciones por defecto en el cdigo del plugin ............................................................................................. 85 Invocar al plugin enviando el objeto de opciones ................................................................................................. 85 Concusin sobre la configuracin de plugins con el objeto de opciones ................................................................. 86 Un ejemplo de plugin en jQuery para hacer un sistema de tip ms avanzado, que permite configurarse por medio de unas opciones en el plugin. .................................................................................................................................... 86 Mtodo jQuery.extend() ..................................................................................................................................... 87 Cdigo completo del plugin tip con opciones ....................................................................................................... 87 Invocar al plugin con o sin las opciones de configuracin ..................................................................................... 88 Las funciones en los plugins pueden verse como funciones y variables privadas del plugin, que nos sirven para definir una mejor lgica de programacin y estructura de datos y cdigo. .......................................................................... 88 Esquema de programacin de un plugin ............................................................................................................. 89 Un plugin en jQuery para hacer un campo de formulario checkbox pero con un diseo distinto, totalmente personalizable por el desarrollador. ........................................................................................................................ 90 Personalizacin del plugin por medio de objeto de opciones ................................................................................ 91 5

Manual de JQuery Invocar al plugin checkbox personalizado con jQuery .......................................................................................... 94 Cmo crear un alias personalizado a $, para mejorar la compatibilidad en todos los contextos, y ocultar el cdigo privado de los plugins jQuery. ................................................................................................................................ 95 Conclusin: una envoltura segura y sencilla para tus plugins ............................................................................... 95

Efectos en jQuery ........................................................................................... 97El mtodo animate() de jQuery permite animar varias propiedades, con valores numricos, de CSS en un solo paso. 97 Parmetros del mtodo animate() ...................................................................................................................... 97 Ejemplo jQuery del mtodo animate() ................................................................................................................ 98 Efectos de cambio de opacidad de los elementos en la pgina, con los mtodos de fading en jQuery, fadeIn(), fadeOut() y fadeTo(). ............................................................................................................................................. 99 Ejemplos con efectos de fundido fadeOut() y fadeIn() en jQuery .......................................................................... 99 Ejemplo con fadeTo() ....................................................................................................................................... 100 Enviando funciones callback ............................................................................................................................ 101 Cdigo completo del ejemplo de fading en jQuery ............................................................................................. 101 Vamos a explicar qu es una cola de efectos, para qu nos sirve y cmo se configuran las colas de efectos en el framework Javascript jQuery. .............................................................................................................................. 102 Funciones de efectos........................................................................................................................................ 103 Cola de efectos por defecto .............................................................................................................................. 103 Ejemplo de ejecucin de efectos en la cola predeterminada de jQuery................................................................ 104 Veremos cmo hacer cosas con las colas de efectos en jQuery, haciendo nuestra primera prueba con el mtodo queue(), que permite acceder y modificar la cola de efectos. .................................................................................. 104 Mtodo queue([nombreCola]) .......................................................................................................................... 105 En la cola de efectos podemos introducir cualquier tipo de funcin, aunque no sean efectos jQuery, y para ello vamos a aprender a encolar cualquier conjunto de sentencias con el mtodo queue(). ...................................................... 107 .queue( [ nombreCola ], callback( continua ) ).................................................................................................... 107 Ejemplo jQuery para encolar funciones que no son efectos ................................................................................ 108 Cmo detener la ejecucin de una cola de efectos con el mtodo stop() y revisin del uso de queue() para indicar una nueva lista de funciones de efectos a ejecutar con jQuery. .................................................................................... 109 Mtodo stop([ limpiarCola ], [ saltarAlFinal ]) ................................................................................................... 110 Ejercicio con queue() y stop() ............................................................................................................................ 110 El mtodo delay() de jQuery sirve para generar un intervalo de espera entre la ejecucin de funciones de la cola de efectos. ............................................................................................................................................................... 112 .delay( duracin, [ nombreCola ] ) ..................................................................................................................... 112 Ejemplo completo con efectos y delay() .............................................................................................................113 Vamos a mostrar cmo trabajar con otras colas de efectos distintas que la cola de efectos predeterminada. .......... 114 Ejemplo con una cola de efectos no predeterminada ......................................................................................... 114

6

Manual de JQuery Uno de los mtodos del paquete utilities de jQuery, que sirve para extender el contenido de dos o ms objetos en uno de ellos................................................................................................................................................................ 118 Ejemplo de extend() de jQuery.......................................................................................................................... 118 Anlisis y ejemplos de la funcin $.get() de jQuery que sirve para hacer una solicitud Ajax al servidor en la que podemos enviar datos por el mtodo GET. ........................................................................................................... 119 $.get(URL)....................................................................................................................................................... 119 $.get(URL, funcion) ......................................................................................................................................... 119 $.get(URL, datos, funcion) ............................................................................................................................... 120 $.get(URL, datos, funcion, tipo_dato_respuesta) .............................................................................................. 120 Tratamiento de eventos relacionados con las solicitudes ajax en jQuery desde la funcin $.get(). ........................... 122 Definicin de un evento error de la solicitud Ajax .............................................................................................. 122 Definicin del evento success y complete de las solicitudes Ajax ........................................................................ 123 Ejemplos de solicitud Ajax con diversos eventos, en los que se reciben parmetros con datos y referencias tiles para los scripts jQuery. ................................................................................................................................................ 123 Evento ajax error(jqXHR, estado, excepcin) .................................................................................................... 124 Evento Ajax success(datos, estado, jqXHR) ...................................................................................................... 124 Evento Ajax complete(jqXHR, textStatus) ........................................................................................................ 125

Introduccin a jQuery7

Manual de JQuery

Comenzamos por los captulos ms bsicos sobre jQuery, que sirven para introducirnos en el desarrollo de una manera sencilla. Hablaremos sobre la metodologa de trabajo con el framework Javascript de manera general. Qu es jQuery, para qu sirve y qu ventajas tiene el utilizar este framework Javascript. Bienvenidos al manual sobre jQuery que vamos a publicar en DesarrolloWeb.com, con el que pretendemos clarificar a los usuarios el mtodo de trabajo y programacin de aplicaciones del lado del cliente, compatibles con todos los navegadores ms comunes.

Qu es jQueryPara simplificar, podramos decir que jQuery es un framework Javascript, pero quizs muchos de los lectores se preguntarn qu es un framework. Pues es un producto que sirve como base para la programacin avanzada de aplicaciones, que aporta una serie de funciones o cdigos para realizar tareas habituales. Por decirlo de otra manera, framework son unas libreras de cdigo que contienen procesos o rutinas ya listos para usar. Los programadores utilizan los frameworks para no tener que desarrollar ellos mismos las tareas ms bsicas, puesto que en el propio framework ya hay implementaciones que estn probadas, funcionan y no se necesitan volver a programar.Nota:si no sabes lo que es Javascript seguramente no te interesar este artculo, pero puedes aprenderlo tambin en DesarrolloWeb.com: Qu es Javascript

Por ejemplo, en el caso que nos ocupa, jQuery es un framework para el lenguaje Javascript, luego ser un producto que nos simplificar la vida para programar en este lenguaje. Como probablemente sabremos, cuando un desarrollador tiene que utilizar Javascript, generalmente tiene que preocuparse por hacer scripts compatibles con varios navegadores y para ello tiene que incorporar mucho cdigo que lo nico que hace es detectar el browser del usuario, para hacer una u otra cosa dependiendo de si es Internet Explorer, Firefox, Opera, etc. jQuery es donde ms nos puede ayudar, puesto que implementa una serie de clases (de programacin orientada a objetos) que nos permiten programar sin preocuparnos del navegador con el que nos est visitando el usuario, ya que funcionan de exacta forma en todas las plataformas ms habituales. As pues, este framework Javascript, nos ofrece una infraestructura con la que tendremos mucha mayor facilidad para la creacin de aplicaciones complejas del lado del cliente. Por ejemplo, con jQuery obtendremos ayuda en la creacin de interfaces de usuario, efectos dinmicos, aplicaciones que hacen uso de Ajax, etc. Cuando programemos Javascript con jQuery tendremos a nuestra disposicin una interfaz para programacin que nos permitir hacer cosas con el navegador que estemos seguros que funcionarn para todos nuestros visitantes. Simplemente debemos conocer las libreras del framework y programar utilizando las clases, sus propiedades y mtodos para la consecucin de nuestros objetivos. Adems, todas estas ventajas que sin duda son muy de agradecer, con jQuery las obtenemos de manera gratuita, ya que el framework tiene licencia para uso en cualquier tipo de plataforma, personal o comercial. Para ello simplemente tendremos que incluir en nuestras pginas un script Javascript que contiene el cdigo de jQuery, que podemos descargar de la propia pgina web del producto y comenzar a utilizar el framework. El archivo del framework ocupa unos 56 KB, lo que es bastante razonable y no retrasar mucho la carga de nuestra pgina (si nuestro servidor enva los datos comprimidos, lo que es bastante normal, el peso de jQuery ser de unos 19 KB). Adems, nuestro servidor lo enviar al cliente la primera vez que visite una pgina del sitio. En siguientes pginas el cliente ya tendr el archivo del framework, por lo que8

Manual de JQuery

no necesitar transferirlo y lo tomar de la cach. Con lo que la carga de la pgina slo se ver afectada por el peso de este framework una vez por usuario. Las ventajas a la hora de desarrollo de las aplicaciones, as como las puertas que nos abre jQuery compensan extraordinariamente el peso del paquete.

Ventajas de jQuery con respecto a otras alternativasEs importante comentar que jQuery no es el nico framework que existe en el mercado. Existen varias soluciones similares que tambin funcionan muy bien, que bsicamente nos sirven para hacer lo mismo. Como es normal, cada uno de los frameworks tiene sus ventajas e inconvenientes, pero jQuery es un producto con una aceptacin por parte de los programadores muy buena y un grado de penetracin en el mercado muy amplio, lo que hace suponer que es una de las mejores opciones. Adems, es un producto serio, estable, bien documentado y con un gran equipo de desarrolladores a cargo de la mejora y actualizacin del framework. Otra cosa muy interesante es la dilatada comunidad de creadores de plugins o componentes, lo que hace fcil encontrar soluciones ya creadas en jQuery para implementar asuntos como interfaces de usuario, galeras, votaciones, efectos diversos, etc. Uno de los competidores de jQuery, del que hemos publicado ya en DesarrolloWeb.com un amplio manual para programadores, es Mootools, que tambin posee ventajas similares. Os dejo el enlace al Manual de Mootools, que tambin puede ser interesante, porque seguramente lo tengamos explicado con mayor detalle que jQuery.

JQuery, es para mi?Si ests interesado en enriquecer tu pgina web con componentes de la llamada Web 2.0, como efectos dinmicos, Ajax, interaccin, interfaces de usuario avanzadas, etc., jQuery es una herramienta imprescindible para desarrollar todas estas cosas sin tener que complicarte con los niveles ms bajos del desarrollo, ya que muchas funcionalidades ya estn implementadas, o bien las libreras del framework te permitirn realizar la programacin mucho ms rpida y libre de errores. Ahora bien, todas estas mejoras de la web 2.0, que en un principio puede ser muy atractivas, tambin tienen un coste en tiempo de desarrollo de los proyectos. Sin un framework como jQuery, el tiempo de creacin y depuracin de todos esos componentes dinmicos sera mucho mayor, pero aun as nadie dice que todo sea instalar el sistema y empezar correr. Sin embargo, lo ms complicado de jQuery es aprender a usarlo, igual que pasa con cualquier otro framework Javascript. Requerir del desarrollador habilidades avanzadas de programacin, as como el conocimiento, al menos bsico, de la programacin orientada a objetos. Una vez aprendido las ventajas de utilizarlo compensarn ms que de sobra el esfuerzo. Esperamos que con este Manual de jQuery, que vamos a publicar en DesarrolloWeb.com puedas aprender lo necesario para desarrollar tus propios componentes dinmicos en Javascript con los que enriquecer tus aplicaciones. Por otra parte publicaremos artculos con ejemplos prcticos de JQuery que iremos colocando en nuestro taller de JQuery, para aquellos que ya tengan conocimientos en esta materia. Adems tenemos un Videotutorial de jQuery con una coleccin de vdeos para aprender paso a paso el popular framework Javascript. Podemos conocer jQuery accediendo a la pgina de inicio del framework Javascript: http://jquery.com/ Vamos a hacer nuestro primer script en jQuery, con unas funcionalidades muy simples, para que sirva de demo de uso de este framework. Con objetivo de que los lectores puedan hacerse una rpida idea de las posibilidades de jQuery, escribiendo unas brevsimas lneas de cdigo Javascript, vamos a publicar un par de ejemplos bien simples que nos ilustren, pero sin complicarnos demasiado. Nos servirn para la introduccin a jQuery que estamos publicando en el Manual de jQuery.9

Manual de JQuery

La idea de este artculo no es explicar las funcionalidades que vamos a demostrar, sino ver el poco cdigo que hemos tenido que escribir para realizar unos scripts con dinamismos sencillos. Quizs los scripts en si no digan mucho a un lector poco experimentado, pero los que ya han tenido contacto con los pormenores que hay que seguir para hacer estos efectos, de manera que sean compatibles con todos los navegadores, sabrn que jQuery nos ha simplificado mucho nuestra tarea. As pues, no te preocupes demasiado con los detalles de estos cdigos, que los explicaremos en DesarrolloWeb.com ms adelante con detalle.

Demo 1 de jQueryPara empezar vamos a ver este ejemplo, donde tenemos dos botones y un texto. Al pulsar un botn, cambiaremos el texto y al pulsar el otro pondremos otro texto distinto. Podemos ver el ejemplo en marcha en una pgina aparte. En este ejemplo tenemos una capa que tiene este cdigoHaz clic en un botn

Luego tenemos dos botones con estos cdigos:

Como se puede ver, en los botones hay definidos un par de eventos onclick (uno en cada uno) que ejecutan una instruccin Javascript cuando se hace clic sobre ellos. La instruccin est en Javascript, pero hace uso de algunas herramientas disponibles en jQuery para trabajo con los elementos de la pgina. En este caso, por explicarlo rpidamente, se hace una seleccin del elemento DIV de la capa y luego se ejecuta un mtodo sobre l para cambiar el contenido HTML del elemento.

Demo 2 de jQueryEn este otro ejemplo vamos a ver algo un poquito ms complejo. Bueno, realmente no tiene mucha mayor complejidad, pero estamos utilizando jQuery de una manera un poco distinta, que requiere algo ms de cdigo por nuestra parte. Ahora vamos a tener dos capas en nuestra pgina. Una capa estar siempre visible y otra capa aparecer inicialmente oculta y la vamos a mostrar u ocultar dependiendo de si el usuario coloca el ratn encima de la capa que est siempre visible. Para hacerse una idea exacta de nuestro ejemplo puedes verlo en una ventana aparte. En este segundo ejemplo tenemos este cdigo HTML, con las dos capas.Pon el ratn encima de esta capa
Has puesto el ratn encima!!
(Ahora qutalo de la capa)

Ahora vamos a tener un cdigo Javascript con jQuery que defina los eventos del usuario, para cuando sita el ratn dentro o fuera de la primera capa.$("#capa").mouseenter(function(evento){

10

Manual de JQuery$("#mensaje").css("display", "block"); }); $("#capa").mouseleave(function(evento){ $("#mensaje").css("display", "none"); });

De esta sencilla manera, hemos creado dos eventos en el DIV con id="capa". Adems, hemos definido el cdigo de los eventos por medio de funciones, que se encargarn de mostrar o ocultar la segunda capa con id="mensaje".$("#mensaje").css("display", "block");

Esto nos selecciona la capa con id "mensaje" y con el mtodo css() indicamos que queremos cambiar el atributo "display" al valor "block" de ese elemento.$("#mensaje").css("display", "none");

Esta otra lnea muy similar, simplemente cambia el "display" a "none" para ocultar el elemento. Esperamos que estos dos ejemplos te hayan servido para ver rpidamente algunas cosas que se pueden hacer con jQuery con muy poco esfuerzo y que funcionan en todos los navegadores.

Una descripcin de la puesta en marcha de tu primer script jQuery, en tu propia pgina web, paso a paso.

En este artculo te vamos a explicar cmo comenzar a utilizar jQuery en tus pginas web, paso a paso, para que puedas hacer tu primer script jQuery y as comprender los fundamentos de uso de este framework Javascript. En este punto estara bien que sepas lo que es jQuery, lo que ha sido explicado ya en el Manual de jQuery que venimos publicando en DesarrolloWeb.com. La idea es que puedas ir haciendo t mismo los pasos que vamos a relatar, para que compruebes t mismo lo sencillo que es comenzar a utilizar jQuery. Este artculo sigue el esquema con el que los propios creadores de jQuery ensean a utilizar su producto, as que est directamente inspirado en la documentacin de jQuery.Vdeo: Todo el proceso de creacin de un primer ejemplo con jQuery relatado en este artculo lo hemos grabado en el videotutotial comenzar a programar con jQuery.

1.- Descarga la ltima versin del frameworkAccede a la pgina de jQuery para descargar la ltima versin del framework. En el momento de escribir este artculo la release actual es la 1.3.2, y con la que hemos realizado estos ejemplos. Sin embargo, puede que haya publicado una nueva versin que mejore la actual. Dan dos posibilidades para descargar, una que le llaman PRODUCTION, que es la adecuada para pginas web en produccin, puesto que est minimizada y ocupa menos espacio, con lo que la carga de nuestro sitio ser ms rpida. La otra posibilidad es descargar la versin que llaman DEVELPOMENT, que est con el cdigo sin comprimir, con lo que ocupa ms espacio, pero se podr leer la implementacin de las funciones del framework, que puede ser interesante en etapa de desarrollo, porque podremos bucear en el cdigo de jQuery por si tenemos que entender algn asunto del trabajo con el framework.11

Manual de JQuery

Vers que la descarga es un archivo js que contiene el cdigo completo del framework. Coloca el archivo en una carpeta en tu ordenador para hacer las pruebas.

2.- Crea una pgina HTML simpleAhora, en el mismo directorio donde has colocado el archivo js, coloca un archivo html con el siguiente cdigo. DesarrolloWeb.com

Como podrs ver, es una pgina bien simple, en la que tenemos una llamada a un script externo llamado jquery-1.3.2.min.js. Este es el cdigo de jQuery que hemos descargado de la pgina del framework. Si has descargado una versin distinta, quizs el archivo se llame de otra manera, as que es posible que tengas que editar ese nombre de archivo para colocar el que tengas en el directorio. Con ese script ya hemos incluido todas las funciones de jQuery dentro de nuestra pgina. Slo tienes que prestar atencin a que tanto el archivo .html de esta pgina, como el archivo .js del framework estn en el mismo directorio. Y, como deca, que el archivo que incluimos con la etiqueta SCRIPT sea el .js que nosotros hemos descargado. Adems, como se puede ver, hemos dejado dentro del HEAD una etiqueta SCRIPT de apertura y cierre que est vaca. Todo el cdigo que vamos a explicar a continuacin tendrs que colocarlo en dentro de esa etiqueta.

3.- Ejecutar cdigo cuando la pgina ha sido cargadaEl paso que vamos a explicar ahora es importante que se entienda, aunque sin lugar a dudas a lo largo del manual publicado en DesarrolloWeb.com, lo veremos hasta la saciedad. Se trata de detectar el momento en que la pgina est lista para recibir comandos Javascript que hacen uso del DOM. Cuando hacemos ciertas acciones complejas con Javascript tenemos que estar seguros que la pgina haya terminado de cargar y est lista para recibir comandos Javascript que utilicen la estructura del documento con el objetivo de cambiar cosas, como crear elementos, quitarlos, cambiar sus propiedades, etc. Si no esperamos a que la pgina est lista para recibir instrucciones corremos un alto riesgo de obtener errores de Javascript en la ejecucin. En el taller de programacin con el DOM de Javascript hemos podido explicar que es el DOM y la importancia de realizar acciones slo cuando el DOM est listo. Pero si no queremos entretenernos con la lectura de este texto, sirve con saber que, cuando queremos hacer acciones con Javascript que modifiquen cualquier cosa de la pgina, tenemos que esperar a que la pgina est lista para recibir esos comandos. Generalmente, cuando se desea ejecutar Javascript despus de la carga de la pgina, si no utilizamos ningn framework, lo ms normal ser utilizar un cdigo como este:window.onload = function () { alert("cargado..."); }

12

Manual de JQuery

Pero esta sentencia, que carga una funcionalidad en el evento onload del objeto window, slo se ejecutar cuando el navegador haya descargado completamente TODOS los elementos de la pgina, lo que incluye imgenes, iframes, banners, etc. lo que puede tardar bastante, dependiendo de los elementos que tenga esa pgina y su peso. Pero en realidad no hace falta esperar todo ese tiempo de carga de los elementos de la pgina para poder ejecutar sentencias Javascript que alteren el DOM de la pgina. Slo habra que hacerlo cuando el navegador ha recibido el cdigo HTML completo y lo ha procesado al renderizar la pgina. Para ello, jQuery incluye una manera de hacer acciones justo cuando ya est lista la pgina, aunque haya elementos que no hayan sido cargados del todo. Esto se hace con la siguiente sentencia.$(document).ready(function(){ //cdigo a ejecutar cuando el DOM est listo para recibir instrucciones. });

Por dar una explicacin a este cdigo, digamos que con $(document) se obtiene una referencia al documento (la pgina web) que se est cargando. Luego, con el mtodo ready() se define un evento, que se desata al quedar listo el documento para realizar acciones sobre el DOM de la pgina.

4.- Insertar un manejador de evento a la etiqueta A (enlace) que hay en la pginaAhora que ya sabemos cmo y cuando debemos ejecutar las acciones de jQuery que alteren la funcionalidad, contenidos o aspecto de la pgina, podemos insertar un poco de cdigo para demostrar el mtodo de trabajo con jQuery. Para este primer ejemplo vamos a crear un evento click en el enlace, para mostrar un mensaje cuando se haga clic sobre el link. Para crear un evento click sobre un elemento tenemos que invocar al mtodo click sobre ese elemento y pasarle como parmetro una funcin con el cdigo que queremos que se ejecute cuando se hace clic.$("a").click(function(evento){ //aqu el cdigo que se debe ejecutar al hacer clic });

Como vemos en el cdigo anterior, con $("a") obtenemos una referencia al enlace. Bueno, en realidad con ello estamos estamos seleccionando todas las etiquetas A (enlaces) del documento, pero como slo hay un enlace, en realidad nos vale. Luego, el mtodo click() del sobre $("a") estamos definiendo un evento, que se ejecutar cuando se haga clic sobre el enlace. Como se puede ver, al mtodo click se le pasa una funcin donde se debe poner el cdigo Javascript que queremos que se ejecute cuando se haga clic sobre el enlace. Ahora veamos la definicin del evento clic completa, colocada dentro del evento ready del document, para que se asigne cuando la pgina est lista.$(document).ready(function(){ $("a").click(function(evento){ alert("Has pulsado el enlace...nAhora sers enviado a DesarrolloWeb.com"); }); });

Por lneas, esto es una recapitulacin de lo que hemos hecho:$(document).ready(function(){

Esta lnea sirve para hacer cosas cuando la pgina est lista para recibir instrucciones jQuery que modifiquen el DOM.$("a").click(function(evento){

Con esta lnea estamos seleccionando todas las etiquetas A del documento y definiendo un evento click sobre esos elementos.13

Manual de JQueryalert("Has pulsado el enlace...nAhora sers enviado a DesarrolloWeb.com");

Con esta lnea simplemente mostramos un mensaje de alerta informando al usuario que se ha hecho clic sobre el enlace.

5.- Guarda el archivo html y brelo en un navegadorUna vez que tenemos hecho nuestra primera pgina con jQuery, la puedes guardar y ejecutarla en un navegador. Prueba hacer clic en el enlace y debera salirte la ventana de alerta. Puedes ver este script en funcionamiento en una pgina aparte. Ya est hecho y funcionando tu primer script con jQuery! Por si acaso quedaron dudas, dejamos aqu el cdigo completo que deberas tener: Primer script con jQuery $(document).ready(function(){ $("a").click(function(evento){ alert("Has pulsado el enlace...nAhora sers enviado a DesarrolloWeb.com"); }); }); Ir a DesarrolloWeb.com

6.- Extra: Bloquear el comportamiento normal de un enlaceAhora veamos una pequea modificacin para alterar el comportamiento por defecto de los enlaces. Como sabemos, cuando se pulsa un enlace nos lleva a una URL. Luego al hacer click, primero se ejecuta lo que hayamos colocado en el evento click del enlace y luego el enlace lleva al navegador a una nueva URL. Este comportamiento se puede bloquear tambin desde jQuery, aadiendo una llamada al mtodo preventDefault() sobre el evento. Si te fijas, la funcin definida para marcar el comportamiento del evento click sobre el enlace reciba un parmetro. Ese parmetro es un manejador de evento. Y tiene sus propios mtodos y propiedades, como este preventDefault() que comentbamos. Su uso es el siguiente:$(document).ready(function(){ $("a").click(function(evento){ alert("Has pulsado el enlace, pero vamos a cancelar el evento...nPor tanto, no vamos a llevarte a DesarrolloWeb.com"); evento.preventDefault(); }); });

Como hemos podido ver invocando a evento.preventDefault() lo que conseguimos en este caso es que el link no lleve a ningn sitio, simplemente se ejecutar el cdigo Javascript contenido para el evento click. Otro ejemplo bsico con jQuery, para mostrar cmo se pueden aadir y quitar clases CSS a elementos de la pgina, bajo respuesta de eventos de usuario.

14

Manual de JQuery

Para ir acostumbrndonos al trabajo con el framework Javascript jQuery vamos a seguir haciendo ejemplos simples de funcionamiento, que vamos a explicar en la medida de las posibilidades con lo que hemos conocido hasta ahora en el Manual de jQuery. Claro que estos ejercicios son un poco especiales, dado que sirven para ilustrar el modo de trabajo con jQuery, pero sin explicar todos los detalles relacionados con el uso del framework. Por que de momento lo que queremos es mostrar una introduccin al sistema y mostrar por encima algunas de sus posibilidades. En el futuro publicaremos artculos que irn poco a poco explicando todos los detalles de trabajo con jQuery. En el caso que nos ocupa, queremos demostrar el uso de jQuery para alterar elementos de una pgina web, aadiendo y quitando clases CSS. Esto es bien simple, porque en jQuery los elementos tienen dos clases llamadas addClass() y removeClass(), que sirven justamente para que el elemento que recibe el mtodo se le aplique una clase CSS o se le elimine. As que lo que vamos a aprender, con respecto al artculo anterior -Pasos para utilizar jQuery-, es utilizar esos nuevos mtodos de los elementos. Para complicarlo slo un poco ms, vamos a aadir y quitar clases del elemento con respuesta a acciones del usuario, para aprender tambin nuevos eventos de usuario. En nuestro ejemplo vamos a tener dos elementos. Primero una capa DIV con un texto. Despus tendremos un enlace que estar fuera de la capa DIV. Al situar el usuario el ratn sobre un enlace aadiremos una clase CSS a la capa DIV y al retirar el ratn del enlace eliminaremos la class CSS que habamos aadido antes. Si se desea, para aclarar el caso de nuestro ejemplo, podemos ver el ejercicio en marcha en una pgina aparte.Nota: Se supone que ya hemos ledo el artculo anterior, en el que explicamos paso por paso hacer tu primera pgina con jQuery, pues necesitaremos conocer algunas cosas que ya se han comentado all.

1.- Crear la pgina con una capa, un enlace y la definicin de una clase CSSEl primer paso sera construir una pgina con todos los elementos que queremos que formen parte de este primer ejemplo: la capa DIV, el enlace y la definicin de la class CSS. Adems, ahora tambin vamos a incluir el script de jQuery, que lo necesitaremos para acceder a las funciones del framework Javascript. Aadir y quitar clases CSS a elementos .clasecss{ background-color: #ff8800; font-weight: bold; } Esta capa es independiente y voy a aadir y eliminar clases css sobre ella

Aadir y quitar clase en la capa de arriba

15

Manual de JQuery

Perfecto, ahora ya tenemos la infraestructura necesaria para nuestro ejemplo, con todos los integrantes del mismo. Slo nos faltara hacer el siguiente paso, que es aadir los comportamientos dinmicos con jQuery.

2.- Recordar: aadir siempre los scripts jQuery cuando el documento est "ready"Ahora vamos a empezar a meter el cdigo Javascript, pero quiero comenzar por recordar a los lectores que cualquier funcionalidad que queramos agregar a la pgina por medio de jQuery, debe ser incluida cuando el documento est listo para recibir acciones que modifiquen el DOM de la pgina. Para esto tenemos que incluir siempre el cdigo:$(document).ready(function(){ //aqu meteremos las instrucciones que modifiquen el DOM });

3.- Aadir los eventos mouseover y mouseout para aadir y quitar una clase CSSEn este paso vamos a crear un par de eventos que asociaremos a los enlaces. Este par de eventos sern lanzados cuando el usuario coloque el puntero del ratn sobre el enlace (mouseover) y cuando el usuario retire el ratn del enlace (mouseout). Por ejemplo, para definir un evento mouseover se tiene que llamar al mtodo mouseover() sobre el elemento que queremos asociar el evento. Adems, al mtodo mouseover() se le enva por parmetro una funcin con el cdigo que se quiere ejecutar como respuesta a ese evento. En el caso de aadir una clase tenemos que utilizar el mtodo addClass(), que se tiene que invocar sobre el elemento al que queremos aadirle la clase. A addClass() tenemos que pasarle una cadena con el nombre de la clase CSS que queremos aadir. Para seleccionar el elemento que queremos aadir la clase hacemos $("#idElemento"), es decir, utilizamos la funcin dlar pasndole el identificador del elemento que queremos seleccionar, precedida del carcter "#". Por ejemplo, con $("#capa") estamos seleccionando un elemento de la pgina cuyoid="capa".$("a").mouseover(function(event){ $("#capa").addClass("clasecss"); });

De manera anloga, pero con el mtodo mouseout(), definimos el evento para cuando el usuario saca el puntero del ratn del enlace.$("a").mouseout(function(event){ $("#capa").removeClass("clasecss"); });

4.- Cdigo completo del ejemplo jQueryAhora veamos el cdigo completo de este ejercicio. Aadir y quitar clases CSS a elementos .clasecss{ background-color: #ff8800; font-weight: bold; }

16

Manual de JQuery $(document).ready(function(){ $("a").mouseover(function(event){ $("#capa").addClass("clasecss"); }); $("a").mouseout(function(event){ $("#capa").removeClass("clasecss"); }); }); Esta capa es independiente y voy a aadir y eliminar clases css sobre ella

Aadir y quitar clase en la capa de arriba

Podemos ver el ejemplo desarrollado en el artculo en una pgina aparte. Con el mtodo css() de jQuery podemos aplicar cualquier estilo css a elementos de la pgina. Veremos cmo aplicarlo para mostrar y ocultar elementos de la pgina. Para aprender rpidamente cmo hacer cosas tpicas con jQuery, vamos a explicar cmo mostrar u ocultar elementos de la pgina, cambiando propiedades de las hojas de estilo en cascada. Para que este artculo tenga un poco ms de practicidad, vamos a realizar un ejemplo de formulario donde algunos de los elementos estn escondidos. En ese formulario, al marcar una opcin de un campo checkbox, se mostrarn esos elementos escondidos y al desmarcar esa opcin, se ocultarn. El mtodo que se dispone en jQuery para alterar las hojas de estilo se llama css() y lo podemos invocar sobre elementos de la pgina, a los que queremos cambiar sus propiedades CSS. En principio, para mostrar y ocultar elementos, nos viene bien alterar el atributo "display", poniendo el valor "none" para que no aparezca y "block" para que s lo haga. Lo que deberamos saber para poder entender este ejemplo se puede aprender en el Manual de jQuery que venimos publicando en DesarrolloWeb.com. Aunque como este es un ejemplo bsico, ser suficiente con estudiar el artculo Pasos fundamentales para usar jQuery.

Ocultar y mostrar una capa con jQueryVamos a ver brevemente cmo usar el mencionado mtodo css(). Primero, tendramos que tener un elemento en la pgina, que es el que vamos a mostrar u ocultar. Contenido del elemento...

Para ocultar este elemento, habra que invocar el mtodo css() de la siguiente manera:$("#mielemento").css("display", "none");

Como se puede ver, se accede al elemento con la funcin dlar $() y el selector "#mielemento". Luego al mtodo css() le pasamos el valor "display" y "none", porque queremos alterar a propiedad display y asignarle el valor "none", para ocultar el elemento. Para mostrarlo haramos algo parecido, pero colocando el valor "block" en el atributo CSS "display".17

Manual de JQuery$("#mielemento").css("display", "block");

Nota: el mtodo css() admite otros parmetros. Si slo recibe un parmetro, de tipo string, devuelve el valor CSS asignado a ese parmetro. Tambin podra recibir un slo parmetro, en este caso de con una notacin de objeto con pares llave/valor, y entonces asignara todos esos estilos CSS, especificados por los pares llave/valor en el objeto, al elemento de la pgina donde se haya invocado el mtodo.

Mostrar u ocultar elementos como respuesta a un eventoAhora que ya sabemos cmo realizar un cambio en el atributo display, vamos a ver cmo poner esta instruccin en marcha cuando el usuario realice acciones en la pgina. Recordar que al principio del artculo comentaba que bamos a crear un formulario con una casilla de seleccin (campo checkbox) y que al activar ese campo se mostraran otros contenidos en el formulario. Al desactivarlo, se ocultaran esos contenidos del formulario. Para entender bien lo que deseamos hacer, podemos ver el ejercicio en marcha en una pgina aparte. Lo primero que podemos presentar es el formulario con el que vamos a trabajar. Nombre:
Soy mayor de edad
Dato para mayores de edad:

Como se podr ver, es un formulario como otro cualquiera. Slo que tiene una capa con id="formulariomayores", que contiene los elementos del formulario que queremos mostrar u ocultar al marcar o desmarcar el checkbox. Esa capa estar inicialmente oculta, y para ello hemos colocado el atributo style="display: none;". Podemos fijarnos tambin en el checkbox con id="mayoria_edad", que es el que va servir para marcar si se desea o no ver la parte final del formulario. Ahora hay que hacer cosas cuando se haga clic en el checkbox con id="mayoria_edad". Para ello en deberamos crear un cdigo Javascript y jQuery como este:$(document).ready(function(){ $("#mayoria_edad").click(function(){ //lo que se desee hacer al recibir un clic el checkbox }); });

Como ya hemos comentado, estas lneas sirven para especificar eventos. $(document).ready() se hace para lanzar instrucciones cuando el navegador est preparado para recibirlas y $("#mayoria_edad").click() sirve para realizar acciones cuando se ha hecho clic sobre el elemento con id "mayoria_edad", que es el checkbox del formulario. (Lee el artculo Pasos para trabajar con jQuery para ms informacin sobre este punto). Ahora tenemos que ver las instrucciones que debemos ejecutar como respuesta a ese evento.if ($("#mayoria_edad").attr("checked")){ $("#formulariomayores").css("display", "block"); }else{ $("#formulariomayores").css("display", "none"); }

Bsicamente lo que hacemos es comprobar el estado del atributo "checked" del elemento "#mayoria_edad". Esto se hace con el mtodo attr() indicando como parmetro el valor del atributo18

Manual de JQuery

HTML que queremos comprobar. Entonces, si estaba "checked", se tiene que mostrar el elemento y si no estaba marcado el checkbox, habra que ocultarlo. Espero que se haya entendido bien. Ahora dejo aqu el cdigo completo de este ejemplo: Mostrar Ocultar $(document).ready(function(){ $("#mayoria_edad").click(function(evento){ if ($("#mayoria_edad").attr("checked")){ $("#formulariomayores").css("display", "block"); }else{ $("#formulariomayores").css("display", "none"); } }); }); Nombre:
Soy mayor de edad
Dato para mayores de edad:

Finalmente, podemos verlo en marcha en una pgina aparte. Algunos efectos dinmicos se pueden hacer con jQuery con rapidez impactante y extremadamente poco cdigo Javascript. Una de las ventajas ms destacadas de jQuery es la realizacin de efectos especiales para pginas web, que se desarrollan rpido y con poco cdigo fuente. Estos efectos sirven para aplicar dinamismo a una pgina web y una respuesta atractiva frente la interaccin con el usuario, lo que hace que las pginas programadas con jQuery ofrezcan una imagen puntera. Los efectos con jQuery, al menos un buen puado de ellos, se pueden realizar sin muchas complicaciones, ya que existen unas funciones que simplifican la tarea de los desarrolladores (Ver la librera Effects). En muchos casos conseguir un efecto nos llevar una lnea de cdigo en nuestro programa, como esta:$("#capaefectos").hide("slow");

Con esto conseguimos que el elemento con id="capaefectos" desaparezca de la pgina. Pero adems, el efecto no es un simple fundido del elemento en la pgina (hacerse transparente), sino que tambin va acompaado de una reduccin de tamao progresiva hasta desaparecer. Combinando los efectos con la interaccin de usuario, por medio de eventos, podemos conseguir que los efectos respondan a las acciones del visitante, lo que multiplica las posibilidades, manteniendo la sencillez, elegancia y facilidad de manutencin del cdigo Javascript. Lo vamos a ver en un ejemplo a continuacin.

Ejemplo de efectos e interaccin en jQuery19

Manual de JQuery

En el siguiente ejemplo vamos a mostrar un uso sencillo de las funciones de efectos de jQuery. Vamos a implementar un simple efecto de ocultar y mostrar un elemento de la pgina web. Podemos ver el ejemplo en marcha en una pgina aparte. Como hemos podido ver, vamos a tener una capa y un par de enlaces. Con jQuery haremos que al pulsar los enlaces se oculte y se muestre la capa, con las funciones de la librera Effects. Para comenzar, este es el cdigo HTML del ejemplo, que comprende tanto la capa como los enlaces. Esto es una capa que nos servir para hacer efectos! Ocultar la capa | Mostrar la capa

Ahora viene la parte interesante, que es en la que asociamos eventos a estos dos enlaces y codificamos las llamadas a las funciones de Effects, que harn que se muestre y oculte la capa. El cdigo Javascript, que hace uso de jQuery sera el siguiente:$(document).ready(function(){ $("#ocultar").click(function(event){ event.preventDefault(); $("#capaefectos").hide("slow"); }); $("#mostrar").click(function(event){ event.preventDefault(); $("#capaefectos").show(3000); }); });

Como se puede ver, primero tenemos que definir el evento ready del objeto $(document), para hacer cosas cuando el documento est preparado para recibir acciones. Luego se define el evento click sobre cada uno de los dos enlaces. Para ello invoco el mtodo click sobre el enlace, que hemos seleccionado con jQuery a travs del identificador de la etiqueta A.$("#ocultar").click(function(event){

Con esto estoy definiendo el evento clic sobre el elemento con id="ocultar".Nota: leer el artculo anterior Pasos para utilizar jQuery en tu pgina web, en el que hablbamos sobre eventos y otras generalidades de este framework Javascript. Podremos encontrar explicaciones ms detalladas sobre cmo definir eventos Javascript con jQuery.

Dentro de la funcin a ejecutar cuando se hace clic, se coloca la llamada a la funcin de los efectos.$("#capaefectos").hide("slow");

Esto hace que nuestra capa, a la que habamos puesto el identificador (atributo id) "capaefectos", se oculte. Pasamos el parmetro "slow" porque queremos que el efecto sea lento. Ahora veamos la funcin de los efectos con otra llamada:$("#capaefectos").show(3000);

Esto hace que se muestre el elemento con id "capaefectos", y que el proceso de mostrarse dure 3000 milisegundos.

20

Manual de JQuery

No hay ms complicaciones, as que si habis entendido esto ya sabis hacer efectos simples pero atractivos con jQuery en vuestra pgina web. Ahora podris ver el cdigo completo de este ejemplo creado por DesarrolloWeb.com para demostrar el uso de efectos. Efectos con jQuery $(document).ready(function(){ $("#ocultar").click(function(event){ event.preventDefault(); $("#capaefectos").hide("slow"); }); $("#mostrar").click(function(event){ event.preventDefault(); $("#capaefectos").show(3000); }); }); Esto es una capa que nos servir para hacer efectos!

Pongo este texto simplemente de prueba Ocultar la capa | Mostrar la capa

Por ltimo, pongo el enlace de nuevo al ejemplo en marcha. Como se ha podido comprobar, hacer efectos con jQuery es bastante sencillo. Claro que hay otros detalles importantes y otros tipos de efectos y funcionalidades de personalizacin de los mismos, pero esto nos ha servido para demostrar lo sencillo que es trabajar con este framework Javascript. En siguientes artculos seguiremos explorando casos de uso tpicos de jQuery. Con callback de jQuery podemos hacer una secuencia de llamadas a funciones o una pila de funciones que se ejecutarn una detrs de otra. A menudo cuando hacemos aplicaciones enriquecidas del lado del cliente con jQuery nos vemos en la necesidad de encadenar varias llamadas a funciones, para que una se ejecute detrs de otra, creando un efecto ms elaborado. En este artculo veremos lo sencillo que es realizar lo que en ingls se llama "callback", es decir una funcin que se ejecuta despus de otra. Apilar funciones, para que se ejecuten una detrs de otra, nos servir para hacer muchas cosas. En nuestro da a da con jQuery iremos encontrando la utilidad, pero de momento para explicar un caso en el21

Manual de JQuery

que nos resultar imprescindible, se me ocurre que deseemos hacer una secuencia de efectos y cambios dinmicos en un elemento. Por ejemplo imaginemos que se desea ocultar una capa con un efecto de fundido (de opaco a transparente), luego moverla a otra posicin y volverla a mostrar (ya en la nueva posicin) con otro efecto de fundido (en este caso de transparente a opaco). En principio podramos pensar en hacer un cdigo como este:$("#micapa").fadeOut(2000); $("#micapa").css({top: 300, left:200}); $("#micapa").fadeIn(2000);

En este caso estamos alterando las propiedades de una capa con id="micapa". Primero llamamos a fadeOut() para ocultarla con un fundido, que durar 2 segundos (vase el parmetro 2000, que son los milisegundos que durar el efecto). Luego alteramos la posicin de la capa, cambiando sus atributos CSS. Para acabar la volvemos a mostrar con un fundido de otros 2000 milisegundos.Nota: para poder entender mejor estas llamadas a efectos, por favor, consulta el artculo Efectos Rpidos con jQuery.

Si lanzamos la ejecucin de estas sentencias, tal como aparece en el cdigo, ser como si se ejecutasen todas a la vez. Como los fadeOut y fadeIn tardarn 2 segundos en ejecutarse y los cambios de las propiedades CSS top y left son inmediatos, lo que ocurrir ser que primero veremos la capa moverse a la nueva posicin y luego veremos los dos efectos de fundido. Lo mejor para darse cuenta de este caso es verlo en marcha.

Cmo realizar una pila de ejecucin de funcionesAhora que ya hemos visto uno de los casos en los que necesitaramos ejecutar funciones en una pila, una despus de otra, esperando a que termine completamente la ejecucin de cualquier efecto o accin antes de comenzar con la siguiente. Vamos a ver cmo hacerlo con jQuery. Simplemente tenemos que saber que todas las funciones o mtodos de jQuery pueden recibir un parmetro adicional con el nombre de la funcin que se tiene que ejecutar despus que termine el procesamiento de la primera. Esa segunda funcin que se ejecuta despus de la primera es la que se conoce en ingls por callback. Un ejemplo sencillo para entenderlo.miFuncion ("parametros de la funcin", funcionCallback);

En ese esquema de llamada a miFuncion(), se le estn pasando dos parmetros. El primero sera un supuesto parmetro que necesitase miFuncion() y el segundo, que es le que nos interesa en este caso, el nombre de la funcin que se tiene que ejecutar despus que acabe. Con este cdigo, primero se ejecuta miFuncion() y cuando acaba completamente, se ejecuta funcionCallback(). Pero atencin que este ejemplo lo hemos simplificado para que se pueda entender fcilmente y esta sintaxis slo valdr si funcionCallback no recibe parmetros, porque no los podemos indicar con el nombre de la funcin. Veamos entonces una forma de hacer este callback que funcione siempre:miFuncion ("parametros de la funcion", function(){ funcionCallback(); });

Con este cdigo, que funcionara igual que el anterior, lo bueno es que s podemos indicar los parmetros que se necesiten para la llamada a funcionCallback().

Ejemplo real de callback con jQuery22

Manual de JQuery

Ahora que hemos aprendido toda la teora, veamos un ejemplo prctico que solucionara el problema comentado anteriormente sobre el procesamiento de diversos efectos y cambios en las propiedades de los objetos, para que se hagan siempre en la secuencia que deseamos. Se trata simplemente de aplicar las llamadas con callback que hemos antes.$("#micapa").fadeOut(1000, function(){ $("#micapa").css({'top': 300, 'left':200}); $("#micapa").fadeIn(1000); });

Como se puede ver, en la llamada a fadeOut() estamos pasando como parmetros el valor 1000, que son los milisegundos tiene que durar el efecto fade out (fundido hacia transparente), y luego la funcin callback, que se ejecutar despus de que fadeOut() haya terminado. Como el mtodo css() (se encuentra como primera instruccin de la funcin callback) es instantneo, no necesita hacerse un callback para ejecutar el fadeIn(), sino que se puede escribir directamente en la siguiente lnea de cdigo. As pues, se ve que el callback, al menos en este ejemplo, slo es necesario hacerlo cuando se ejecutan funciones que realizarn un procesamiento prolongado. Podemos ver este ejemplo de callback en una pgina aparte. Hasta aqu, a lo largo de los captulos de este manual de jQuery, hemos ledo la introduccin a este popular framework Javascript, tal como se puede ver en el apartado "How to use jQuery" publicada en la pgina de documentacin. Desde DesarrolloWeb.com hemos enriquecido este tutorial de jQuery aportando nuevos ejemplos y explicaciones adicionales, encaminadas a que cualquier persona, con unos conocimientos bsicos de Javascript, pueda entender y aprender a usar estas libreras de programacin cross-browser. Ahora podemos hacer una pausa en este manual y volveremos pronto con nuevos artculos para explicar otros asuntos sobre la programacin con jQuery. Es muy fcil desarrollar Ajax en jQuery. En este artculo veremos el ejemplo ms sencillo de Ajax con el framework Javascript jQuery. Ha llegado el momento de hacer una primera aproximacin a Ajax. Una de las ventajas de los frameworks Javascript es que nos permiten desarrollar scripts que hacen uso de Ajax de una manera muy fcil y encima, sin tener que complicarnos la vida con la compatibilidad entre distintos navegadores. Sin duda, cualquier persona que sepa un poco de Javascript, podra en poco tiempo empezar a utilizar Ajax con alguno de estos frameworks. Nosotros vamos a demostrar cmo es de sencillo en jQuery. La primera impresin que he tenido sobre el uso de Ajax en jQuery es realmente grata, por la facilidad con la que se puede realizar un primer ejemplo. Se trata de un ejemplo extremadamente sencillo, pero sirve para abrirnos las puertas a muchas aplicaciones interesantes. Habamos visto en otros frameworks Javascript ejemplos similares, como en el artculo Ajax con Mootools, pero tenemos que quitarnos el sombrero ante la extremada sencillez con la que se puede hacer un ejemplo similar en jQuery. Sea suficiente decir que en este ejemplo de Ajax utilizaremos tan slo 4 lneas de cdigo, de las cuales slo 1 es para ejecutar la propia llamada al servidor por Ajax.

Traer un contenido con Ajax al pulsar un enlaceEn este sencillo ejemplo haremos llamada a Ajax, para traer un contenido, cuando se pulse un enlace. Esto lo hemos puesto en marcha en el servidor de DesarrolloWeb.com y lo puedes ver en una pgina aparte. Aqu podemos ver el enlace, al que ponemos un identificador (atributo id) para seleccionarlo desde jQuery.23

Manual de JQueryHaz clic!

Si hemos ledo hasta aqu el Manual de jQuery podremos saber cmo asignar un evento a un enlace. No obstante, recordemos cmo asignar una funcin para cuando se haga clic en el enlace:$(document).ready(function(){ $("#enlaceajax").click(function(evento){ //elimino el comportamiento por defecto del enlace evento.preventDefault(); //Aqu pondra el cdigo de la llamada a Ajax }); })

Ya se trata slo de poner en marcha Ajax dentro de la funcin del evento "click" sobre el enlace. Pero antes voy a necesitar una capa donde mostrar el contenido que vamos a recibir del servidor con la llamada Ajax. Le pondremos id="destino" para poder referirnos a ella desde jQuery: Y ahora la parte ms interesante, donde podemos ver qu tan fciles son las cosas con este framework Javascript. Una nica lnea de cdigo ser suficiente:$("#destino").load("contenido-ajax.html");

Con esta simple sentencia estamos realizando una llamada a Ajax con jQuery. Es una simple invocacin al mtodo load() de un elemento de la pgina, en concreto el que habamos puesto con id="destino". Al mtodo load() le pasamos como parmetro la ruta de la pgina que queremos cargar dentro del elemento. El archivo que cargamos con load() en este ejemplo es "contenido-ajax.html" y simplemente le hemos colocado un texto cualquiera. Lo hemos guardado en el mismo directorio que la pgina web donde est el script jQuery.Nota: para que este ejemplo funcione debe colocarse en un servidor web, puesto que la llamada por Ajax se hace por http y el archivo que se carga entonces tiene que recibirse por un servidor web, que lo mande con ese protocolo al navegador. Si pones los archivos en tu disco duro y los ejecutas tal cual, no te funcionar. Puedes utilizar cualquier espacio de hosting que tengas o bien un servidor web que puedas tener instalado en tu ordenador.

As de simple! Podemos ver el cdigo completo de este ejemplo: Ajax Simple $(document).ready(function(){ $("#enlaceajax").click(function(evento){ evento.preventDefault(); $("#destino").load("contenido-ajax.html"); }); }) Haz clic!

Podemos ver el ejemplo en marcha en una pgina aparte.24

Manual de JQuery

Cabra comentar que jQuery tiene muchos otros mtodos de realizar conexiones por Ajax, que pueden servir para muchos otros casos de trabajo que podemos encontrarnos. Nosotros hemos escogido el ms sencillo para dar una primera demostracin de las posibilidades.

Pasar parmetros y ejecutar acciones despus de la llamada a AjaxEl mtodo load() que hemos visto en el ejemplo anterior tiene otros dos parmetros opcionales que podemos utilizar si fuera necesario: Parmetros a pasar a la pgina: la pgina que carguemos con Ajax puede recibir parmetros por la URL, que se especifican con la tpica notacin de propiedades y valores de jQuery.{nombre: "Pepe", edad: 45}

Por ejemplo, con ese cdigo estaramos enviando a la pgina los datos nombre y edad, con los valores "pepe" y 45. Esos datos viajaran en la URL, por el mtodo "POST".Nota: Desde jQuery 1.3 tambin se pueden enviar los parmetros a la pgina a cargar con Ajax por medio de una variable de tipo string, en lugar de una notacin de objetos como hemos comentado. Cuando se use un string para especificar los parmetros a enviar en el request http, stos viajan por el mtodo GET. Cuando se utiliza una notacin de objetos como la que hemos visto, los datos viajan por el mtodo POST.

Funcin callback: como otros mtodos de jQuery, podemos especificar opcionalmente una funcin a ser ejecutada cuando se termine de ejecutar el mtodo. En este caso, cuando se termine la llamada Ajax, se pueden hacer acciones, como borrar un mensaje tpico de "cargando...".Nota: En un artculo anterior ya comentamos el habitual uso de funciones callback en jQuery.

Ahora veamos un cdigo donde hacemos uso de estos dos parmetros:$(document).ready(function(){ $("#enlaceajax").click(function(evento){ evento.preventDefault(); $("#destino").load("recibe-parametros.php", {nombre: "Pepe", edad: 45}, function(){ alert("recibidos los datos por ajax"); }); }); })

En este caso estamos cargando con load() una pgina PHP llamada "recibe-parametros.php". Estamos pasando los parmetros "nombre" y "edad" a una pgina, que podremos recoger por GET. Adems, hemos colocado una funcin callback en la que simplemente hacemos un alert(), que se ejecutar cuando la llamada a Ajax haya terminado. Este sera el cdigo fuente de "recibe-parametros.php":Recibido el siguiente dato:
Nombre:
Edad:

Podemos ver este ejemplo en una pgina aparte. Con esto hemos podido comprobar lo sencillo que es realizar con jQuery una carga de contenidos que se reciben por Ajax. Como deca, existen muchas otras maneras de hacer conexiones Ajax con jQuery.

25

Manual de JQuery

Vemos ms posibilidades de Ajax en jQuery, modificando un ejemplo anterior, para crear un mensaje de carga mientras que el usuario espera la respuesta Ajax del servidor. Queremos ver algunas cosas tpicas que podramos desear hacer con Ajax en una pgina web, facilitando el proceso de desarrollo con el framework Javascript jQuery. En esta lnea de artculos ya publicamos hace poco un artculo sobre el uso de Ajax en jQuery simplificado. En el mencionado artculo vimos cmo hacer una llamada Ajax con 1 sola lnea de cdigo (el Ajax en si era una lnea de cdigo, aunque se necesitan varias instrucciones ms para asociar las acciones Ajax como respuesta a eventos en la pgina). Una de las cosas que ms habitualmente podramos desear hacer cuando se realiza una llamada Ajax es la creacin de un mensaje de carga, que podemos colocar con un simple texto "cargando..." o con la tpica imagen de Ajax Loader. En este artculo veremos cmo crear ese mensaje de carga al realizar una solicitud Ajax con jQuery. Para los interesados, se puede ver este ejemplo de Ajax en una pgina aparte.

Por qu un mensaje de carga al hacer AjaxCuando hacemos una solicitud por Ajax, los resultados de dicha llamada a veces tardan en llegar. Durante ese tiempo el usuario puede no ver ninguna reaccin por parte del navegador, lo que le puede confundir y pensar que no ha hecho clic correctamente en el enlace o botn. Sera normal en ese caso que el usuario pulse repetidas veces un enlace o un botn de envo de formulario, generando repetidas e innecesarias llamadas al servidor, lo que puede derivar en diversos problemas. As pues, es conveniente mostrar un mensaje de carga para advertir que su solicitud fue realizada y el proceso est en marcha y esperando respuesta del servidor. Vamos a explicar la implementacin de este mensaje de carga, pero siempre teniendo en cuenta que nuestra intencin en este ejemplo es mantener un cdigo pequeo que se pueda entender fcilmente. Aunque queremos remarcar que las cosas se podran hacer de otra manera, algo mejorada, cuando sepamos ms cosas sobre el framework Javascript jQuery y pongamos en marcha algunas prcticas aconsejables de programacin orientada a objetos.

Preparando el cdigo HTMLComo un primer paso, vamos a mostrar el cdigo HTML que tendremos en la pgina que har la solicitud Ajax.Haz clic! Cargando...

Como se puede ver, tenemos tres elementos: 1) el enlace, que activar la llamada a Ajax cuando se haga clic sobre l. 2) una capa con id="cargando" que es donde est el mensaje de carga (nosotros hemos colocado un texto, pero se podra colocar cualquier cosa, como el tpico gif animado que muestra que se est procesando la solicitud (conviene fijarse tambin que esa capa cargando est oculta de momento, gracias al atributo de estilo CSS display:none). 3) la capa "destino", donde mostraremos la respuesta recibida tras la solicitud Ajax.

Llamada a Ajax con jQuery y el mensaje de cargaEn este punto vamos a describir cmo se tendra que hacer la llamada al servidor con Ajax, pero lo cierto es que este proceso ya lo explicamos con detalle anteriormente, por lo que os refiero al artculo Uso26

Manual de JQuery

de Ajax muy sencillo con jQuery, donde encontraris unas explicaciones que voy a dar por sabidas en este caso. Lo que explicar en este artculo es cmo se tiene que mostrar el mensaje de carga cuando se inicia la llamada y como eliminarlo una vez hemos recibido la respuesta por Ajax. Otra cosa que el lector deber conocer para poder entender este ejemplo es Mostrar y ocultar elementos de la pgina con jQuery.$(document).ready(function(){ $("#enlaceajax").click(function(evento){ evento.preventDefault(); $("#cargando").css("display", "inline"); $("#destino").load("pagina-lenta.php", function(){ $("#cargando").css("display", "none"); }); }); })

Voy comentando lnea a lnea el cdigo anterior. En la primera lnea se est especificando un mtodo ready() sobre el objeto document, que sirve para generar un cdigo a ser ejecutado cuando la pgina est lista para recibir instrucciones Javascript que trabajen con el DOM. En la segunda lnea se accede al elemento con identificador "enlaceajax" (es decir, el enlace que activar el Ajax) para definir un evento "click". En la siguiente lnea se ejecuta el mtodo preventDefault() sobre el evento producido al hacer clic sobre el enlace. Esto se hace para anular el comportamiento tpico del enlace. Ahora viene la parte en la que se mostrar el mensaje de carga:$("#cargando").css("display", "inline");

Simplemente se muestra la capa con id="cargando", con un simple cambio en el atributo CSS display de la capa. Ese cambio de atributo lo hacemos con el mtodo css() sobre el elemento que queremos alterar, tal como se vio en el artculo Mostrar y ocultar elementos de la pgina con jQuery. Ahora, con la siguiente lnea de cdigo:$("#destino").load("pagina-lenta.php", function(){

Se hace la llamada Ajax, con el mtodo load() sobre la capa que queremos actualizar con el contenido trado por Ajax, que es la capa con id="destino". Este mtodo recibe la URL de la pgina a cargar y una funcin callback, que se ejecutar despus que el mtodo load() se haya terminado de procesar, esto es, despus de que la solicitud Ajax se haya recibido y se haya mostrado su contenido en la capa que recibe el mtodo. Entonces, en esa funcin callback, tenemos que ocultar la capa con el mensaje de carga, puesto que cuando se ejecute esta funcin ya se habr realizado todo el procesamiento Ajax. Eso lo conseguimos con el mtodo css(), alterando la propiedad display, de manera similar a como lo habamos realizado para mostrar la capa cargando.$("#cargando").css("display", "none");

Esto es todo. Realmente no tiene ninguna complicacin especial. Aunque, como deca, estas cosas se podrn hacer de una manera ms elegante cuando aprendamos un poquito ms sobre jQuery. Por si sirve para aclarar las cosas, dejo a continuacin el cdigo completo de la pgina que hace la solicitud con jQuery: Ajax Simple $(document).ready(function(){ $("#enlaceajax").click(function(evento){

27

Manual de JQueryevento.preventDefault(); $("#cargando").css("display", "inline"); $("#destino").load("pagina-lenta.php", function(){ $("#cargando").css("display", "none"); }); }); }) Esto es un Ajax con un mensaje de cargando...

Haz clic! Cargando...

Cdigo de la pgina PHP que se invoca por AjaxEl cdigo de la pgina PHP que traemos por ajax "pagina-lenta.php" es el siguiente:

En realidad no tiene nada en especial. Simplemente hacemos un sleep(3) para ordenarle a PHP que espere 3 segundos antes de terminar de procesar la pgina y enviarla al cliente. As consigo que la solicitud http tarde un poco es ser respondida y podamos ver el mensaje de carga durante un poco ms de tiempo en la pgina. Finalmente, pongo de nuevo el enlace para ver este ejercicio en marcha. Si te ha interesado este ejemplo y quieres obtener una ayuda adicional para crear tus propios scripts en Ajax, te recomendamos ver el vdeo donde explicamos a hacer Ajax con jQuery.

28

Manual de JQuery

Core de jQueryEmpezamos a adentrarnos en el framework Javascript para conocer los detalles de este sistema, comenzando con el ncleo de jQuery: el core, que contiene los mtodos ms esenciales. El core de jQuery lo forman las funciones ms recurridas y que forman la base sobre la que se asienta el cualquier cosa en este framework Javascript. Las personas con un nivel medio-alto de Javascript y de programacin orientada a objetos, con lo que hemos visto hasta el momento en el manual y la referencia del API jQuery, podrn con relativa facilidad adentrarse en caractersticas avanzadas del framework, pero para los dems y los que deseen una ayuda adicional, esperamos que este capitulo y los siguientes puedan abrir un camino, sencillo de seguir, para aprender a hacer todo tipo de desarrollos con Javascript y jQuery. Comencemos pues por el inicio, tal como est en la documentacin del sistema, tratando en primer caso el "Core". De todos modos, cabe decir que lo que hemos podido ver en el capitulo anterior de este Manual de jQuery, nos va a venir muy bien para poder entender todo lo que viene a continuacin y sobre todo, poder poner en marcha ejemplos un poco ms elaborados.

Core de jQueryEl core de jQuery es la base sobre la que se trabaja para hacer cualquier cosa con jQuery. Contiene una serie de clases y mtodos tiles para hacer tareas reiterativas, que vamos a necesitar en las aplicaciones. Integra desde funciones que sern tiles en cualquier script, por sencillo que sea, hasta funciones menos recurridas pero que nos facilitarn la vida a hora de hacer cdigo limpio, corto y reutilizable. Utilizaremos el Core para realizar cosas tiles con objetos, clases, datos, etc, pero realmente lo que ms haremos ser utilizar la funcin jQuery, que es el pilar fundamental sobre el que se basarn las aplicaciones. Core tiene las funciones clasificadas en diversos apartados: $() (La funcion jQuery): Es la funcin principal de jQuery, que adems tiene diversas utilidades segn los parmetros que se le enven. Su utilidad principal es obtener elementos de la pgina. Accesorios de objetos: Es una gama de funciones de diversa y variada utilidad, que sirven de utilidad para hacer cosas con objetos, tales como iterar con cada uno de sus elementos, saber su tamao, longitud, el selector o contexto con el que se obtuvo, obtener todos sus elementos DOM que contenga, etc. Trabajo con datos: Unas funciones tiles para trabajar con datos y asociarlos a elementos, una forma de guardar informacin adicional a elementos de la pgina. Tambin tiene diversas funciones para trabajar con colas y administrar la salida y entrada de sus elementos. Plugins: Funciones que permiten extender los elementos jQuery para incorporar nuevos mtodos, algo que se utiliza habitualmente a la hora de crear plugins para aadir funcionalidades a jQuery. Interoperabilidad: Funciones que permiten que jQuery no tenga problemas de compatibilidad con otras libreras Javascript que tambin suelen utilizar la funcin dlar $().29

Manual de JQuery Nota: En el momento de escribir este manual estamos en la release 1.3.2, en la que se han publicado como novedad un par de mtodos, de los clasificados en accesorios de objetos. Como debemos saber, de vez en cuando actualizan las libreras para incorporar nuevos mtodos.

La funcin dlar $(). Con el objetivo de seguir tratando el Core de jQuery, del que ya empezamos a hablar en este Manual de jQuery, vamos a explicar la funcin jQuery, tambin conocida como $(). El funcionamiento del Core de jQuery se basa en esta funcin. Como dicen en la propia documentacin del framework, "Todo en jQuery est basado en esta funcin o la usa de alguna forma". La funcin jQuery sirve para hacer varias cosas, segn los parmetros que le pasemos. El uso ms simple es seleccionar elementos o grupos de elementos de una pgina web, pero tambin sirve para crear elementos sobre la marcha o para hacer un callback de funciones. En realidad esta funcin se invoca tambin con el smbolo dlar $(), lo que sera una manera resumida de utilizarla y que nos ahorrar bastantes caracteres en el cdigo y a la postre, tiempo de descarga y peso de los scripts de la pgina. Veamos los distintos usos de esta funcin, segn los parmetros que reciba.

Funcin jQuery enviando un selector y un contextoEste uso de la funcin sirve para seleccionar elementos de la pgina. Recibe una expresin y se encarga de seleccionar todos los elementos de la pgina que corresponden con ella, devolviendo un objeto jQuery donde se encuentran todos los elementos de la pgina seleccionados y extendidos con las funcionalidades del framework. Adicionalmente, podemos pasarle un contexto de manera opcional. Si no se le enva un contexto, selecciona elementos del documento completo, si indicamos un contexto conseguiremos seleccionar elementos slo dentro de ese contexto. La expresin que debemos enviar obligatoriamente como primer parmetro sirve de selector. En ese parmetro tenemos que utilizar una una notacin especial para poder seleccionar elementos de diversas maneras y la verdad es que las posibilidades de seleccin con jQuery son muy grandes, como veremos en el tema de "Selectores". Este paso de seleccin de elementos es bsico en cualquier script jQuery, para poder actuar en cualquier lugar de la pgina y hacer nuestros efectos y utilidades Javascript sobre el lugar que deseemos. Veamos un uso de esta funcin:var elem1 = $("#elem1");

Con esta lnea de cdigo habremos seleccionado un elemento de la pgina que tiene el identificador (atributo id del elemento HTML) "elem1" y lo hemos guardado en una nueva variable llamada elem1. La variable elem1 guardar entonces lo que se llama el objeto jQuery con el cual podremos trabajar, solicitando mtodos o funciones de dicho objeto, para trabajar con el elemento seleccionado.Nota: Como hemos dicho, $() es un resumen o forma corta de invocar la funcin jQuery. Tambin podramos haber escrito la lnea de esta manera: var elem1 = jQuery("#elem1");

Luego, podramos hacer cualquier cosa con ese elemento seleccionado, como lo siguiente:elem1.css("background-color", "#ff9999");

30

Manual de JQuery

Este mtodo css() no forma parte del core, pero sirve para cambiar atributos CSS de un