Manual jQuery & jQueryUI

INSTITUTO TECNOLOGICO DE CHIHUAHUA II

March 14, 2012

Elaborado por: •Isaa Ojeda Qui ta a
•Ma ia a Ma tí ez Al eida
Tabla de contenido
1. Introducción ................................................................................................................................ 4
1.1 Software a Utilizar ..................................................................................................................... 4
1.1.1 Descargar jQuery y jQueryUI .............................................................................................. 4
1.2 Añadir JavaScript a una Página.................................................................................................. 4
2. Introducción a jQuery.................................................................................................................. 6
2.1 Objetos en JavaScript ................................................................................................................ 6
2.2 Conceptos Básicos de jQuery .................................................................................................... 7
2.2.1 $(document).ready() .......................................................................................................... 7
2.2.2 Selección de Elementos...................................................................................................... 7
2.2.3 Guardar Selecciones ........................................................................................................... 8
2.2.4 Obtenedores (Getters) & Establecedores (Setters) ........................................................... 9
2.3 Ejemplo practico........................................................................................................................ 9
3. Eventos .......................................................................................................................................... 14
3.1 Introducción ............................................................................................................................ 14
3.2 Vincular Eventos a Elementos ................................................................................................. 14
4. Efectos ....................................................................................................................................... 15
4.1 Introducción ...................................................................................................................... 15
4.2 Efectos Incorporados en la Biblioteca ..................................................................................... 15
4.2.1 Cambiar la Duración de los Efectos .................................................................................. 15
4.2.1.1 Realizar una Acción Cuando un Efecto fue Ejecutado................................................... 16
4.3 Efectos Personalizados con $.fn.animate................................................................................ 16
4.4 Control de los Efectos.............................................................................................................. 16
4.5 Ejemplo practico (Eventos & Efectos) ..................................................................................... 17
5. jQuery User Interface ................................................................................................................ 21
5.1 Introducción ............................................................................................................................ 21
5.1.1 Librería y estilos de página ............................................................................................... 21
5.2 Módulos de jQuery UI ............................................................................................................. 22
5.2.1 Interacciones .................................................................................................................... 22
5.2.2 Widgets ............................................................................................................................ 22
5.3 Efectos ................................................................................................................................. 31
6 jQuery Plugins ................................................................................................................................ 32
 6.1 Step Carousel........................................................................................................................... 32
6.1.1 Estructura HTML............................................................................................................... 32
6.1.2 CSS .................................................................................................................................... 33
6.1.3 Configuración del Plugin................................................................................................... 34
6. Gale ía fotog áfi a o Glisse .............................................................................................. 36
6.2.1 Esctructura HTML ............................................................................................................. 37
6.2.2 CSS .................................................................................................................................... 37
6.2.3 Configuración ................................................................................................................... 38
Trabajos citados ................................................................................................................................ 40
 1. Introducción
jQuery es una biblioteca de JavaScript que permite simplificar la manera de interactuar con los
documentos HTML, manipular el árbol DOM, manejar eventos, desarrollar animaciones y agregar
interacción con la técnica AJAX a páginas web.

jQuery se está convirtiendo rápidamente en una herramienta que todo desarrollador de

interfaces web debería de conocer. El propósito de este manual es proveer un resumen de la
biblioteca, de tal forma que para cuando lo haya terminado de leer, será capaz de realizar tareas
básicas utilizando jQuery y tendrá una sólida base para continuar el aprendizaje.

1.1 Software a Utilizar

Para trabajar con el contenido de este manual necesitara varias de las siguientes herramientas:

 Un navegador web actualizado

 Un editor de textos planos(como Notepad++,Komodo,etc)
 Las bibliotecas jQuery y jQueryUI

1.1.1 Descargar jQuery y jQueryUI

Podemos visitar la página oficial de jQuery para obtener la versión más actual y estable:
http://docs.jquery.com/Downloading_jQuery y http://jqueryui.com/download. En este último nos
da la opción de seleccionar o crear un tema para jQueryUI, nos mostrara ejemplos de
componentes de jQuery UI y seleccionaremos el que necesitemos.

1.2 Añadir JavaScript a una Página

Una vez descargado jQuery y el plugin jQueryUI debemos agregarlo a nuestra página web. Existen
dos formas de insertar código JavaScript dentro de una pagina: escribiendo código en la misma o a
través de un archivo externo utilizando la etiqueta script.
  
Esta es una muestra, haga clic en el enlace de descarga para obtener el tutorial completo