====== 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. 


======Qué es jQuery======

Para simplificar, podríamos decir que jQuery es un framework Javascript, pero quizás muchos 
de los lectores se preguntarán qué es un framework. Pues es un producto que sirve como base
para la programación avanzada de aplicaciones, que aporta una serie de funciones o códigos 
para realizar tareas habituales. Por decirlo de otra manera, framework son unas librerías de 
código que contienen procesos o rutinas ya listos para usar. Los programadores utilizan los 
frameworks para no tener que desarrollar ellos mismos las tareas más básicas, puesto que en 
el propio framework ya hay implementaciones que están probadas, funcionan y no se 
necesitan volver a programar. 

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 código 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 más nos puede ayudar, puesto que implementa una serie de clases (de programación 
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 más 
habituales. 

Así pues, este framework Javascript, nos ofrece una infraestructura con la que tendremos 
mucha mayor facilidad para la creación de aplicaciones complejas del lado del cliente. Por 
ejemplo, con jQuery obtendremos ayuda en la creación de interfaces de usuario, efectos 
dinámicos, aplicaciones que hacen uso de Ajax, etc. Cuando programemos Javascript con 
jQuery tendremos a nuestra disposición una interfaz para programación que nos permitirá 
hacer cosas con el navegador que estemos seguros que funcionarán para todos nuestros 
visitantes. Simplemente debemos conocer las librerías del framework y programar utilizando 
las clases, sus propiedades y métodos para la consecución de nuestros objetivos. 
Además, 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 
páginas un script Javascript que contiene el código de jQuery, que podemos descargar de la 
propia página 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 página (si nuestro servidor envía los datos comprimidos, lo que es bastante normal, el peso de jQuery será de unos 19 KB). Además, nuestro servidor lo enviará 
al cliente la primera vez que visite una página del sitio. En siguientes páginas el cliente ya 
tendrá el archivo del framework, por lo que no necesitará transferirlo y lo tomará de la caché. 
Con lo que la carga de la página sólo 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 alternativas======

Es importante comentar que jQuery no es el único framework que existe en el mercado. 
Existen varias soluciones similares que también funcionan muy bien, que básicamente 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 aceptación por parte de los 
programadores muy buena y un grado de penetración en el mercado muy amplio, lo que hace 
suponer que es una de las mejores opciones. Además, es un producto serio, estable, bien 
documentado y con un gran equipo de desarrolladores a cargo de la mejora y actualización del 
framework. Otra cosa muy interesante es la dilatada comunidad de creadores de plugins o 
componentes, lo que hace fácil encontrar soluciones ya creadas en jQuery para implementar 
asuntos como interfaces de usuario, galerías, 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 también posee ventajas similares. 

======Demo muy simple de uso de jQuery======
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. 

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. 

 **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 

  <div id="capa" style="padding: 10px; background-color: #ff8800">Haz clic en un botón</div>

Luego tenemos dos botones con estos códigos: 

  <input type="button" value="Botón A" onclick="$('#capa').html('Has hecho clic en el botón <b>A</b>')">

  <input type="button" value="Botón B" onclick="$('#capa').html('Recibido un clic en el botón     <b>B</b>')">

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. 

Para hacerse una idea exacta de nuestro ejemplo puedes verlo en una ventana aparte. 
En este segundo ejemplo tenemos este código HTML, con las dos capas. 

  <div id="capa" style="padding: 10px; background-color: #ff8800;"> Pon el ratón encima de esta capa</div><br>

  <div id="mensaje" style="display: none;"> Has puesto el ratón encima!! <br>(Ahora quítalo de la capa)</div>
  
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. 

======Pasos para utilizar jQuery en tu página web======

 **1 - Crea una página HTML simple**

Ahora, en el mismo directorio donde has colocado el archivo js, coloca un archivo html con el 
siguiente código. 

   <html>
     <head>
       <script src="jquery-1.3.2.min.js" type="text/javascript"></script>   
       <script>
       </script>
     </head>
   <body>
   <a href="http://www.desarrolloweb.com/">DesarrolloWeb.com</a>
   </body>
   </html> 
   
Como podrás ver, es una página bien simple, en la que tenemos una llamada a un script 
externo llamado jquery-1.3.2.min.js. Este es el código de jQuery que hemos descargado de la 
página del framework. Si has descargado una versión distinta, quizás 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 página. Sólo 
tienes que prestar atención a que tanto el archivo .html de esta página, como el archivo .js del 
framework estén en el mismo directorio. Y, como decía, que el archivo que incluimos con la 
etiqueta SCRIPT sea el .js que nosotros hemos descargado. 

Además, como se puede ver, hemos dejado dentro del HEAD una etiqueta SCRIPT de apertura 
y cierre que está vacía. Todo el código que vamos a explicar a continuación tendrás que 
colocarlo en dentro de esa etiqueta. 

**2 - Ejecutar código cuando la página ha sido cargada**

El paso que vamos a explicar ahora es importante que se entienda, aunque sin lugar a dudas a 
lo largo del manual, lo veremos hasta la saciedad. Se trata de detectar el momento en que la página está lista para recibir comandos Javascript que hacen uso del DOM. 

Cuando hacemos ciertas acciones complejas con Javascript tenemos que estar seguros que la 
página 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 página esté lista para recibir 
instrucciones corremos un alto riesgo de obtener errores de Javascript en la ejecución. 
En el taller de programación con el DOM de Javascript hemos podido explicar que es el DOM y la importancia de realizar acciones sólo 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 página, tenemos que esperar a que la página esté lista para recibir esos comandos. 

Generalmente, cuando se desea ejecutar Javascript después de la carga de la página, si no 
utilizamos ningún framework, lo más normal será utilizar un código como este: 

  window.onload = function () {
   alert("cargado...");
  } 
  
Pero esta sentencia, que carga una funcionalidad en el evento onload del objeto window, sólo 
se ejecutará cuando el navegador haya descargado completamente TODOS los elementos de la página, lo que incluye imágenes, iframes, banners, etc. lo que puede tardar bastante, dependiendo de los elementos que tenga esa página y su peso. 

Pero en realidad no hace falta esperar todo ese tiempo de carga de los elementos de la página 
para poder ejecutar sentencias Javascript que alteren el DOM de la página. Sólo habría que hacerlo cuando el navegador ha recibido el código HTML completo y lo ha procesado al renderizar la página. Para ello, jQuery incluye una manera de hacer acciones justo cuando ya está lista la página, aunque haya elementos que no hayan sido cargados del todo. Esto se hace con la siguiente sentencia. 

   $(document).ready(function(){
      //código a ejecutar cuando el DOM está listo para recibir instrucciones.
   }); 
   
Por dar una explicación a este código, digamos que con $(document) se obtiene una referencia al documento (la página web) que se está cargando. Luego, con el método ready() se define un evento, que se desata al quedar listo el documento para realizar acciones sobre el DOM de la página. 

**3 - Insertar un manejador de evento a la etiqueta A (enlace) que hay en la página**

Ahora que ya sabemos cómo y cuando debemos ejecutar las acciones de jQuery que alteren la funcionalidad, contenidos o aspecto de la página, podemos insertar un poco de código para demostrar el método 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 método click sobre ese elemento y pasarle como parámetro una función con el código que queremos que se ejecute cuando se hace clic. 

   $("a").click(function(evento){
      //aquí el código que se debe ejecutar al hacer clic
   });
   
Como vemos en el código 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 sólo hay un enlace, en realidad nos vale. Luego, el método click() del sobre **$("a")** estamos definiendo un evento, que se ejecutará cuando se haga clic sobre el enlace. Como se puede ver, al método click se le pasa una función donde se debe poner el código Javascript que queremos que se ejecute cuando se haga clic sobre el enlace. 

Ahora veamos la definición del evento clic completa, colocada dentro del evento ready del 
documento, para que se asigne cuando la página está lista. 

   $(document).ready(function(){
      $("a").click(function(evento){
        alert("Has pulsado el enlace...nAhora serás enviado a DesarrolloWeb.com");
     });
   }); 
   
Por líneas, esto es una recapitulación de lo que hemos hecho: 

   $(document).ready(function(){ 

Esta línea sirve para hacer cosas cuando la página está lista para recibir instrucciones jQuery 
que modifiquen el DOM. 

   $("a").click(function(evento){ 

Con esta línea estamos seleccionando todas las etiquetas A del documento y definiendo un 
evento click sobre esos elementos.  

   alert("Has pulsado el enlace...nAhora serás enviado a tusitio.com"); 

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

**4 - Guarda el archivo html y ábrelo en un navegador**

Una vez que tenemos hecho nuestra primera página con jQuery, la puedes guardar y ejecutarla en un navegador. Prueba hacer clic en el enlace y debería salirte la ventana de alerta. 
Puedes ver este script en funcionamiento en una página aparte. 
Ya está hecho y funcionando tu primer script con jQuery! 
Por si acaso quedaron dudas, dejamos aquí el código completo que deberías tener: 
   <html>
   <head>
     <title>Primer script con jQuery</title>
   <script src="jquery-1.3.2.min.js" type="text/javascript"></script>   
   <script>
   $(document).ready(function(){
     $("a").click(function(evento){
       alert("Has pulsado el enlace...nAhora serás enviado a DesarrolloWeb.com");
     });
   });
   </script>
   </head>
   <body>
   <a href="http://www.tusitio.com">Ir a tusitio.com</a>
   </body>
   </html> 
   
**5 - Extra: Bloquear el comportamiento normal de un enlace**

Ahora veamos una pequeña modificación 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 también desde jQuery, añadiendo una llamada al método **preventDefault()** sobre el evento. Si te fijas, la función definida para marcar el 
comportamiento del evento click sobre el enlace recibía un parámetro. Ese parámetro es un 
manejador de evento. Y tiene sus propios métodos y propiedades, como este **preventDefault()**
que comentábamos. 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 ningún sitio, simplemente se ejecutará el código Javascript contenido 
para el evento click.

======Crear la página con una capa, un enlace y la definición de una clase CSS======

El primer paso sería construir una página con todos los elementos que queremos que formen 
parte de este primer ejemplo: la capa DIV, el enlace y la definición de la class CSS. Además, ahora también vamos a incluir el script de jQuery, que lo necesitaremos para acceder a las funciones del framework Javascript. 
   <html>
   <head>
     <title>Añadir y quitar clases CSS a elementos</title>
     <script src="jquery-1.3.2.min.js" type="text/javascript"></script>   
   <style type="text/css">
   .clasecss{
     background-color: #ff8800;
     font-weight: bold;
   }
   </style>
   </head>
   <body>
   <div id="capa">
   
Esta capa es independiente y voy a añadir y eliminar clases css sobre ella

   </div>
   <br>
   <a href="http://www.tusitio.com">Añadir y quitar clase en la capa de arriba</a>
   </body>
   </html> 
   
Perfecto, ahora ya tenemos la infraestructura necesaria para nuestro ejemplo, con todos los integrantes del mismo. Sólo nos faltaría hacer el siguiente paso, que es añadir los comportamientos dinámicos con jQuery. 

=====Recordar: añadir siempre los scripts jQuery cuando el documento está "ready"  =====

Ahora vamos a empezar a meter el código Javascript, pero quiero comenzar por recordar a los lectores que cualquier funcionalidad que queramos agregar a la página por medio de jQuery, debe ser incluida cuando el documento está listo para recibir acciones que modifiquen el DOM de la página. 

Para esto tenemos que incluir siempre el código: 

   $(document).ready(function(){
     //aquí meteremos las instrucciones que modifiquen el DOM
   }); 
   
======Añadir los eventos mouseover y mouseout para añadir y quitar una clase CSS======


En este paso vamos a crear un par de eventos que asociaremos a los enlaces. Este par de eventos serán lanzados cuando el usuario coloque el puntero del ratón sobre el enlace (mouseover) y cuando el usuario retire el ratón del enlace (mouseout). 
Por ejemplo, para definir un evento mouseover se tiene que llamar al método mouseover() sobre el elemento que queremos asociar el evento. Además, al método mouseover() se le envía por parámetro una función con el código que se quiere ejecutar como respuesta a ese evento. 

En el caso de añadir una clase tenemos que utilizar el método addClass(), que se tiene que invocar sobre el elemento al que queremos añadirle la clase. A addClass() tenemos que pasarle una cadena con el nombre de la clase CSS que queremos añadir. Para seleccionar el elemento que queremos añadir la clase hacemos $("#idElemento"), es decir, utilizamos la función dólar pasándole el identificador del elemento que queremos seleccionar, precedida del carácter "#". Por ejemplo, con $("#capa") estamos seleccionando un elemento de la página cuyo id="capa". 

$("a").mouseover(function(event){
   $("#capa").addClass("clasecss");
}); 
De manera análoga, pero con el método mouseout(), definimos el evento para cuando el 
usuario saca el puntero del ratón del enlace. 
$("a").mouseout(function(event){
   $("#capa").removeClass("clasecss");
});