jquery

JavaScript Librería
JQuery


Temario:

1 Que es el jQuery?
2 Nueva manera de programar JavaScript con jQuery.
3 Selección de un elemento del documento mediante el id.
4 Selección de elementos por el tipo de elementos.
5 Selección de elementos utilizando los selectores CSS.
6 Selección de elementos utilizando las clases CSS definidas.
7 Métodos text(), text(valor)8 Métodos attr(nombre de propiedad), attr(nombre de propiedad,valor) y removeAttr(nombre de propiedad)
9 Métodos addClass y removeClass.
10 Métodos html() y html(valor)
11 Administración de eventos con jQuery.
12 Eventos mouseover y mouseout.
13 Evento hover.
14 Evento mousemove.
15 Eventos mousedown y mouseup.
16 Evento dblclick.
17 Evento focus.
18Evento blur.





















1.Que es el jQuery?

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

El sitio oficial de la librería lo puedes acceder desde aquí donde puedes descargar el archivo para tus proyectos, además de poder enterarte de las mejoras constantes que se le hacen.

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

Las aplicaciones en internet son 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 jQuerynos facilitan el desarrollo de la aplicación. Otra ventaja paralela es despreocuparnos 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 60Kb (es el archivo jquery.js) y cuando subamos nuestro sitio es recomendable descargar 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 unconjunto 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 serfrustrante. Lo más adecuado es ir viendo cual es la mecánica de trabajar con dicha librería con problemas 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 lalibrería jQuery:

pagina1.html



Problema


Captura del evento click de un control HTML de 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('se presionó 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);...