PDF de programación - Curso de maquetación – Jquery

SOPRA
Curso de Maquetación

jQuery



U S AR I N T E R N A S O L A M E N T E



Versión 1.00 del viernes, 06 de mayo de 2016



Estado : Trabajo





06 de mayo de 2016 – CURSO DE MAQUETACIÓN – JQUERY

SOPRA / Curso de Maquetación
HTML5


1. Herramientas a utilizar en el curso

2. Qué es jQuery

Índice

6

7

2.1. Ventajas de jQuery con respecto a otras alternativas _______________________________ 7

3.

4.

Lo Básico

Los selectores

8

9

4.1.

Elección de selectores ________________________________________________________ 9

4.2. Comprobar selecciones _______________________________________________________ 9

4.3. Guardar selecciones ________________________________________________________ 10

4.4. Refinamiento y filtrado de selecciones __________________________________________ 10

4.5.

Selección de elementos de un formulario _______________________________________ 10

4.6. Getters y Setters ___________________________________________________________ 11

5.

Eventos

13

5.1.

El objeto Event ____________________________________________________________ 13

5.2.

El principio de propagación (bubbling) __________________________________________ 14

5.3.

Eventos globales o del DOM __________________________________________________ 15
Document Ready ______________________________________________________________________ 15
Window load __________________________________________________________________________ 15
Window resize ________________________________________________________________________ 15

5.3.1.
5.3.2.
5.3.3.

5.4.

El scroll ___________________________________________________________________ 16
Detectar si se está haciendo scroll en una página _____________________________________________ 16
El método scrollTop() ___________________________________________________________________ 16
El método scrollLeft() ___________________________________________________________________ 16
Animaciones suaves con el scroll __________________________________________________________ 16

5.4.1.
5.4.2.
5.4.3.
5.4.4.

5.5. Manejadores de eventos _____________________________________________________ 17
Eventos relacionados con el ratón _________________________________________________________ 17
Eventos relacionados con el teclado _______________________________________________________ 18
Eventos relacionados con el foco __________________________________________________________ 18

5.5.1.
5.5.2.
5.5.3.

5.6.

Ejemplos _________________________________________________________________ 20

6.

Funciones nominales y anónimas

21

6.1.

Funciones nominales ________________________________________________________ 21

© Sopra Group, 2016 / Versión: 1.00 / Estado Trabajo / Ref. : 20150901-110953-p



2/53



06 de mayo de 2016 – CURSO DE MAQUETACIÓN – JQUERY

SOPRA / Curso de Maquetación
HTML5


6.2.

Funciones anónimas ________________________________________________________ 21

7. Métodos

22

7.1.

El Dream-Team de jQuery ____________________________________________________ 22

7.2. Métodos “suplentes” del Dream-Team _________________________________________ 23

7.3. Manipulación de elementos __________________________________________________ 24
Obtener y establecer información en elementos _____________________________________________ 24
Mover, copiar y eliminar elementos _______________________________________________________ 25
Crear nuevos elementos_________________________________________________________________ 26
Manipulación de atributos _______________________________________________________________ 27

7.3.1.
7.3.2.
7.3.3.
7.3.4.

7.4.

El método data ____________________________________________________________ 28

7.6.

El método attr _____________________________________________________________ 30

7.7. Otros métodos útiles ________________________________________________________ 31
$.fn.CSS ______________________________________________________________________________ 31
$.trim ________________________________________________________________________________ 31
$.each _______________________________________________________________________________ 31
$.inArray _____________________________________________________________________________ 31
$.extend _____________________________________________________________________________ 31
$.isFunction ___________________________________________________________________________ 32
$.isPlainObject ________________________________________________________________________ 32
$.isArray _____________________________________________________________________________ 32
$.proxy ______________________________________________________________________________ 32

7.7.1.
7.7.2.
7.7.3.
7.7.4.
7.7.5.
7.7.6.
7.7.7.
7.7.8.
7.7.9.

8.

Efectos

34

8.1.

Efectos de transparencia (show y hide) _________________________________________ 34

8.2.

Efectos de atenuación (fadein y fadeout) ________________________________________ 34

8.3.

Efectos de deslizamiento (slideIn y slideout) _____________________________________ 35

8.4. Cambiar de efecto basado en estados (toggle) ____________________________________ 35

8.5. Añadiendo funcionalidades después del efecto ___________________________________ 36

8.6. Otros métodos para gestionar animaciones ______________________________________ 36

8.7.

Efectos personalilzados con animate ___________________________________________ 36
Flexibilización _________________________________________________________________________ 37

8.7.1.

9.

Recorrer el DOM

10. Observadores de Mutación

38

39

10.1. El objeto MutationObserver __________________________________________________ 39
Compatibilidad en navegadores __________________________________________________________ 39
Tipos de cambios del objeto mutationobserver ______________________________________________ 39

10.1.1.
10.1.2.

© Sopra Group, 2016 / Versión: 1.00 / Estado Trabajo / Ref. : 20150901-110953-p



3/53



06 de mayo de 2016 – CURSO DE MAQUETACIÓN – JQUERY

SOPRA / Curso de Maquetación
HTML5


10.1.3.
10.1.4.

Cómo usar el objeto mutationobserver _____________________________________________________ 40
Detener la observación _________________________________________________________________ 40

10.2. El objeto MutationRecord ____________________________________________________ 41

10.3. Ejemplo básico_____________________________________________________________ 41

11. Peticiones Ajax

42

11.1. $.ajax ____________________________________________________________________ 42
Utilizar el método $.ajax ________________________________________________________________ 42
Opciones del método $.ajax ______________________________________________________________ 43

11.1.1.
11.1.2.

11.2. Métodos convenientes ______________________________________________________ 44
Ejemplos _____________________________________________________________________________ 44

11.2.1.

11.3. $.fn.load __________________________________________________________________ 45
Ejemplos _____________________________________________________________________________ 45

11.3.1.

11.4. La especificación CORS ______________________________________________________ 45
Cómo funciona ________________________________________________________________________ 45
Cabeceras para la CORS _________________________________________________________________ 46
Ejemplo ______________________________________________________________________________ 46

11.4.1.
11.4.2.
11.4.3.

12. Evitar conflictos con otras bibliotecas JavaScript

13. Creación de Plugins

47

48

13.1. Objetos a extender _________________________________________________________ 48
Ejemplo de definición jQuery _____________________________________________________________ 48
Ejemplo de definición jQuery.fn __________________________________________________________ 48

13.1.1.
13.1.2.

13.2. El método extend() _________________________________________________________ 49

13.3. Estableciendo parámetros por defecto __________________________________________ 49

13.4. Creando un plugin con parámetros y valores por defecto ___________________________ 49

14. Mejorar el rendimiento

50

14.1. Guardar la longitud de los bucles ______________________________________________ 50

14.2. Añadir Nuevo Contenido por Fuera de un Bucle __________________________________ 50

14.3. Utilizar la Delegación de Eventos ______________________________________________ 50

14.4. Asignar objetos a variables ___________________________________________________ 51

14.5. No abusar de $.fn.css _______________________________________________________ 51

14.6. No abusar de $(this) ________________________________________________________ 51

14.7. Utilizar $.data en Lugar de $.fn.data ______________________________________ 51

14.8. Evitar interacciones con elementos vacíos _______________________________________ 52

© Sopra Group, 2016 / Versión: 1.00 / Estado Trabajo / Ref. : 20150901-110953-p



4/53



06 de mayo de 2016 – CURSO DE MAQUETACIÓN – JQUERY

SOPRA / Curso de Maquetación
HTML5


14.9. evitar el uso de $.each ______________________________________________________ 52

15. Referencias



53

© Sopra Group, 2016 / Versión: 1.00 / Estado Trabajo / Ref. : 20150901-110953-p



5/53



06 de mayo de 2016 – CURSO DE MAQUETACIÓN – JQUERY

SOPRA / Curso de Maquetación
HTML5


1. Herramientas a utilizar en el curso

Navegador Firefox con los plugins:

 Colorzilla
 Pixel Perfect
 Firebug
 Greasemonkey
IE Tab V2

 Firesizer
 Status-4-Evar
 Senseo


Navegador Chrome