Manual JQuery & JQueryUI De

User Manual:

Open the PDF directly: View PDF PDF.
Page Count: 41

DownloadManual JQuery & JQueryUI Manual-de-jquery
Open PDF In BrowserView PDF
Manual jQuery & jQueryUI

INSTITUTO TECNOLOGICO DE CHIHUAHUA II
March 14, 2012
Elaborado por: •Isaac Ojeda Quintana
•Mariana Martínez Almeida

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.2 Galería fotográfica con “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.

Dentro de esta etiqueta podemos empezar a escribir código JavaScript, la segunda opción es
usando la misma etiqueta pero nuestro código JavaScript ira dentro de un archivo de texto plano
con extensión “.js”.

Dentro del atributo ‘src’ debe de ir la ruta donde se encuentra en este caso el archivo con
extensión .js .Y así es como agregamos la biblioteca jQuery a nuestra página web, y en la etiqueta
de abajo estaremos casi listos para comenzar a escribir código JavaScript utilizando jQuery

.

2. Introducción a jQuery
jQuery se encuentra escrito en JavaScript, un lenguaje de programación muy rico y expresivo. El
manual está orientado a personas con conocimientos básicos en este lenguaje así que no se
tomaran temas referentes a JavaScript, pero si usted esta interesado en aprender el lenguaje más
en profundidad, puede leer el libro JavaScript: The Good Parts escrito por Douglas Crockford.

2.1 Objetos en JavaScript
Los objetos son elementos que pueden contener cero o más conjuntos de pares de nombres
claves y valores asociados a dicho objeto. Los nombres claves pueden ser cualquier palabra o
número válido. El valor puede ser cualquier tipo de valor: un número, una cadena, un arreglo, una
función, incluso otro objeto.
[Definición: Cuando uno de los valores de un objeto es una función, ésta es nombrada como un
método del objeto.] De lo contrario, se les llama propiedades.
Curiosamente, en JavaScript, casi todo es un objeto — arreglos, funciones, números, incluso
cadenas — y todos poseen propiedades y métodos.
Creación de un “objeto literal”

2.2 Conceptos Básicos de jQuery
2.2.1 $(document).ready()
No es posible interactuar de forma segura con el contenido de una página hasta que el documento
no se encuentre preparado para su manipulación. jQuery permite detectar dicho estado a través
de la declaración $(document).ready() de forma tal que el bloque se ejecutará sólo una vez que la
página este disponible.
El bloque $(document).ready()

Existe una forma abreviada para $(document).ready() la cual podrá encontrar algunas veces; sin
embargo, es recomendable no utilizarla en caso que este escribiendo código para gente que no
conoce jQuery.
Forma abreviada para $(document).ready()

Además es posible pasarle a $(document).ready() una función nombrada en lugar de una anónima:
Pasar una función nombrada en lugar de una función anónima

2.2.2 Selección de Elementos
El concepto más básico de jQuery es el de “seleccionar algunos elementos y realizar acciones con
ellos”. La biblioteca soporta gran parte de los selectores CSS3 y varios más no estandarizados. En
http://api.jquery.com/category/selectors/ se puede encontrar una completa referencia sobre los
selectores de la biblioteca.
A continuación se muestran algunas técnicas comunes para la selección de elementos:

Selección de elementos en base a su ID

Selección de elementos en base al nombre de clase

Selección de elementos por su atributo

Selección de elementos en forma de selector CSS

Pseudo-selectores

2.2.3 Guardar Selecciones
Cada vez que se hace una selección, una gran cantidad de código es ejecutado. jQuery no guarda
el resultado por si solo, por lo tanto, si va a realizar una selección que luego se hará de nuevo,
deberá guardar la selección en una variable.
Guardar selecciones en una variable

Una vez que la selección es guardada en la variable, se la puede utilizar en conjunto con los
métodos de jQuery y el resultado será igual que utilizando la selección original.

2.2.4 Obtenedores (Getters) & Establecedores (Setters)
jQuery “sobrecarga” sus métodos, en otras palabras, el método para establecer un valor posee el
mismo nombre que el método para obtener un valor. Cuando un método es utilizado para
establecer un valor, es llamado método establecedor (en inglés setter). En cambio, cuando un
método es utilizado para obtener (o leer) un valor, es llamado obtenedor (en inglés getter).
El método $.fn.html utilizado como establecedor

$('h1').html('hello world');

El método html utilizado como obtenedor

$('h1').html();

2.3 Ejemplo practico
Vamos a hacer un ejemplo sencillo de selecciones de objetos y verificar que realmente obtuvimos
un elemento HTML con jQuery.
Tendremos una pagina muy simple:

A simple vista ya podemos reconocer donde estamos agregando la biblioteca jQuery y en donde
podemos empezar a escribir código JavaScript. Lo que haremos es obtener el valor del 
que tiene la clase “miClase” y al
con el id “miId” le daremos un contenido que queramos (sustituyendo el contenido actual). Dentro de la etiqueta

Navigation menu