PDF de programación - Fundamentos de jQuery

Fundamentos de jQuery

Textos originales:
Rebecca Murphey

Traducción, adaptación y textos adicionales:

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

Agosto 2013

Índice general

0.2. Conceptos Básicos de JavaScript

0.1. Bienvenido/a . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
0.1.1. Obtener el Material de Aprendizaje
. . . . . . . . . . . . . . . . . . . . . . . .
0.1.2. Software . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
0.1.3. Añadir JavaScript a una Página . . . . . . . . . . . . . . . . . . . . . . . . . .
0.1.4. Depuración del Código JavaScript
. . . . . . . . . . . . . . . . . . . . . . . . .
0.1.5. Ejercicios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
0.1.6. Convenciones Utilizadas en el Libro . . . . . . . . . . . . . . . . . . . . . . . .
0.1.7. Notas de la Traducción . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
0.1.8. Material de Referencia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
0.2.1.
Introducción . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
0.2.2. Sintaxis Básica . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
0.2.3. Operadores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
0.2.4. Código Condicional
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
0.2.5. Bucles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
0.2.6. Palabras Reservadas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
0.2.7. Vectores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
0.2.8. Objetos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
0.2.9. Funciones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
0.2.10. Determinación del Tipo de Variable
. . . . . . . . . . . . . . . . . . . . . . . .
0.2.11. La palabra clave this . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
0.2.12. Alcance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
0.2.13. Clausuras . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
0.3. Conceptos Básicos de jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
0.3.1. $(document).ready() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
0.3.2. Selección de Elementos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
0.3.3. Trabajar con Selecciones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

4
4
4
4
5
5
6
6
6
7
7
7
7
10
12
15
16
17
17
19
20
22
24
25
25
26
30

1

0.5. Eventos

. . . . . . . . . . . . . . . . . . . . . . . . . . . .
0.3.4. CSS, Estilos, & Dimensiones
0.3.5. Atributos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
0.3.6. Recorrer el DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
0.3.7. Manipulación de Elementos . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
0.3.8. Ejercicios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
0.4. El núcleo de jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
0.4.1. $ vs $() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
0.4.2. Métodos Utilitarios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
0.4.3. Comprobación de Tipos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
0.4.4. El Método Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
0.4.5. Detección de Navegadores y Características . . . . . . . . . . . . . . . . . . . .
0.4.6. Evitar Conflictos con Otras Bibliotecas JavaScript . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
0.5.1.
Introducción . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
0.5.2. Vincular Eventos a Elementos . . . . . . . . . . . . . . . . . . . . . . . . . . . .
0.5.3. El Objeto del Evento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
0.5.4. Ejecución automática de Controladores de Eventos . . . . . . . . . . . . . . . .
0.5.5.
Incrementar el Rendimiento con la Delegación de Eventos . . . . . . . . . . . .
0.5.6. Funciones Auxiliares de Eventos
. . . . . . . . . . . . . . . . . . . . . . . . . .
0.5.7. Ejercicios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
0.6. Efectos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
0.6.1.
Introducción . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
0.6.2. Efectos Incorporados en la Biblioteca . . . . . . . . . . . . . . . . . . . . . . . .
0.6.3. Efectos Personalizados con $.fn.animate . . . . . . . . . . . . . . . . . . . . .
0.6.4. Control de los Efectos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
0.6.5. Ejercicios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
0.7. Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
0.7.1.
Introducción . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
0.7.2. Conceptos Clave . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
0.7.3. Métodos Ajax de jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
0.7.4. Ajax y Formularios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
0.7.5. Trabajar con JSONP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
0.7.6. Eventos Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
0.7.7. Ejercicios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
0.8. Extensiones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

31
33
33
34
38
39
39
40
41
42
43
43
44
44
44
46
47
47
48
49
50
50
50
51
52
53
54
54
54
56
60
60
61
61
62

2

62
62
64
65

0.8.1. ¿Qué es una Extensión? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
0.8.2. Crear una Extensión Básica . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
0.8.3. Encontrar y Evaluar Extensiones . . . . . . . . . . . . . . . . . . . . . . . . . .
0.8.4. Escribir Extensiones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
0.8.5. Escribir Extensiones con Mantenimiento de Estado Utilizando Widget Factory
66
de jQuery UI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
73
0.8.6. Ejercicios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
73
0.9. Mejores Prácticas para Aumentar el Rendimiento . . . . . . . . . . . . . . . . . . . . .
74
0.9.1. Guardar la Longitud en Bucles . . . . . . . . . . . . . . . . . . . . . . . . . . .
74
0.9.2. Añadir Nuevo Contenido por Fuera de un Bucle
. . . . . . . . . . . . . . . . .
74
0.9.3. No Repetirse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
75
0.9.4. Cuidado con las Funciones Anónimas . . . . . . . . . . . . . . . . . . . . . . . .
76
0.9.5. Optimización de Selectores
. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
77
0.9.6. Utilizar la Delegación de Eventos . . . . . . . . . . . . . . . . . . . . . . . . . .
77
0.9.7. Separar Elementos para Trabajar con Ellos
. . . . . . . . . . . . . . . . . . . .
77
0.9.8. Utilizar Estilos en Cascada para Cambios de CSS en Varios Elementos . . . . .
78
0.9.9. Utilizar $.data en Lugar de $.fn.data . . . . . . . . . . . . . . . . . . . . . .
78
0.9.10. No Actuar en Elementos no Existentes . . . . . . . . . . . . . . . . . . . . . . .
78
0.9.11. Definición de Variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
79
0.9.12. Condicionales . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
79
0.9.13. No Tratar a jQuery como si fuera una Caja Negra . . . . . . . . . . . . . . . .
79
0.10. Organización del Código . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
79
0.10.1. Introducción . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
80
0.10.2. Encapsulación . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
85
0.10.3. Gestión de Dependencias
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
88
0.10.4. Ejercicios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
89
0.11. Eventos Personalizados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
89
0.11.1. Introducción a los Eventos Personalizados . . . . . . . . . . . . . . . . . . . . .
98
0.12. Funciones y ejecuciones diferidas a través del objeto $.Deferred . . . . . . . . . . . .
98
0.12.1. Introducción . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
0.12.2. El objeto diferido y Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
98
0.12.3. Creación de objetos diferidos con $.Deferred . . . . . . . . . . . . . . . . . . . 101

3

0.1. Bienvenido/a

jQuery se está convirtiendo rápidamente en una herramienta que todo desarrollador de interfaces web
debería de conocer. El propósito de este libro 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. El libro fue diseñado para ser utilizado como
material en un salón de clases, pero también puede ser útil para estudiarlo de forma individual.
La modalidad de trabajo es la siguiente: En primer lugar se dedicará tiempo a compre