Demo muy simple de uso de jQuery

25 de marzo de 2009 Compartir en redes sociales Valoracin del artculo: 0 votos Enviar un comentario Ver comentarios del artculo (1) Vamos a hacer nuestro primer script en jQuery, con unas funcionalidades muy simples, para que sirva de demo de uso de este framework. Por Miguel Angel Alvarez
Atencin: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.

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. 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 jQuery
Para 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 cdigo <div id="capa" style="padding: 10px; background-color: #ff8800">Haz clic en un botn</div> Luego tenemos dos botones con estos cdigos: <input type="button" value="Botn A" onclick="$('#capa').html('Has hecho clic en el botn <b>A</b>')"> <input type="button" value="Botn B" onclick="$('#capa').html('Recibido un clic en el botn <b>B</b>')"> 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 jQuery
En 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. <div id="capa" style="padding: 10px; background-color: #ff8800;">Pon el ratn encima de esta capa</div> <br> <div id="mensaje" style="display: none;">Has puesto el ratn encima!! <br>(Ahora qutalo de la capa)</div> 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){ $("#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.