jquery 1


SESION 1
INTRODUCCION A jQuery



1 - ¿Que es el jQuery?

El jQuery es una librería de JavaScript para acceder a los objetos del DOM de un modo simplificado.

Del sitio oficial de jQuery podemos descargar estas librerías que nos serviran para está parte del curso.

El autor de esta librería es John Resig que además trabaja para Mozilla Corporation.

Las aplicaciones en internetson cada vez más complejas, ya que incorporan efectos visuales, drag and drop, auto-completar, animaciones etc. el desarrollar todos estos conceptos desde cero puede resultar complicado sobretodo si tenemos que presentar la solución con muy poco tiempo, en este tipo de situaciones el empleo de librerías como el jQuery nos facilitan el desarrollo de la aplicación. Otra ventaja paralela esdespreocuparnos cuando codificamos en la compatibilidad de navegadores, ya que la librería resolverá esto.

Para utilizar la librería como dijimos debemos descargarla del sitio oficial y en cada página que lo requiera agregar:


Del sitio oficial de jQuery descargaremos la versión descomprimida que ocupa alrededor de 60 Kb (es el archivo jquery.js) y cuando subamos nuestro sitio es recomendabledescargar la versión comprimida que tiene un peso de 20 Kb.

La librería jQuery en resumen nos aporta las siguientes ventajas:

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



2 - Nueva manera de programar JavaScript con jQuery.

Cuando uno utiliza una librería debe adaptarse a sus mecanismos de uso, el tratar de llevar los conocimientos que tenemos sobre un tema y aplicarlos a la fuerza en dicha librería puede ser frustrante. Lo más adecuado es ir viendo cual es la mecánica de trabajar con dicha librería conproblemas muy sencillos e ir complicándolo a medida que entendemos su funcionamiento.

Dispongamos el problema trivial de capturar el evento de un control HTML de tipo button, lo desarrollaremos utilizando la metodología tradicional accediendo directamente a las funciones del DOM y luego empleando la librería jQuery:

pagina1.html


Problema



Captura del evento click de un control HTMLde tipo button.
Método tradicional con las funciones
del DOM
Utilizando la librería jQuery



pagina2.html


Problema








funciones1.js
addEvent(window,'load',inicializarEventos,false);

function inicializarEventos()
{
var boton1=document.getElementById('boton1');
addEvent(boton1,'click',presionBoton,false);
}

function presionBoton(e)
{
alert('sepresionó el botón');
}

function addEvent(elemento,nomevento,funcion,captura)
{
if (elemento.attachEvent)
{
elemento.attachEvent('on'+nomevento,funcion);
return true;
}
else
if (elemento.addEventListener)
{
elemento.addEventListener(nomevento,funcion,captura);
return true;
}
else
return false;
}

pagina3.html


ProblemaLo primero que tenemos en cuenta es que debemos importar la librería:


Como se encuentra en la carpeta superior a donde se encuentra el archivo pagina3.html ponemos src="../jquery.js", si estuviera en la misma carpeta disponemos src="jquery.js", es decir directamente el nombre de la librería.

Siempre debemos disponer esta inclusión de la librería antes de incluir los otros archivos*.js que utilizan esta librería, es por eso el orden:




funciones2.js
var x;
x=$(document);
x.ready(inicializarEventos);

function inicializarEventos()
{
var x;
x=$("#boton1");
x.click(presionBoton)
}

function presionBoton()
{
alert("Se presionó el botón");
}

En este archivo (funciones2.js) comienza nuestro estudio de la librería jquery

La función principal...