PDF de programación - Manual de JQuery

Manual de jQuery

http://desarrolloweb.com/manuales/manual-jquery.html

Página 1 de 200

Manual de jQuery

Introducción: Manual de jQuery

Esta es la portada del Manual de jQuery, un completo compendio de artículos que te explican
con detalle y paso a paso la popular librería Javascript.

jQuery es uno de los complementos más esenciales para el desarrollo web, usado en millones
de sitios en toda la web, ya que nos facilita mucho el desarrollo de aplicaciones enriquecidas
del lado del cliente, en Javascript, compatibles con todos los navegadores.

Para los que se inician, conviene aclarar que jQuery no es un lenguaje, sino una serie de
funciones y métodos de Javascript. Por tanto, Javascript es el lenguaje y jQuery es una librería
que podemos usar opcionalmente si queremos facilitar nuestra vida cuando programamos en
Javascript. A veces nos podemos referir a jQuery como framework o incluso como un API de
funciones, útiles en la mayoría de proyectos web.

Antes de llegar jQuery los desarrolladores estábamos obligados a discriminar entre los diversos
navegadores, para ejecutar aquel código Javascript que funcionaba en cada browser. Con la
llegada de jQuery la principal ventaja es que ya no necesitamos preocuparnos sobre si el
navegador del usuario es Explorer, Chrome, Firefox, etc. sino que la propia librería hará el
trabajo "sucio" por nosotros y ejecutará el código que sea compatible con el software del cliente
que está accediendo a nuestra web. Para ello usaremos las funciones que jQuery nos
proporciona, dentro de un grandísimo abanico de funcionalidades que además se extiende por
medio de miles de plugins que ofrece la comunidad para implementar cualquier tipo de
comportamiento.

Para aprender jQuery necesitas saber Javascript. No requiere ser un gran maestro en el
lenguaje, pero al menos sí trabajar con él con cierta soltura. Date cuenta que cuando
programas con jQuery en realidad estás programando con Javascript, por ello es importante
que no intentes empezar la casa por el tejado y primero aprendas el lenguaje "padre". En
DesarrolloWeb.com encontrarás varios manuales de Javascript.

En el presente manual te acercamos todas, o la mayoría de, las funcionalidades que están
presentes en el "core" de jQuery. Aprenderás cosas tan variadas como modificar
dinámicamente los estilos de la página, manipular el DOM, realizar efectos vistosos, trabajar
con Ajax, crear tus propios plugins y un largo etc. Tenemos además otros manuales que te
explican asuntos más concretos como las jQueryUI.

Esperamos que lo disfrutes y si te gusta lo compartas en tu blog o en redes sociales con tus
amigos.

Encuentras este manual online en:
http://desarrolloweb.com/manuales/manual-jquery.html

http://desarrolloweb.com/manuales/manual-jquery.html

Página 2 de 200

Manual de jQuery

Autores del manual

Las siguientes personas han participado como autores escribiendo artículos de este manual.

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de
formación online EscuelaIT. Comenzó en el mundo del desarrollo web
en el año 1997, transformando su hobby en su trabajo.

http://desarrolloweb.com/manuales/manual-jquery.html

Página 3 de 200

Manual de jQuery

Introducción a jQuery

Comenzamos por los capítulos más básicos sobre jQuery, que sirven para introducirnos en el
desarrollo de una manera sencilla. Hablaremos sobre la metodología de trabajo con el
framework Javascript de manera general.

Introducción a jQuery

Qué es jQuery, para qué sirve y qué ventajas tiene el utilizar este framework
Javascript.

Bienvenidos al manual sobre jQuery que vamos a publicar en DesarrolloWeb.com, 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.

Nota:si no sabes lo que es Javascript seguramente no te interesará este artículo, pero
puedes aprenderlo también en DesarrolloWeb.com: Qué es Javascript

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.

http://desarrolloweb.com/manuales/manual-jquery.html

Página 4 de 200

Manual de jQuery

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. Os
dejo el enlace al Manual de Mootools, que también puede ser interesante, porque seguramente
lo tengamos explicado con mayor detalle que jQuery.

jQuery, es para mi?

Si estás interesado en enriquecer tu página web con componentes de la llamada Web 2.0, como
efectos dinámicos, Ajax, interacción, interfaces de usuario avanzadas, etc., jQuery es una
herramienta imprescindible para desarrollar todas estas cosas sin tener que complicarte con
los niveles más bajos del desarrollo, ya que muchas funcionalidades ya están implementadas, o

http://desarrolloweb.com/manuales/manual-jquery.html

Página 5 de 200

Manual de jQuery

bien las librerías del framework te permitirán realizar la programación mucho más rápida y
libre de errores.

Ahora bien, todas estas mejoras de la web 2.0, que en un principio puede ser muy atractivas,
también tienen un coste en tiempo de desarrollo de los proyectos. Sin un framework como
jQuery, el tiempo de creación y depuración de todos esos componentes dinámicos sería mucho
mayor, pero aun así nadie dice que todo sea instalar el sistema y empezar correr. Sin embargo,
lo más complicado de jQuery es aprender a usarlo, igual que pasa con cualquier otro
framework Javascript. Requerirá del desarrollador habilidades avanzadas de programación,
así como el conocimiento, al menos básico, de la programación orientada a objetos. Una vez
aprendido las ventajas de utilizarlo compensarán más que de sobra el esfuerzo. Esperamos que
con este Manual de jQ