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

Imágen de pdf Curso de maquetación – Jquery

Curso de maquetación – Jquerygráfica de visualizaciones

Publicado el 2 de Marzo del 2019
475 visualizaciones desde el 2 de Marzo del 2019
1,5 MB
53 paginas
Creado hace 4a (06/05/2016)
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
  • Links de descarga
http://lwp-l.com/pdf15395

Comentarios de: Curso de maquetación – Jquery (0)


No hay comentarios
 

Comentar...

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios...
CerrarCerrar
CerrarCerrar
Cerrar

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad