Gratuito PDF: Fundamentos de jQuery
Fundamentos de jQuery
1. Bienvenido/a
1.1. Obtener el Material de Aprendizaje . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.2. Software . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.3. Añadir JavaScript a una Página . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.4. Depuración del Código JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.5. Ejercicios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.6. Convenciones Utilizadas en el Libro . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.7. Notas de la Traducción . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.8. Material de Referencia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
2. Conceptos Básicos de JavaScript 6
2.1. Introducción . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
2.2. Sintaxis Básica . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
2.3. Operadores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
2.3.1. Operadores Básicos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
2.3.2. Operaciones con Números y Cadenas de Caracteres . . . . . . . . . . . . . . . . 7
2.3.3. Operadores Lógicos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
2.3.4. Operadores de Comparación . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
2.4. Código Condicional . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
2.4.1. Elementos Verdaderos y Falsos . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
2.4.2. Variables Condicionales Utilizando el Operador Ternario . . . . . . . . . . . . . 10
2.4.3. Declaración Switch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
2.5. Bucles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
2.5.1. Bucles Utilizando For . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
2.5.2. Bucles Utilizando While . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
2.5.3. Bucles Utilizando Do-while . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
2.5.4. Break y Continue . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
1
2.6. Palabras Reservadas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
2.7. Arreglos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
2.8. Objetos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
2.9. Funciones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
2.9.1. Utilización de Funciones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
2.9.2. Funciones Anónimas Autoejecutables . . . . . . . . . . . . . . . . . . . . . . . . 18
2.9.3. Funciones como Argumentos . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
2.10. Determinación del Tipo de Variable . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
2.11. La palabra clave this . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
2.12. Alcance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
2.13. Clausuras . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
3. Conceptos Básicos de jQuery 26
3.1. $(document).ready() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
3.2. Selección de Elementos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
3.2.1. Comprobar Selecciones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
3.2.2. Guardar Selecciones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
3.2.3. Refinamiento y Filtrado de Selecciones . . . . . . . . . . . . . . . . . . . . . . . 30
3.2.4. Selección de Elementos de un Formulario . . . . . . . . . . . . . . . . . . . . . 30
3.3. Trabajar con Selecciones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
3.3.1. Encadenamiento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
3.3.2. Obtenedores (Getters) & Establecedores (Setters) . . . . . . . . . . . . . . . . . 32
3.4. CSS, Estilos, & Dimensiones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
3.4.1. Utilizar Clases para Aplicar Estilos CSS . . . . . . . . . . . . . . . . . . . . . . 33
3.4.2. Dimensiones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
3.5. Atributos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
3.6. Recorrer el DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
3.7. Manipulación de Elementos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
3.7.1. Obtener y Establecer Información en Elementos . . . . . . . . . . . . . . . . . . 35
3.7.2. Mover, Copiar y Remover Elementos . . . . . . . . . . . . . . . . . . . . . . . . 36
3.7.3. Crear Nuevos Elementos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
3.7.4. Manipulación de Atributos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
3.8. Ejercicios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
3.8.1. Selecciones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
3.8.2. Recorrer el DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
3.8.3. Manipulación . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
2
4. El núcleo de jQuery 41
4.1. $ vs $() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
4.2. Métodos Utilitarios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
4.3. Comprobación de Tipos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
4.4. El Método Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
4.5. Detección de Navegadores y Características . . . . . . . . . . . . . . . . . . . . . . . . 44
4.6. Evitar Conflictos con Otras Bibliotecas JavaScript . . . . . . . . . . . . . . . . . . . . 44
5. Eventos 46
5.1. Introducción . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
5.2. Vincular Eventos a Elementos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
5.2.1. Vincular Eventos para Ejecutar una vez . . . . . . . . . . . . . . . . . . . . . . 47
5.2.2. Desvincular Eventos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
5.2.3. Espacios de Nombres para Eventos . . . . . . . . . . . . . . . . . . . . . . . . . 47
5.2.4. Vinculación de Múltiples Eventos . . . . . . . . . . . . . . . . . . . . . . . . . . 48
5.3. El Objeto del Evento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
5.4. Ejecución automática de Controladores de Eventos . . . . . . . . . . . . . . . . . . . . 49
5.5. Incrementar el Rendimiento con la Delegación de Eventos . . . . . . . . . . . . . . . . 49
5.5.1. Desvincular Eventos Delegados . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
5.6. Funciones Auxiliares de Eventos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
5.6.1. $.fn.hover . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
5.6.2. $.fn.toggle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
5.7. Ejercicios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
5.7.1. Crear una “Sugerencia” para una Caja de Ingreso de Texto . . . . . . . . . . . 51
5.7.2. Añadir una Navegación por Pestañas . . . . . . . . . . . . . . . . . . . . . . . . 51
6. Efectos 53
6.1. Introducción . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
6.2. Efectos Incorporados en la Biblioteca . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
6.2.1. Cambiar la Duración de los Efectos . . . . . . . . . . . . . . . . . . . . . . . . . 54
6.2.2. Realizar una Acción Cuando un Efecto fue Ejecutado . . . . . . . . . . . . . . 54
6.3. Efectos Personalizados con $.fn.animate . . . . . . . . . . . . . . . . . . . . . . . . . 55
6.3.1. Easing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
6.4. Control de los Efectos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
6.5. Ejercicios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
6.5.1. Mostrar Texto Oculto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
6.5.2. Crear un Menú Desplegable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
6.5.3. Crear un Slideshow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
3
7. Ajax 58
7.1. Introducción . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
7.2. Conceptos Clave . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
7.2.1. GET vs. POST . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
7.2.2. Tipos de Datos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
7.2.3. Asincronismo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
7.2.4. Políticas de Mismo Origen y JSONP . . . . . . . . . . . . . . . . . . . . . . . . 60
7.2.5. Ajax y Firebug . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
7.3. Métodos Ajax de jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
7.3.1. $.ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
7.3.2. Métodos Convenientes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
7.3.3. $.fn.load . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
7.4. Ajax y Formularios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
7.5. Trabajar con JSONP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
7.6. Eventos Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
7.7. Ejercicios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
7.7.1. Cargar Contenido Externo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
7.7.2. Cargar Contenido Utilizando JSON . . . . . . . . . . . . . . . . . . . . . . . . 66
8. Extensiones 67
8.1. ¿Qué es una Extensión? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
8.2. Crear una Extensión Básica . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
8.3. Encontrar y Evaluar Extensiones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
8.4. Escribir Extensiones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
8.5. Escribir Extensiones con Mantenimiento de Estado Utilizando Widget Factory de
jQuery UI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
8.5.1. Añadir Métodos a un Widget . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
8.5.2. Trabajar con las Opciones del Widget . . . . . . . . . . . . . . . . . . . . . . . 74
8.5.3. Añadir Funciones de Devolución de Llamada . . . . . . . . . . . . . . . . . . . 75
8.5.4. Limpieza . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
8.5.5. Conclusión . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
8.6. Ejercicios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
8.6.1. Realizar una Tabla Ordenable . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
8.6.2. Escribir una Extensión Para Cambiar el Color de Fondo en Tablas . . . . . . . 78
4
9. Mejores Prácticas para Aumentar el Rendimiento 79
9.1. Guardar la Longitud en Bucles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
9.2. Añadir Nuevo Contenido por Fuera de un Bucle . . . . . . . . . . . . . . . . . . . . . . 79
9.3. No Repetirse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
9.4. Cuidado con las Funciones Anónimas . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
9.5. Optimización de Selectores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
9.5.1. Selectores basados en ID . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
9.5.2. Especificidad . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
9.5.3. Evitar el Selector Universal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
9.6. Utilizar la Delegación de Eventos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
9.7. Separar Elementos para Trabajar con Ellos . . . . . . . . . . . . . . . . . . . . . . . . 83
9.8. Utilizar Estilos en Cascada para Cambios de CSS en Varios Elementos . . . . . . . . . 83
9.9. Utilizar $.data en Lugar de $.fn.data . . . . . . . . . . . . . . . . . . . . . . . . . . 83
9.10. No Actuar en Elementos no Existentes . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
9.11. Definición de Variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
9.12. Condicionales . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
9.13. No Tratar a jQuery como si fuera una Caja Negra . . . . . . . . . . . . . . . . . . . . 85
10.Organización del Código 86
10.1. Introducción . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
10.1.1. Conceptos Clave . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
10.2. Encapsulación . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
10.2.1. El Objeto Literal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87
10.2.2. El Patrón Modular . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89
10.3. Gestión de Dependencias . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
10.3.1. Obtener RequireJS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92
10.3.2. Utilizar RequireJS con jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . 92
10.3.3. Crear Módulos Reusables con RequireJS . . . . . . . . . . . . . . . . . . . . . . 93
10.3.4. Optimizar el Código con las Herramientas de RequireJS . . . . . . . . . . . . . 94
10.4. Ejercicios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95
10.4.1. Crear un Módulo Portlet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95
11.Eventos Personalizados 97
11.1. Introducción a los Eventos Personalizados . . . . . . . . . . . . . . . . . . . . . . . . . 97
11.1.1. Un Ejemplo de Aplicación . . . . . .
1. Bienvenido/a
1.1. Obtener el Material de Aprendizaje . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.2. Software . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.3. Añadir JavaScript a una Página . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.4. Depuración del Código JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.5. Ejercicios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.6. Convenciones Utilizadas en el Libro . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.7. Notas de la Traducción . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.8. Material de Referencia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
2. Conceptos Básicos de JavaScript 6
2.1. Introducción . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
2.2. Sintaxis Básica . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
2.3. Operadores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
2.3.1. Operadores Básicos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
2.3.2. Operaciones con Números y Cadenas de Caracteres . . . . . . . . . . . . . . . . 7
2.3.3. Operadores Lógicos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
2.3.4. Operadores de Comparación . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
2.4. Código Condicional . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
2.4.1. Elementos Verdaderos y Falsos . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
2.4.2. Variables Condicionales Utilizando el Operador Ternario . . . . . . . . . . . . . 10
2.4.3. Declaración Switch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
2.5. Bucles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
2.5.1. Bucles Utilizando For . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
2.5.2. Bucles Utilizando While . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
2.5.3. Bucles Utilizando Do-while . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
2.5.4. Break y Continue . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
1
2.6. Palabras Reservadas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
2.7. Arreglos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
2.8. Objetos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
2.9. Funciones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
2.9.1. Utilización de Funciones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
2.9.2. Funciones Anónimas Autoejecutables . . . . . . . . . . . . . . . . . . . . . . . . 18
2.9.3. Funciones como Argumentos . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
2.10. Determinación del Tipo de Variable . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
2.11. La palabra clave this . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
2.12. Alcance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
2.13. Clausuras . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
3. Conceptos Básicos de jQuery 26
3.1. $(document).ready() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
3.2. Selección de Elementos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
3.2.1. Comprobar Selecciones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
3.2.2. Guardar Selecciones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
3.2.3. Refinamiento y Filtrado de Selecciones . . . . . . . . . . . . . . . . . . . . . . . 30
3.2.4. Selección de Elementos de un Formulario . . . . . . . . . . . . . . . . . . . . . 30
3.3. Trabajar con Selecciones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
3.3.1. Encadenamiento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
3.3.2. Obtenedores (Getters) & Establecedores (Setters) . . . . . . . . . . . . . . . . . 32
3.4. CSS, Estilos, & Dimensiones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
3.4.1. Utilizar Clases para Aplicar Estilos CSS . . . . . . . . . . . . . . . . . . . . . . 33
3.4.2. Dimensiones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
3.5. Atributos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
3.6. Recorrer el DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
3.7. Manipulación de Elementos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
3.7.1. Obtener y Establecer Información en Elementos . . . . . . . . . . . . . . . . . . 35
3.7.2. Mover, Copiar y Remover Elementos . . . . . . . . . . . . . . . . . . . . . . . . 36
3.7.3. Crear Nuevos Elementos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
3.7.4. Manipulación de Atributos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
3.8. Ejercicios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
3.8.1. Selecciones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
3.8.2. Recorrer el DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
3.8.3. Manipulación . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
2
4. El núcleo de jQuery 41
4.1. $ vs $() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
4.2. Métodos Utilitarios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
4.3. Comprobación de Tipos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
4.4. El Método Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
4.5. Detección de Navegadores y Características . . . . . . . . . . . . . . . . . . . . . . . . 44
4.6. Evitar Conflictos con Otras Bibliotecas JavaScript . . . . . . . . . . . . . . . . . . . . 44
5. Eventos 46
5.1. Introducción . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
5.2. Vincular Eventos a Elementos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
5.2.1. Vincular Eventos para Ejecutar una vez . . . . . . . . . . . . . . . . . . . . . . 47
5.2.2. Desvincular Eventos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
5.2.3. Espacios de Nombres para Eventos . . . . . . . . . . . . . . . . . . . . . . . . . 47
5.2.4. Vinculación de Múltiples Eventos . . . . . . . . . . . . . . . . . . . . . . . . . . 48
5.3. El Objeto del Evento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
5.4. Ejecución automática de Controladores de Eventos . . . . . . . . . . . . . . . . . . . . 49
5.5. Incrementar el Rendimiento con la Delegación de Eventos . . . . . . . . . . . . . . . . 49
5.5.1. Desvincular Eventos Delegados . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
5.6. Funciones Auxiliares de Eventos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
5.6.1. $.fn.hover . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
5.6.2. $.fn.toggle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
5.7. Ejercicios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
5.7.1. Crear una “Sugerencia” para una Caja de Ingreso de Texto . . . . . . . . . . . 51
5.7.2. Añadir una Navegación por Pestañas . . . . . . . . . . . . . . . . . . . . . . . . 51
6. Efectos 53
6.1. Introducción . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
6.2. Efectos Incorporados en la Biblioteca . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
6.2.1. Cambiar la Duración de los Efectos . . . . . . . . . . . . . . . . . . . . . . . . . 54
6.2.2. Realizar una Acción Cuando un Efecto fue Ejecutado . . . . . . . . . . . . . . 54
6.3. Efectos Personalizados con $.fn.animate . . . . . . . . . . . . . . . . . . . . . . . . . 55
6.3.1. Easing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
6.4. Control de los Efectos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
6.5. Ejercicios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
6.5.1. Mostrar Texto Oculto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
6.5.2. Crear un Menú Desplegable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
6.5.3. Crear un Slideshow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
3
7. Ajax 58
7.1. Introducción . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
7.2. Conceptos Clave . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
7.2.1. GET vs. POST . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
7.2.2. Tipos de Datos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
7.2.3. Asincronismo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
7.2.4. Políticas de Mismo Origen y JSONP . . . . . . . . . . . . . . . . . . . . . . . . 60
7.2.5. Ajax y Firebug . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
7.3. Métodos Ajax de jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
7.3.1. $.ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
7.3.2. Métodos Convenientes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
7.3.3. $.fn.load . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
7.4. Ajax y Formularios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
7.5. Trabajar con JSONP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
7.6. Eventos Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
7.7. Ejercicios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
7.7.1. Cargar Contenido Externo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
7.7.2. Cargar Contenido Utilizando JSON . . . . . . . . . . . . . . . . . . . . . . . . 66
8. Extensiones 67
8.1. ¿Qué es una Extensión? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
8.2. Crear una Extensión Básica . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
8.3. Encontrar y Evaluar Extensiones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
8.4. Escribir Extensiones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
8.5. Escribir Extensiones con Mantenimiento de Estado Utilizando Widget Factory de
jQuery UI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
8.5.1. Añadir Métodos a un Widget . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
8.5.2. Trabajar con las Opciones del Widget . . . . . . . . . . . . . . . . . . . . . . . 74
8.5.3. Añadir Funciones de Devolución de Llamada . . . . . . . . . . . . . . . . . . . 75
8.5.4. Limpieza . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
8.5.5. Conclusión . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
8.6. Ejercicios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
8.6.1. Realizar una Tabla Ordenable . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
8.6.2. Escribir una Extensión Para Cambiar el Color de Fondo en Tablas . . . . . . . 78
4
9. Mejores Prácticas para Aumentar el Rendimiento 79
9.1. Guardar la Longitud en Bucles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
9.2. Añadir Nuevo Contenido por Fuera de un Bucle . . . . . . . . . . . . . . . . . . . . . . 79
9.3. No Repetirse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
9.4. Cuidado con las Funciones Anónimas . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
9.5. Optimización de Selectores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
9.5.1. Selectores basados en ID . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
9.5.2. Especificidad . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
9.5.3. Evitar el Selector Universal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
9.6. Utilizar la Delegación de Eventos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
9.7. Separar Elementos para Trabajar con Ellos . . . . . . . . . . . . . . . . . . . . . . . . 83
9.8. Utilizar Estilos en Cascada para Cambios de CSS en Varios Elementos . . . . . . . . . 83
9.9. Utilizar $.data en Lugar de $.fn.data . . . . . . . . . . . . . . . . . . . . . . . . . . 83
9.10. No Actuar en Elementos no Existentes . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
9.11. Definición de Variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
9.12. Condicionales . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
9.13. No Tratar a jQuery como si fuera una Caja Negra . . . . . . . . . . . . . . . . . . . . 85
10.Organización del Código 86
10.1. Introducción . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
10.1.1. Conceptos Clave . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
10.2. Encapsulación . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
10.2.1. El Objeto Literal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87
10.2.2. El Patrón Modular . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89
10.3. Gestión de Dependencias . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
10.3.1. Obtener RequireJS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92
10.3.2. Utilizar RequireJS con jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . 92
10.3.3. Crear Módulos Reusables con RequireJS . . . . . . . . . . . . . . . . . . . . . . 93
10.3.4. Optimizar el Código con las Herramientas de RequireJS . . . . . . . . . . . . . 94
10.4. Ejercicios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95
10.4.1. Crear un Módulo Portlet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95
11.Eventos Personalizados 97
11.1. Introducción a los Eventos Personalizados . . . . . . . . . . . . . . . . . . . . . . . . . 97
11.1.1. Un Ejemplo de Aplicación . . . . . .
Fundamentos de jQuery
0 commentaires: