Jquery

Introducción a jQuery Bienvenidos al manual sobre jQuery, con el que pretendemos clarificar a los usuarios el método de trabajo y programación de aplicaciones del lado del cliente, compatibles con todos los navegadores más comunes.

Ejemplo Simple

Con objetivo de que los lectores puedan hacerse una rápida idea de las posibilidades de jQuery, escribiendo unas brevísimas líneas de código Javascript, vamos a publicar un par de ejemplos bien simples que nos ilustren, pero sin complicarnos demasiado. Nos servirán para la introducción a jQuery que estamos publicando en el Manual de jQuery.
La idea de este artículo no es explicar las funcionalidades que vamos a demostrar, sino ver el poco código que hemos tenido que escribir para realizar unos scripts con dinamismos sencillos. Quizás 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, sabrán que jQuery nos ha simplificado mucho nuestra tarea.

Así pues, no te preocupes demasiado con los detalles de estos códigos, que los explicaremos en DesarrolloWeb.com más adelante con detalle.

Demo 1 de jQuery

Para empezar vamos a ver este ejemplo, donde tenemos dos botones y un texto. Al pulsar un botón, cambiaremos el texto y al pulsar el otro pondremos otro texto distinto.
Podemos ver el ejemplo en marcha en una página aparte.

En este ejemplo tenemos una capa que tiene este código

Haz clic en un botón

Luego tenemos dos botones con estos códigos:

Como se puede ver, en los botones hay definidos un par de eventos onclick (uno en cada uno) que ejecutan una instrucción Javascript cuando se hace clic sobre ellos. La instrucción está en Javascript, pero hace uso de algunas herramientas disponibles en jQuery para trabajo con los elementos de la página. En este caso, por explicarlo rápidamente, se hace una selección del elemento DIV de la capa y luego se ejecuta un método sobre él para cambiar el contenido HTML del elemento.

Demo 2 de jQuery

En este otro ejemplo vamos a ver algo un poquito más complejo. Bueno, realmente no tiene mucha mayor complejidad, pero estamos utilizando jQuery de una manera un poco distinta, que requiere algo más de código por nuestra parte. Ahora vamos a tener dos capas en nuestra página. 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 ratón encima de la capa que está siempre visible.

En este segundo ejemplo tenemos este código HTML, con las dos capas.

Pon el ratón encima de esta capa




Has puesto el ratón encima!! 
(Ahora quítalo de la capa)

Ahora vamos a tener un código Javascript con jQuery que defina los eventos del usuario, para cuando sitúa el ratón 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". Además, hemos definido el código de los eventos por medio de funciones, que se encargarán 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 método css() indicamos que queremos cambiar el atributo "display" al valor "block" de ese elemento.

$("#mensaje").css("display", "none");

Esta otra línea muy similar, simplemente cambia el "display" a "none" para ocultar el elemento.

Esperamos que estos dos ejemplos te hayan servido para ver rápidamente algunas cosas que se pueden hacer con jQuery con muy poco esfuerzo y que funcionan en todos los navegadores.

Indice

Introducción al HTML »