Vous êtes sur la page 1sur 12

jQuery

El framework JavaScript de la Web 2.0 (2a edicin)

Primeros pasos con jQuery


1. El regreso de JavaScript

11

2. Presentacin de jQuery

12

3. Los puntos fuertes de jQuery

13

4. jQuery 2.0 o jQuery 1.10

15

5. Aplicacin de jQuery

16

6. Iniciar un script jQuery

18

7. La primera aplicacin jQuery

20

8. La documentacin de jQuery

26

9. Herramientas de desarrollo y de depuracin

27

Los selectores en jQuery


1. Introduccin

31

2. Los selectores bsicos

31

2.1 Seleccin por identificador


2.2 Seleccin por nombre de la etiqueta
2.3 Seleccin por clase
3. Los selectores jerrquicos

37

3.1 Seleccin de los descendientes

www.ediciones-eni.com

32
33
35

37

Ediciones ENI

1/12

jQuery
El framework JavaScript de la Web 2.0 (2a edicin)

3.2 Seleccin de los hijos


3.3 Seleccin de los hermanos siguientes
3.4 Seleccin del elemento siguiente
4. Los filtros jQuery bsicos

43

4.1 El primer elemento


4.2 El ltimo elemento
4.3 Los elementos pares
4.4 Los elementos impares
4.5 Un elemento concreto
4.6 Los elementos siguientes
4.7 Los elementos anteriores
4.8 Las etiquetas de ttulo
4.9 Exclusin de un elemento
4.10 Los elementos segn su tipo

43
45
46
48
49
50
52
53
55
56

5. Los filtros hijos

58

5.1 El primer hijo


5.2 El ltimo hijo
5.3 El ensimo hijo
5.4 Los hijos pares e impares
5.5 Los hijos nicos

58
59
61
63
64

6. Los filtros de contenido

66

6.1 Un texto dado


6.2 Un contenido vaco
6.3 Ser padre
6.4 Un selector concreto

66
67
69
70

7. Los filtros de visibilidad

72

7.1 Elemento visible


7.2 Elemento oculto

72
73

8. Los filtros de atributo

www.ediciones-eni.com

38
40
42

75

Ediciones ENI

2/12

jQuery
El framework JavaScript de la Web 2.0 (2a edicin)

8.1 El atributo
8.2 El atributo con un determinado valor
8.3 El atributo que no tiene un valor determinado
8.4 El atributo cuyo valor empieza por
8.5 El atributo cuyo valor termina por
8.6 El atributo cuyo valor contiene
8.7 Los filtros mltiples de atributo

76
77
78
80
81
83
84

9. Los selectores y filtros de formularios

86

10. Los selectores y los caracteres especiales

86

Trabajar con los atributos y las propiedades


1. Introduccin

87

2. Aadir o eliminar una clase

87

3. Comprobar la presencia de una clase

92

4. Cambiar entre dos clases

95

5. Conocer el valor de un atributo

99

6. Aadir un atributo y su valor

102

7. Aadir varios atributos y sus valores

106

8. Eliminar un atributo

109

9. Conocer el atributo value

111

www.ediciones-eni.com

Ediciones ENI

3/12

jQuery
El framework JavaScript de la Web 2.0 (2a edicin)

10. Modificar el atributo value

115

11. Conocer la propiedad de un elemento

117

12. Modificar la propiedad de un elemento

120

13. Eliminar la propiedad de un elemento

122

Trabajar con las hojas de estilo CSS


1. Introduccin

125

2. Acceder a una propiedad de estilo

125

3. Modificar las propiedades de estilo

130

4. Asignar las propiedades de estilo

134

5. El dimensionamiento

138

6. El posicionamiento

142

7. Aplicaciones

148

7.1 Redimensionar el tamao de los caracteres


7.2 Zoom sobre una imagen con una leyenda
7.3 Un tooltip con jQuery

148
152
158

Los eventos

www.ediciones-eni.com

Ediciones ENI

4/12

jQuery
El framework JavaScript de la Web 2.0 (2a edicin)

1. Introduccin

165

2. Los administradores de eventos

165

2.1 Al hacer clic con el ratn


2.2 Al hacer doble clic
2.3 El foco
2.4 Perder el foco
2.5 La barra de desplazamiento
2.6 El botn del ratn
2.7 El desplazamiento del cursor
2.8 Entrada y salida del cursor
2.9 Enviar una consulta
2.10 Otros eventos

165
167
169
171
173
175
178
180
188
190

3. Mtodos o administradores de eventos avanzados


3.1 Unir un evento a un objeto (on)
3.2 Unir un evento a un objeto (bind)
3.3 Delegar un evento
3.4 Ejecutar una funcin solo una vez
3.5 Desencadenar un evento particular
3.6 Al pasar el ratn
4. Aplicaciones

191
191
194
196
198
200
202
206

4.1 Un men desplazado


4.2 Zoom en una vieta

206
209

Los efectos
1. Introduccin

215

2. Mostrar y ocultar

216

2.1 Mostrar y ocultar texto

www.ediciones-eni.com

217

Ediciones ENI

5/12

jQuery
El framework JavaScript de la Web 2.0 (2a edicin)

2.2 Desplegar listas anidadas

221

3. Desplazar verticalmente

227

3.1 Desplazar una capa


3.2 Un men desplegable vertical

228
231

4. Hacer un efecto de fundido

235

4.1 Aparicin y desaparicin progresiva


4.2 Jugar con la opacidad
5. Cambiar de un efecto a otro

236
239
243

5.1 Ejemplo del efecto de cambio


5.2 Un men acorden

245
247

6. Retrasar un efecto

252

7. Crear una animacin

254

7.1 Una animacin en una capa


7.2 Una animacin avanzada
7.3 Un efecto original al pasar el ratn por encima

256
259
263

Recorrer el DOM
1. Introduccin

267

2. Encontrar los hijos

269

3. Encontrar los padres directos

271

4. Encontrar todos los padres

274

5. Encontrar los padres hasta

276

www.ediciones-eni.com

Ediciones ENI

6/12

jQuery
El framework JavaScript de la Web 2.0 (2a edicin)

6. Encontrar los hermanos

278

7. Encontrar el hermano anterior

280

8. Encontrar los hermanos anteriores

283

9. Encontrar los hermanos anteriores hasta

285

10. Encontrar el hermano siguiente

287

11. Encontrar los hermanos siguientes

289

12. Encontrar los hermanos siguientes hasta

291

13. Encontrar el contenido

294

14. Encontrar determinados padres

296

15. Encontrar determinados descendientes

298

16. Aadir elementos a la seleccin

301

17. Una lupa para agrandar las vietas

303

Trabajar con el DOM


1. Introduccin

307

2. Modificar el contenido

307

www.ediciones-eni.com

Ediciones ENI

7/12

jQuery
El framework JavaScript de la Web 2.0 (2a edicin)

3. Insertar en el interior

312

3.1 Primer mtodo


3.2 Segundo mtodo

312
316

4. Insertar en el exterior

320

5. Rodear un elemento

324

6. Sustituir un elemento

329

7. Eliminar un elemento

332

7.1 Eliminar un elemento


7.2 Vaciar un elemento

332
336

8. Copiar un elemento

340

9. Algunas aplicaciones

343

9.1 Aadir un pie de pgina y los enlaces de regreso


9.2 Aadir y eliminar elementos de una lista
9.3 Aadir un icono a los enlaces externos

343
348
351

Filtrar el DOM
1. Introduccin

353

2. El filtrado de los elementos del DOM

353

2.1 Por una expresin


2.2 Por una funcin

353
358

3. Encontrar un elemento concreto

www.ediciones-eni.com

362

Ediciones ENI

8/12

jQuery
El framework JavaScript de la Web 2.0 (2a edicin)

4. Encontrar una secuencia de elementos

366

5. Encontrar un elemento segn un criterio

370

6. Reducir al primer elemento

374

7. Reducir al ltimo elemento

375

8. Reducir a un elemento concreto

376

9. Eliminar un elemento

378

10. Formar una tabla (Array) de elementos

382

11. Aplicaciones

385

11.1 Filtrar una lista


11.2 Filtrar una lista segn dos criterios
11.3 Navegacin por pestaas

385
390
396

AJAX en jQuery
1. Introduccin

403

2. Las consultas AJAX abreviadas

404

2.1 Cargar un archivo


2.2 Solo cargar en caso de modificacin
2.3 Cargar siguiendo el mtodo GET o POST
2.4 Cargar un script
3. La consulta AJAX completa

www.ediciones-eni.com

404
408
409
413
415

Ediciones ENI

9/12

jQuery
El framework JavaScript de la Web 2.0 (2a edicin)

4. Definir una consulta por defecto

422

5. Los eventos asociados a la consulta

423

5.1 ajaxSend()
5.2 ajaxStart()
5.3 ajaxStop()
5.4 ajaxSuccess()
5.5 ajaxComplete()
5.6 ajaxError()

423
426
427
428
429
430

6. Las funciones diferidas

431

7. Serializar los datos

440

8. Aplicaciones

444

8.1 Un icono de carga


8.2 Un lxico en AJAX

444
450

Algunas utilidades
1. Introduccin

457

2. Evitar los conflictos

457

3. Iteraciones en jQuery

459

4. Almacenar y recuperar datos

462

5. Encontrar un elemento del DOM

464

6. Buscar un elemento en concreto

467

www.ediciones-eni.com

Ediciones ENI

10/12

jQuery
El framework JavaScript de la Web 2.0 (2a edicin)

7. Conocer el nmero de elementos

468

8. Convertir en Array los elementos encontrados

470

Los formularios
1. Introduccin

473

2. Los selectores de formularios

473

3. Los filtros de seleccin

478

3.1 Los elementos marcados


3.2 Los elementos seleccionados

478
481

4. Aplicaciones

484

4.1 Seleccionar todas las casillas de seleccin


4.2 Confirmar un comando
4.3 Un formulario de inscripcin original

484
487
490

Los plug-ins jQuery


1. Introduccin

495

2. Disear un plug-in jQuery

495

2.1 Aspectos tericos


2.2 Una aplicacin prctica

495
497

3. Usar un plug-in jQuery

499

4. Algunos plug-ins

502

www.ediciones-eni.com

Ediciones ENI

11/12

jQuery
El framework JavaScript de la Web 2.0 (2a edicin)

4.1 jQuery UI
4.1.1 Requisitos
4.1.2 Instalacin
4.1.3 El men con pestaas
4.1.4 El men en acorden
4.1.5 Los calendarios
4.1.6 Los cuadros de dilogo
4.1.7 Los botones
4.1.8 Los tooltips
4.1.9 Los cursores
4.1.10 La barra de progreso
4.1.11 Los contadores numricos
4.1.12 Arrastrar/soltar (drag/drop)
4.2 Bordes variados
4.3 Textos redondeados
4.4 Tooltips
4.5 Desvelar las contraseas
4.6 Hacer zoom sobre una imagen
4.7 Ampliar una miniatura
4.8 Un carrusel de imgenes
4.9 Un men de tipo Mac
4.10 Grficos a partir de una tabla
4.11 Ordenar una tabla de datos

502
502
503
504
505
507
509
510
511
512
513
514
515
517
519
520
521
523
525
526
528
529
534

ndice

539

www.ediciones-eni.com

Ediciones ENI

12/12