PDF de programación - Aprende jQuery 1.3

PROGRAMACIÓN

TÍTULO DE LA OBRA ORIGINAL:
Learning jQuery 1.3

RESPONSABLE EDITORIAL:
Víctor Manuel Ruiz Calderón
Alicia Cózar Concejil

TRADUCTOR:
Beatriz Parra Pérez

DISEÑO DE CUBIERTA:
Cecilia Poza Melero

Aprende jQuery

.3

.'

:".- ~

Ionathan Chaffer
Karl Swedberg

.s~,"-
..:~~

h\Nh\Yh\

.-MULTIMEDIA_

l

_~,_._c.
_

• ~

Todos losnombres propios de programas, sistemas operativos, equipos
hardware, etc. que aparecen en este libro son marcas registradas de
sus respectivas compañías u organizaciones.

/

a Karl por su motivación por continuar

Quiero dar las gracias a Jenny por su incansable entusiasmo y apoyo,
escribiendo cuando el espíritu era débil,
ya la comunidad Ars Technica por su constante inspiración hacia la excelencia técnica.
Jonathan Chaffer

\,.

Quiero dar las gracias a mi mujer Sara, por su constante amor y apoyo.
Gracias también a mis dos encantadores hijos, Benjamin y Lucia. Jonathan Chaffer
cuenta con mi más profundo respeto por su experiencia en programación y mi gratitud por su
deseo de escribir este libro conmigo.
Muchas gracias a [ohn Resig por crear la librería JavaScript más grande del mundo y por
comunidad a su alrededor.
los revisores técnicos de este libro, y a
todos aquellos que han proporcionado ayuda e inspiración en el camino.
Karl Swedberg

Gracias también a las personas de Packt Publishing,

fomentar una sorprendente

Reservados todos los derechos. El contenido de
esta obra está protegido por la Ley, que establece
penas de prisión y/o multas, además de las
correspondientes indemnizaciones por daños y
perjuicios, para quienes reprodujeren, plagiaren,
distribuyeren o comunicaren públicamente, en
todo o en parte, una obra literaria, artística o
interpretación
científica, o su transformación,
o ejecución artística fijada en cualquier
tipo
de soporte o comunicada a través de cualquier
medio, sin la preceptiva autorización.

" -

;:;"';,

~,':.

Authorized translation from English language edition published
by Packt Publishing Ltd.
Copyright © 2009 by Packt Publishing

Edición española:
© EDICIONES ANAYA MULTIMEDIA (GRUPO ANAYA, S.A.), 2010

Juan Ignacio Luca de Tena, 15. 28027 Madrid
Depósito legal: M-47.674-2009
ISBN: 978-84-415-2665-5
Printed in Spain
Impreso en: Gráficas Hermanos Gómez, S. L. L.

Aprende jQuery 1.3

••

En estos momentos, Akash proporciona redacción técnica independiente y desarrollo

Web por medio de su sitio Web, http://bitmeta

. org.

Dave Methvin cuenta con más de'<25años de experiencia en desarrollo de software
tanto en entornos Windows como Unix, Su carrera se ha centrado en software incorporado
en los campos de la robótica,
telecomunicaciones, y medicina. Posteriormente, pasó a
proyectos de software basados en PC utilizando C/C++ y tecnologías Web.
Dave cuenta también con más de 20 años de experiencia en periodismo informático.
Fue Editor Ejecutivo en pe Tech Journal y Windows Magazine,
tratando temas de PC e
/ Internet; sus columnas prácticas sobre JavaScript ofrecían algunas de las primeras solu-
cienes de cortar y pegar a problemas comunes de páginas Web. También fue co-autor
del libro Networking Windows NT (john Wiley & Sons, 1997).

Actualmente, Dave es Director Tecnológico en PC Pitstop, un sitio Web que ayuda
• a los usuarios a solucionar y optimizar el rendimiento de sus ordenadores. También es

un colaborador activo en la comunidad jQuery.

Mike Alsup ha participado en el proyecto jQuery casi desde su creación y ha contri-
buido con muchos plug-ins populares en la comunidad. Es un participante activo en el
jQuery Google Group donde frecuentemente proporciona soporte a los nuevos usuarios
jQuery.

Mike vive en el norte del estado de Nueva York con su mujer, Diane, y sus tres hijos
adolescentes. Es desarrollador de software en Click Commerce, Inc. donde se centra en
[ava, Swing, y desarrollo de aplicaciones Web.

Sus plug-ins jQuery se pueden encontrar en http

: / / j query .mal sup . com/.

••

Agradecimientos

Sobre los autores

]onathan Chaffer es el Director Tecnológico de Structure Interactive, una agencia
interactiva con sede en Grand Rapids, Michigan. Allí supervisa los proyectos de de-
sarrollo Web utilizando una amplia variedad de tecnologías, y colabora en tareas de
programación del día a día, también.

En la comunidad de código abierto, [onathan ha estado muy activo en el proyecto CMS
Drupal, que ha adoptado jQuery como el marco de trabajo JavaScript de su elección. Es
el creador del Content Construction Kit, un módulo popular para gestionar contenido
estructurado en sitios Drupal. Es responsable de reparaciones importantes del sistema
de menú de Drupal y desarrollador de referencia de API.
Jonathan vive en Grand Rapids con su mujer, Jennifer.

Karl Swedberg es desarrollador Web en Fusionary Media en Grand Rapids, Michigan,
diseño con el foco en "están-
donde pasa la mayor parte de su tiempo implementando
dares Web", HTML semántico, CSS bien formado, y JavaScript sencillo, Miembro del
Equipo de proyecto jQuery y colaborador activo de la lista de distribución jQuery, Kart .. _
es conferenciante habitual y ha impartido formación corporativa en Europa y América
del Norte.

Antes de su relación actual con el desarrollo Web, Karl trabajó como editor de estiJQ,'
profesor de inglés en un instituto y propietario de una cafetería. Su fascinación con la"
tecnología empezó a principios de los años 90 cuando trabajó en Microsoft en Redmond,
Washington, y ha continuado sin cesar desde entonces.

Karl preferiría pasar el tiempo con su mujer, Sara, y sus dos hijos, Benjamin y

..-

Lucia.

Sobre los revisores

Akash Mehta es des arrollador de aplicaciones Web, escritor técnico y consultor con
sede en Brisbane, Australia. Sus proyectos anteriores incluyen sitios Web, soluciones
de e-learning y sistemas de información. Ha escrito artículos sobre desarrollo Web para
varios editores en medio impreso y online, es conferenciante habitual en conferencias
locales, y contribuye en blogs PHP.

Como estudiante, Akash mantenía aplicaciones Web PHP y creó interfaces de usuario
utilizando el conjunto de herramientas
jQuery. Mientras se dedicaba a obtener su titula-
ción en comercio y TI,Akash desarrolló aplicaciones Web en plataformas PHP y Python.
Después de horas, organizó su grupo de usuarios PHP local.

Akash desarrolla aplicaciones

sobre una amplia variedad de librerías de código
abierto. Su conjunto de herramientas
incluyen una serie de marcos de trabajo de aplica-
ciones, incluido Zend, CakePHP y Django; marcos de trabajo Javascript como jQuery,
Prototype y Mootools, plataformas como Adobe Flash/Flex, y los motores de base de
datos MySQL y SQLite.

"

.,Indice

d c nt

id

/

i:':.,,~

Prólogo

Introducción
Qué trata este libro
Qué necesita para este libro
Para quién es este libro
Convenciones
Código fuente

1. Empezar a trabajar
Qué hace jQuery
Por qué jQuery funciona bien
Historia del proyecto jQuery
Nuestra primera página Web con jQuery

Descargar jQuery
Configurar el documento HTML
Añadir jQuery

Encontrar el texto del poema
Aplicar la nueva clase
Ejecutar el código
El producto terminado

Resumen

2. Selectores

UUM

$0

:

18

22
24
25
25
25
26

28
29
31
32
33
33
33
36
36
37
37
38
39

40

41
42

••

Índice de contenidos

Índice de contenidos

••

Selectores CSS

Aplicar estilo a niveles de elementos de lista

Selectores de atributo

Aplicar estilo a vínculos

Selectores personalizados

Aplicar estilo a filas alternas
Selectores de formulario

Métodos transversales DOM

Aplicar estilo a celdas específicas
Encadenar

Acceder a elementos DOM
Resumen
3. Eventos
Llevar a cabo tareas al cargar la página

Planificación de la ejecución de código
Múltiples scripts en una página
Métodos abreviados para código
Coexistir con otras librerías

Eventos sencillos

Un sencillo conmutador de estilo

Habilitar los otros botones
Contexto de manejador de evento
Mayor consolidación

Eventos abreviados

Eventos compuestos

Destinos de los eventos
Detener la propagación de evento
Acciones predetermínadas
Delegación de evento

Eliminar un manejador de evento
Espacio de nombres de evento
Volver a vincular eventos

Simular interacción de usuario

Eventos de teclado

Resumen
4. Efectos
Modificaciones CSS en línea
Métodos básicos ocultar y mostrar

Mostrar y ocultar características avanzadas
Destacar elementos sobre los que se hace clic

El viaje de un evento

Efectos secundarios del burbujeo de eventos

Alterar el viaje: el objeto event .............................................................•.....w

,:

43
44
46
46
48
48
51
51
52
53
54
55
56
57
57
58
60 ' . -
60
61
"61
63'"
65
67
68
70
70
71
72
74
75
76
76
77
78
80
80
81
83
84
86
88
89
93

>••.................................................................................

Efectos y velocidad

Aplicar velocidad
Aparecer y desaparecer de forma paulatina

Efectos compuestos
Crear animaciones personalizadas

Alternar el aparecer y desaparecer paulatino
Animar múltiples propiedades

Posicionar con CSS

Efectos simultáneos

frente a "en cola"

Trabajar con un solo conjunto de elementos
Trabajar con múltiples conjuntos de elementos
Rellamadas
En pocas palabras

,

Resumen

5. Manipulación DOM
Manipular atributos

Atributos que no son clase
La función factory $0 revisada

Insertar nuevos elementos
Mover elementos

Marcar, numerar y vincular el contexto
Anexar pies de página

Situar elementos alrededor de otros
Copiar elementos

Clonar con eventos
Clonar citas
Una desviación CSS
De vuelta al código
Embellecer las citas

Métodos de manipulación DOM
Resumen

6. AJAX

Trabajar con objetos JavaScript

Recuperar un objeto JavaScript.

Funciones jQuery globales

Ejecutar un script

Cargar un documento XML

Elegir un formato de datos
Pasar datos al servidor

Llevar a cabo una petición GET

95
96
96
97
98
99 .
100
101
102
102
105
107
109
109

110

111
112
114
115
118
121
122
124
125
126
126
127
127
129
131
132

140
140
141
144
146
150
151
151

134

i~~

Ca~:~~t~::1~

~~.~~.~~::::::::::::::::::::::::::::::::::::::::::::::::::