PDF de programación - Fundamentos de jQuery

Fundamentos de jQuery

Textos originales:
Rebecca Murphey

Traducción y adaptación a español:

Leandro D’Onofrio

Gustavo Raúl Aragón, Pablo Maronna, Denis Ciccale y otras personas

Correcciones:

Con contribuciones de James Padolsey, Paul Irish y otros.

Bajo licencia Creative Commons

Septiembre 2011

Índice general

1. Bienvenido/a

1.1. Obtener el Material de Aprendizaje . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
1.2. Software . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
1.3. Añadir JavaScript a una Página . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
1.4. Depuración del Código JavaScript
. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
1.5. Ejercicios
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
1.6. Convenciones Utilizadas en el Libro . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
1.7. Notas de la Traducción . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
1.8. Material de Referencia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

2. Conceptos Básicos de JavaScript

2.1.
Introducción . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.2. Sintaxis Básica . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.3. Operadores
2.3.1. Operadores Básicos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.3.2. Operaciones con Números y Cadenas de Caracteres . . . . . . . . . . . . . . . .
2.3.3. Operadores Lógicos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.3.4. Operadores de Comparación . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.4. Código Condicional . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.4.1. Elementos Verdaderos y Falsos . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.4.2. Variables Condicionales Utilizando el Operador Ternario . . . . . . . . . . . . .
2.4.3. Declaración Switch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.5. Bucles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.5.1. Bucles Utilizando For
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.5.2. Bucles Utilizando While . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.5.3. Bucles Utilizando Do-while . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.5.4. Break y Continue . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

2
2
2
3
3
4
4
4
5

6
6
6
7
7
7
8
8
9
9
10
10
11
12
12
13
13

1

2.6. Palabras Reservadas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.7. Arreglos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.8. Objetos
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.9. Funciones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.9.1. Utilización de Funciones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.9.2. Funciones Anónimas Autoejecutables . . . . . . . . . . . . . . . . . . . . . . . .
2.9.3. Funciones como Argumentos
. . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.10. Determinación del Tipo de Variable
. . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.11. La palabra clave this . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.12. Alcance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.13. Clausuras . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

3. Conceptos Básicos de jQuery

3.1. $(document).ready() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
3.2. Selección de Elementos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
3.2.1. Comprobar Selecciones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
3.2.2. Guardar Selecciones
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
3.2.3. Refinamiento y Filtrado de Selecciones . . . . . . . . . . . . . . . . . . . . . . .
3.2.4. Selección de Elementos de un Formulario . . . . . . . . . . . . . . . . . . . . .
3.3. Trabajar con Selecciones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
3.3.1. Encadenamiento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
3.3.2. Obtenedores (Getters) & Establecedores (Setters) . . . . . . . . . . . . . . . . .
3.4. CSS, Estilos, & Dimensiones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
3.4.1. Utilizar Clases para Aplicar Estilos CSS . . . . . . . . . . . . . . . . . . . . . .
3.4.2. Dimensiones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
3.5. Atributos
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
3.6. Recorrer el DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
3.7. Manipulación de Elementos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
3.7.1. Obtener y Establecer Información en Elementos . . . . . . . . . . . . . . . . . .
3.7.2. Mover, Copiar y Remover Elementos . . . . . . . . . . . . . . . . . . . . . . . .
3.7.3. Crear Nuevos Elementos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
3.7.4. Manipulación de Atributos
. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
3.8.1. Selecciones
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
3.8.2. Recorrer el DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
3.8.3. Manipulación . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

3.8. Ejercicios

14
16
17
17
18
18
19
19
20
22
24

26
26
27
29
29
30
30
31
31
32
32
33
33
33
34
35
35
36
37
38
39
39
39
39

2

4. El núcleo de jQuery

4.1. $ vs $() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
4.2. Métodos Utilitarios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
4.3. Comprobación de Tipos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
4.4. El Método Data
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
4.5. Detección de Navegadores y Características . . . . . . . . . . . . . . . . . . . . . . . .
4.6. Evitar Conflictos con Otras Bibliotecas JavaScript
. . . . . . . . . . . . . . . . . . . .

5. Eventos

5.1.
Introducción . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
5.2. Vincular Eventos a Elementos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
5.2.1. Vincular Eventos para Ejecutar una vez . . . . . . . . . . . . . . . . . . . . . .
5.2.2. Desvincular Eventos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
5.2.3. Espacios de Nombres para Eventos . . . . . . . . . . . . . . . . . . . . . . . . .
5.2.4. Vinculación de Múltiples Eventos . . . . . . . . . . . . . . . . . . . . . . . . . .
5.3. El Objeto del Evento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
5.4. Ejecución automática de Controladores de Eventos . . . . . . . . . . . . . . . . . . . .
Incrementar el Rendimiento con la Delegación de Eventos . . . . . . . . . . . . . . . .
5.5.
5.5.1. Desvincular Eventos Delegados . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
5.6.1. $.fn.hover . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
5.6.2. $.fn.toggle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
5.7.1. Crear una “Sugerencia” para una Caja de Ingreso de Texto . . . . . . . . . . .
5.7.2. Añadir una Navegación por Pestañas . . . . . . . . . . . . . . . . . . . . . . . .

5.6. Funciones Auxiliares de Eventos

5.7. Ejercicios

6. Efectos

6.1.
Introducción . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
6.2. Efectos Incorporados en la Biblioteca . . . . . . . . . . . . . . . . . . . . . . . . . . . .
6.2.1. Cambiar la Duración de los Efectos . . . . . . . . . . . . . . . . . . . . . . . . .
6.2.2. Realizar una Acción Cuando un Efecto fue Ejecutado . . . . . . . . . . . . . .
6.3. Efectos Personalizados con $.fn.animate . . . . . . . . . . . . . . . . . . . . . . . . .
6.3.1. Easing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
6.5.1. Mostrar Texto Oculto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
6.5.2. Crear un Menú Desplegable . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
6.5.3. Crear un Slideshow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

6.4. Control de los Efectos
6.5. Ejercicios

3

41
41
41
43
43
44
44

46
46
46
47
47
47
48
48
49
49
50
50
50
51
51
51
51

53
53
53
54
54
55
55
56
56
56
56
57

7. Ajax

7.1.
Introducción . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
7.2. Conceptos Clave . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
7.2.1. GET vs. POST . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
7.2.2. Tipos de Datos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
7.2.3. Asincronismo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
7.2.4. Políticas de Mismo Origen y JSONP . .