fundamentos de jquery

Click here to load reader

Post on 30-Nov-2015

33 views

Category:

Documents

0 download

Embed Size (px)

TRANSCRIPT

  • Fundamentos de jQuery

    Textos originales:Rebecca Murphey

    Traduccin y adaptacin a espanol:Leandro DOnofrio

    Correcciones:Gustavo Ral Aragn, Pablo Maronna, Denis Ciccale y otras personas

    Con contribuciones de James Padolsey, Paul Irish y otros.

    Bajo licencia Creative Commons

    Octubre 2011

  • ndice general

    1. Bienvenido/a 21.1. Obtener el Material de Aprendizaje . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21.2. Software . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21.3. Aadir JavaScript a una Pgina . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31.4. Depuracin del Cdigo JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31.5. Ejercicios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41.6. Convenciones Utilizadas en el Libro . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41.7. Notas de la Traduccin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41.8. Material de Referencia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

    2. Conceptos Bsicos de JavaScript 62.1. Introduccin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62.2. Sintaxis Bsica . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62.3. Operadores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

    2.3.1. Operadores Bsicos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72.3.2. Operaciones con Nmeros y Cadenas de Caracteres . . . . . . . . . . . . . . . . 72.3.3. Operadores Lgicos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82.3.4. Operadores de Comparacin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

    2.4. Cdigo Condicional . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92.4.1. Elementos Verdaderos y Falsos . . . . . . . . . . . . . . . . . . . . . . . . . . . 92.4.2. Variables Condicionales Utilizando el Operador Ternario . . . . . . . . . . . . . 102.4.3. Declaracin Switch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

    2.5. Bucles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112.5.1. Bucles Utilizando For . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122.5.2. Bucles Utilizando While . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122.5.3. Bucles Utilizando Do-while . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132.5.4. Break y Continue . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

    1

  • 2.6. Palabras Reservadas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142.7. Arreglos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162.8. Objetos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172.9. Funciones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

    2.9.1. Utilizacin de Funciones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182.9.2. Funciones Annimas Autoejecutables . . . . . . . . . . . . . . . . . . . . . . . . 182.9.3. Funciones como Argumentos . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

    2.10. Determinacin del Tipo de Variable . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192.11. La palabra clave this . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202.12. Alcance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222.13. Clausuras . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

    3. Conceptos Bsicos de jQuery 263.1. $(document).ready() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263.2. Seleccin de Elementos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

    3.2.1. Comprobar Selecciones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 293.2.2. Guardar Selecciones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 293.2.3. Renamiento y Filtrado de Selecciones . . . . . . . . . . . . . . . . . . . . . . . 303.2.4. Seleccin de Elementos de un Formulario . . . . . . . . . . . . . . . . . . . . . 30

    3.3. Trabajar con Selecciones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 313.3.1. Encadenamiento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 313.3.2. Obtenedores (Getters) & Establecedores (Setters) . . . . . . . . . . . . . . . . . 32

    3.4. CSS, Estilos, & Dimensiones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 323.4.1. Utilizar Clases para Aplicar Estilos CSS . . . . . . . . . . . . . . . . . . . . . . 333.4.2. Dimensiones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33

    3.5. Atributos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 333.6. Recorrer el DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 343.7. Manipulacin de Elementos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35

    3.7.1. Obtener y Establecer Informacin en Elementos . . . . . . . . . . . . . . . . . . 353.7.2. Mover, Copiar y Remover Elementos . . . . . . . . . . . . . . . . . . . . . . . . 363.7.3. Crear Nuevos Elementos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 373.7.4. Manipulacin de Atributos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38

    3.8. Ejercicios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 393.8.1. Selecciones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 393.8.2. Recorrer el DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 393.8.3. Manipulacin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39

    2

  • 4. El ncleo de jQuery 414.1. $ vs $() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 414.2. Mtodos Utilitarios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 414.3. Comprobacin de Tipos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 434.4. El Mtodo Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 434.5. Deteccin de Navegadores y Caractersticas . . . . . . . . . . . . . . . . . . . . . . . . 444.6. Evitar Conictos con Otras Bibliotecas JavaScript . . . . . . . . . . . . . . . . . . . . 44

    5. Eventos 465.1. Introduccin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 465.2. Vincular Eventos a Elementos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46

    5.2.1. Vincular Eventos para Ejecutar una vez . . . . . . . . . . . . . . . . . . . . . . 475.2.2. Desvincular Eventos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 475.2.3. Espacios de Nombres para Eventos . . . . . . . . . . . . . . . . . . . . . . . . . 475.2.4. Vinculacin de Mltiples Eventos . . . . . . . . . . . . . . . . . . . . . . . . . . 48

    5.3. El Objeto del Evento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 485.4. Ejecucin automtica de Controladores de Eventos . . . . . . . . . . . . . . . . . . . . 495.5. Incrementar el Rendimiento con la Delegacin de Eventos . . . . . . . . . . . . . . . . 49

    5.5.1. Desvincular Eventos Delegados . . . . . . . . . . . . . . . . . . . . . . . . . . . 505.6. Funciones Auxiliares de Eventos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50

    5.6.1. $.fn.hover . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 505.6.2. $.fn.toggle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51

    5.7. Ejercicios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 515.7.1. Crear una Sugerencia para una Caja de Ingreso de Texto . . . . . . . . . . . 515.7.2. Aadir una Navegacin por Pestaas . . . . . . . . . . . . . . . . . . . . . . . . 51

    6. Efectos 536.1. Introduccin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 536.2. Efectos Incorporados en la Biblioteca . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53

    6.2.1. Cambiar la Duracin de los Efectos . . . . . . . . . . . . . . . . . . . . . . . . . 546.2.2. Realizar una Accin Cuando un Efecto fue Ejecutado . . . . . . . . . . . . . . 54

    6.3. Efectos Personalizados con $.fn.animate . . . . . . . . . . . . . . . . . . . . . . . . . 556.3.1. Easing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55

    6.4. Control de los Efectos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 566.5. Ejercicios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56

    6.5.1. Mostrar Texto Oculto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 566.5.2. Crear un Men Desplegable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 566.5.3. Crear un Slideshow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57

    3

  • 7. Ajax 587.1. Introduccin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 587.2. Conceptos Clave . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58

    7.2.1. GET vs. POST . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 587.2.2. Tipos de Datos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 597.2.3. Asinc