jquery ième édition le framework javascript du web 2.0 le framework javascript...

Le fr

amew

ork

Java

Scr

ipt

du W

eb 2

.0

ISB

N :

978-

2-74

60-8

917-

4

39 €

jQueryLe framework JavaScript du Web 2.0

Luc VAN LANCKER

Dès les débuts d’Internet, Luc VAN LANCKER, enthousiasmé par l’idée de communication universelle que véhiculait ce concept, s’est complè-tement investi dans ce domaine. C’est un formateur passionné, très au fait des nouvelles technologies liées au web et grand pédagogue. Luc Van Lancker est auteur aux Editions ENI de livres sur HTML 4.0, HTML5, XHTML, AJAX, jQuery UI, jQuery Mobile, Dojo dans différentes collections.

Ce livre sur jQuery s’adresse à des experts ou des candidats experts dans la création de sites Web. La connaissance, sinon la maîtrise du JavaScript, des feuilles de style CSS, du DOM et de l’AJAX sont des pré-requis indis-pensables à la compréhension et à la mise en pratique de cet ouvrage.

Dans ce livre, l’auteur a privilégié une approche structurée et progressive. Chaque thème de jQuery est illustré par un exemple avant de passer à une mise en pratique sur des applications plus pointues.

Cette nouvelle édition du livre coïncide avec une évolution majeure du framework jQuery. La version jQuery 2.0 se caractérise par une taille réduite de l’API afin d’en accélérer le chargement ; de nombreuses mé-thodes disparaissent et des fonctions sont modifiées. Les lecteurs qui désirent s’initier à jQuery partiront ainsi avec une librairie retravaillée dont les principes resteront d’actualité de nombreuses années. Pour les déve-loppeurs qui utilisent une version plus ancienne de jQuery et qui souhaitent migrer vers cette nouvelle version, l’auteur attire leur attention tout au long du livre sur les pièges qu’ils pourraient rencontrer lors cette migration.

Après une présentation du framework, un chapitre est consacré aux sélec-teurs, qui non seulement illustrent la diversité de jQuery pour atteindre aisé-ment n’importe quel élément de la page mais qui sont aussi un concept es-sentiel dans l’apprentissage de jQuery. Dans les chapitres suivants le lecteur découvre les éléments d’interactivité apportés par jQuery ; d’abord par la manipulation des attributs (ajout, modification ou suppression à la volée) puis par l’application aux feuilles de style CSS. Suivent les événements classiques du JavaScript mais surtout ceux apportés par jQuery. Après la présentation des effets visuels aussi nombreux qu’originaux, l’étude du DOM et de l’AJAX revisité par jQuery est longuement détaillée. Le chapitre final passe en revue quelques-uns des nombreux plug-ins développés par la communauté jQuery qui permettent d’apporter, en quelques lignes de code, des effets pour le moins spectaculaires.

Sa lecture terminée, le lecteur sera à même de développer des applications web plus interactives, plus riches et plus innovantes, le tout avec une facilité d’écriture du JavaScript insoupçonnée.

Des éléments complémentaires sont disponibles en téléchargement sur le site www.editions-eni.fr.

Téléchargementwww.editions-eni.fr.fr

Sur www.editions-eni.fr :b Le code des exemples du livre et les illustrations utilisées.b La librairie jQuery.b Les fichiers relatifs aux plugins étudiés.

Avant-propos • Démarrer avec jQuery • Les sélecteurs en jQuery • Manipuler les attributs et les propriétés • Mani-puler les feuilles de style CSS • Les évènements • Les effets • Traverser le DOM • Manipuler le DOM • Filtrer le DOM • AJAX vu par jQuery • Quelques méthodes utilitaires • Les formulaires • Les plug-ins jQuery

Les chapitres du livre

jQueryLe framework JavaScriptdu Web 2.0

Luc VAN LANCKERjQue

ry

3ième édition

Nouvelle édition

Pour plus d’informations :

1Table des matières

Avant-propos

Chapitre 1Démarrer avec jQuery

1. Le retour du JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

2. Présentation de jQuery. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

3. Les points forts de jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

4. jQuery 2.0 ou jQuery 1.10 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

5. Mise en place de jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

6. Initier un script jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

7. Une première application jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

8. La documentation relative à jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . 26

9. Outils de développement et de débogage . . . . . . . . . . . . . . . . . . . . . . 27

Chapitre 2Les sélecteurs en jQuery

1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31

2. Les sélecteurs de base . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 312.1 Sélection par l'identifiant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 322.2 Sélection par le nom de la balise . . . . . . . . . . . . . . . . . . . . . . . . . 332.3 Sélection par la classe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35

Les éléments à télécharger sont disponibles à l'adresse suivante :http://www.editions-eni.fr

Saisissez la référence de l'ouvrage EI3JQU dans la zone de recherche et validez. Cliquez sur le titre du livre puis sur le bouton de téléchargement.

2Le framework JavaScript du Web 2.0

jQuery

3. Les sélecteurs hiérarchiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 373.1 Sélection des descendants . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 373.2 Sélection des enfants . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 383.3 Sélection des frères suivants . . . . . . . . . . . . . . . . . . . . . . . . . . . . 403.4 Sélection de l'élément suivant . . . . . . . . . . . . . . . . . . . . . . . . . . . 42

4. Les filtres jQuery de base . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 434.1 Le premier élément . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 434.2 Le dernier élément . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 454.3 Les éléments pairs. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 464.4 Les éléments impairs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 484.5 Un élément déterminé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 494.6 Les éléments suivants. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 504.7 Les éléments précédents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 524.8 Les balises de titre . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 534.9 Exclusion d'un élément . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 554.10 Les éléments selon le type . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56

5. Les filtres enfants . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 585.1 Le premier enfant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 585.2 Le dernier enfant. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 595.3 Le énième enfant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 615.4 Les enfants pairs et impairs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 635.5 Les enfants uniques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64

6. Les filtres de contenu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 666.1 Un texte donné. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 666.2 Un contenu vide . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 676.3 La qualité de parent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 696.4 Un sélecteur déterminé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70

7. Les filtres de visibilité . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 727.1 Élément visible . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 727.2 Élément caché . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73


8. Les filtres d'attribut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 758.1 L'attribut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 768.2 L'attribut avec une certaine valeur . . . . . . . . . . . . . . . . . . . . . . . 778.3 L'attribut qui n'a pas une certaine valeur . . . . . . . . . . . . . . . . . . 788.4 L'attribut dont la valeur commence par . . . . . . . . . . . . . . . . . . . 808.5 L'attribut dont la valeur finit par. . . . . . . . . . . . . . . . . . . . . . . . . 818.6 L'attribut dont la valeur contient . . . . . . . . . . . . . . . . . . . . . . . . 838.7 Les filtres multiples d'attribut . . . . . . . . . . . . . . . . . . . . . . . . . . . 84

9. Les sélecteurs et filtres de formulaires. . . . . . . . . . . . . . . . . . . . . . . . . 86

10. Les sélecteurs et les caractères spéciaux . . . . . . . . . . . . . . . . . . . . . . . 86

Chapitre 3Manipuler les attributs et les propriétés

1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87

2. Ajouter ou supprimer une classe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87

3. Vérifier la présence d'une classe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92

4. Basculer entre deux classes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95

5. Connaître la valeur d'un attribut. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99

6. Ajouter un attribut et sa valeur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102

7. Ajouter plusieurs attributs et leurs valeurs. . . . . . . . . . . . . . . . . . . . 106

8. Supprimer un attribut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109

9. Connaître l'attribut value. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111

10. Modifier l'attribut value . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115

11. Connaître la propriété d'un élément . . . . . . . . . . . . . . . . . . . . . . . . . 117

12. Modifier la propriété d'un élément . . . . . . . . . . . . . . . . . . . . . . . . . . 120

13. Supprimer la propriété d'un élément. . . . . . . . . . . . . . . . . . . . . . . . . 122


jQuery

Chapitre 4Manipuler les feuilles de style CSS

1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125

2. Accéder à une propriété de style . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125

3. Modifier les propriétés de style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130

4. Attribuer des propriétés de style . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134

5. Le dimensionnement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138

6. Le positionnement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142

7. Applications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1487.1 Redimensionner la taille des caractères. . . . . . . . . . . . . . . . . . . 1487.2 Zoom sur image avec une légende. . . . . . . . . . . . . . . . . . . . . . . 1527.3 Une infobulle avec jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158

Chapitre 5Les événements

1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165

2. Les gestionnaires d'événements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1652.1 Au clic de la souris . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1652.2 Au double clic . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1672.3 Le focus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1692.4 La perte du focus. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1712.5 La barre de défilement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1732.6 Le bouton de la souris. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1752.7 Le déplacement du curseur. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1782.8 L'entrée et la sortie du curseur . . . . . . . . . . . . . . . . . . . . . . . . . . 1802.9 Soumettre une requête. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1882.10 Les autres événements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190


3. Méthodes ou gestionnaires d'événements avancés. . . . . . . . . . . . . . 1913.1 Lier un événement à un objet (on) . . . . . . . . . . . . . . . . . . . . . . 1913.2 Lier un événement à un objet (bind) . . . . . . . . . . . . . . . . . . . . . 1943.3 Déléguer un événement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1963.4 Exécuter une fonction une seule fois. . . . . . . . . . . . . . . . . . . . . 1983.5 Déclencher un événement particulier . . . . . . . . . . . . . . . . . . . . 2003.6 Au survol de la souris . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202

4. Applications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2064.1 Un menu décalé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2064.2 Zoom sur vignette . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209

Chapitre 6Les effets

1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215

2. Afficher et cacher . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2162.1 Afficher et cacher du texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2172.2 Dérouler des listes imbriquées . . . . . . . . . . . . . . . . . . . . . . . . . . 221

3. Glisser verticalement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2273.1 Faire glisser une division . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2283.2 Un menu déroulant vertical . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231

4. Réaliser un effet de fondu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2354.1 Une apparition et disparition progressive . . . . . . . . . . . . . . . . . 2364.2 Jouer sur l'opacité . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239

5. Basculer d'un effet à l'autre . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2435.1 Illustration du basculement . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2455.2 Un menu accordéon . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247

6. Différer un effet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252

7. Créer une animation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2547.1 Une animation sur une division . . . . . . . . . . . . . . . . . . . . . . . . 2567.2 Une animation évoluée . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2597.3 Un effet original au survol de la souris . . . . . . . . . . . . . . . . . . . 263


jQuery

Chapitre 7Traverser le DOM

1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 267

2. Trouver les enfants. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269

3. Trouver les parents directs. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 271

4. Trouver tous les parents. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274

5. Trouver les parents jusqu'à . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276

6. Trouver les frères . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 278

7. Trouver le frère précédent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 280

8. Trouver les frères précédents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 283

9. Trouver les frères précédents jusqu'à . . . . . . . . . . . . . . . . . . . . . . . . 285

10. Trouver le frère suivant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287

11. Trouver les frères suivants . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 289

12. Trouver les frères suivants jusqu'à . . . . . . . . . . . . . . . . . . . . . . . . . . 291

13. Trouver le contenu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 294

14. Trouver certains parents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 296

15. Trouver certains descendants . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 298

16. Ajouter des éléments à la sélection . . . . . . . . . . . . . . . . . . . . . . . . . . 301

17. Une loupe pour agrandir les vignettes. . . . . . . . . . . . . . . . . . . . . . . . 303

Chapitre 8Manipuler le DOM

1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 307

2. Modifier le contenu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 307

3. Insérer à l’intérieur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3123.1 Première méthode. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3123.2 Seconde méthode . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 316

4. Insérer à l’extérieur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 320


5. Entourer un élément. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 324

6. Remplacer un élément . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 329

7. Enlever un élément . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3327.1 Supprimer un élément . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3327.2 Vider un élément . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 336

8. Copier un élément . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 340

9. Quelques applications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3439.1 Ajouter un pied de page et des liens de retour . . . . . . . . . . . . . 3439.2 Ajouter et enlever des éléments d'une liste . . . . . . . . . . . . . . . . 3489.3 Ajouter une icône aux liens externes. . . . . . . . . . . . . . . . . . . . . 351

Chapitre 9Filtrer le DOM

1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 353

2. Le filtrage des éléments du DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . 3532.1 Par une expression . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3532.2 Par une fonction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 358

3. Trouver un élément déterminé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 362

4. Trouver une séquence d'éléments . . . . . . . . . . . . . . . . . . . . . . . . . . . 366

5. Trouver un élément selon un critère . . . . . . . . . . . . . . . . . . . . . . . . . 370

6. Réduire au premier élément . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 374

7. Réduire au dernier élément . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 375

8. Réduire à un élément déterminé . . . . . . . . . . . . . . . . . . . . . . . . . . . . 376

9. Supprimer un élément . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 378

10. Former un tableau (Array) d'éléments . . . . . . . . . . . . . . . . . . . . . . . 382

11. Applications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38411.1 Filtrer une liste . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38411.2 Filtrer une liste selon deux critères . . . . . . . . . . . . . . . . . . . . . . 38911.3 Une navigation par onglets . . . . . . . . . . . . . . . . . . . . . . . . . . . . 395


jQuery

Chapitre 10AJAX vu par jQuery

1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 401

2. Les requêtes AJAX raccourcies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4022.1 Charger un fichier. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4022.2 Ne charger qu'en cas de modification . . . . . . . . . . . . . . . . . . . . 4062.3 Charger selon la méthode GET ou POST . . . . . . . . . . . . . . . . . 4072.4 Charger un script . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 411

3. La requête AJAX complète . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 413

4. Définir une requête par défaut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 420

5. Les événements associés à la requête. . . . . . . . . . . . . . . . . . . . . . . . . 4215.1 ajaxSend() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4215.2 ajaxStart() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4245.3 ajaxStop() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4255.4 ajaxSuccess() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4265.5 ajaxComplete() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4275.6 ajaxError() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 428

6. Les fonctions différées . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 429

7. Sérialiser les données . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 438

8. Applications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4438.1 Une icône de chargement. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4438.2 Un lexique en AJAX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 448

Chapitre 11Quelques méthodes utilitaires

1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 457

2. Éviter les conflits . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 457

3. Itérations en jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 459

4. Stocker et reprendre des données . . . . . . . . . . . . . . . . . . . . . . . . . . . 462

5. Retrouver un élément du DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . 464


6. Rechercher un élément donné . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 467

7. Connaître le nombre d'éléments . . . . . . . . . . . . . . . . . . . . . . . . . . . . 468

8. Convertir en Array les éléments trouvés. . . . . . . . . . . . . . . . . . . . . . 470

Chapitre 12Les formulaires

1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 473

2. Les sélecteurs de formulaires . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 473

3. Les filtres de sélection. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4783.1 Les éléments cochés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4783.2 Les éléments sélectionnés. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 481

4. Applications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4844.1 Sélectionner toutes les cases à cocher . . . . . . . . . . . . . . . . . . . . 4844.2 Confirmer une commande . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4874.3 Un formulaire d'inscription original . . . . . . . . . . . . . . . . . . . . . 490

Chapitre 13Les plug-ins jQuery

1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 495

2. Concevoir un plug-in jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4952.1 Aspects théoriques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4952.2 Une application pratique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 497

3. Utiliser un plug-in jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 499

4. Quelques plug-ins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5024.1 jQuery UI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 502

4.1.1 Préalable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5024.1.2 Installation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5034.1.3 Le menu avec onglets . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5044.1.4 Le menu en accordéon . . . . . . . . . . . . . . . . . . . . . . . . . . . 5054.1.5 Les calendriers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 507


jQuery

4.1.6 Les fenêtres de dialogue . . . . . . . . . . . . . . . . . . . . . . . . . . 5094.1.7 Les boutons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5104.1.8 Les infobulles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5114.1.9 Les curseurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5124.1.10La barre de progression. . . . . . . . . . . . . . . . . . . . . . . . . . . 5134.1.11Les compteurs numériques . . . . . . . . . . . . . . . . . . . . . . . 5144.1.12Le glisser/déposer (drag/drop) . . . . . . . . . . . . . . . . . . . . . 515

4.2 Des bordures variées . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5174.3 Des textes arrondis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5194.4 Des infobulles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5204.5 Dévoiler les mots de passe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5214.6 Zoomer sur une image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5234.7 Agrandir une vignette. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5254.8 Un carrousel d'images. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5264.9 Un menu façon Mac. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5284.10 Des graphiques à partir d'un tableau. . . . . . . . . . . . . . . . . . . . . 5294.11 Trier un tableau de données. . . . . . . . . . . . . . . . . . . . . . . . . . . . 534

Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 539

31

Chapitre 2Les sélecteurs en jQuery

Les sélecteurs en jQuery1. IntroductionLes sélecteurs sont l'un des aspects les plus importants de la librairie jQuery.Ceux-ci utilisent une syntaxe qui n'est pas sans rappeler celle des feuilles destyle CSS. Ils permettent aux concepteurs d'identifier rapidement et aisémentn'importe quel élément de la page et d'y appliquer les méthodes spécifiques àjQuery.

La bonne compréhension de ces sélecteurs jQuery est un élément clé pour labonne compréhension et utilisation de jQuery.

Un site Web illustre à merveille le rôle de ces sélecteurs. Il est sûrement utilede le consulter à l'adresse : www.codylindley.com/jqueryselectors/

2. Les sélecteurs de baseCes sélecteurs basiques de jQuery ne sont en fait qu'une reformulation desméthodes getElementById, getElementsByClassName et getEle-mentsByTagName du JavaScript traditionnel.

La notation reprise par jQuery présente les avantages d'être plus concise etbeaucoup plus intuitive.

© E

diti

ons

ENI -

All

righ

ts r

eser

ved


jQuery

Ces sélecteurs basiques sont dans la pratique largement utilisés dans lesscripts jQuery. Leur assimilation se révèle indispensable pour la bonne com-préhension des multiples exemples de cet ouvrage.

2.1 Sélection par l'identifiant

#identifiant

Sélectionne l'élément (unique) spécifié par l'attribut id="identifiant".

$("#box") : sélectionne l'élément dont l'id est box.

C'est la notation jQuery de getElementById du JavaScript classique.

Rappelons que cet identifiant doit être unique dans la page. Si, par erreur, cen'était pas le cas, jQuery reprend le premier élément doté de cet identifiant.

Exemple

Entourons d'une bordure le second paragraphe, dont l'identifiant est "deux".

Soit le fichier Html suivant :

<!doctype html><html lang="fr"><head><meta charset="utf-8"><title>jQuery</title><script src="jquery.js"></script><script>$(document).ready(function(){

33Les sélecteurs en jQueryChapitre 2

$("#deux").css("border","1px solid black");});</script><style>p { width: 200px; padding: 3px;}</style></head><body><p>Paragraphe 1</p><p id="deux">Paragraphe 2</p><p>Paragraphe 3</p></body></html>

Détaillons le script jQuery.

$(document).ready(function(){

Initialisation de jQuery. Le script est prêt à opérer dès le chargement duDOM.

$("#deux").css("border","1px solid black");

Il est appliqué à l'élément dont l'id est "deux" ($("#deux")) la méthodejQuery qui permet de modifier les propriétés CSS, soit ici d'ajouter une bor-dure (css("border","1px solid black")). Cette méthode jQuerycss() sera étudiée en détail au chapitre Manipuler les feuilles de style CSS.

});

Fin du script.

2.2 Sélection par le nom de la balise

élément

Sélectionne tous les éléments (ou balises) dont le nom est spécifié.

$("div") : sélectionne toutes les divisions <div> de la page.

© E

diti

ons

ENI -

All

righ

ts r

eser

ved


jQuery

C'est la notation jQuery de getElementsByTagName du JavaScript clas-sique.

Exemple

Entourons d'une bordure tous les paragraphes du document Html.

<!doctype html><html lang="fr"><head><meta charset="utf-8"><title>jQuery</title><script src="jquery.js"></script><script>$(document).ready(function(){$("p").css("border","1px solid black");});</script><style>p { width: 200px; padding: 3px;}div { padding: 3px;}</style></head><body><p>Paragraphe 1</p><p>Paragraphe 2</p><div>Division 1</div></body></html>

35Les sélecteurs en jQueryChapitre 2

$("p").css("border","1px solid black");

jQuery sélectionne toutes les balises de paragraphe <p> ($("p")) et appliqueà celles-ci une bordure par la méthode css().

2.3 Sélection par la classe

.classe

Sélectionne tous les éléments (ou balises) avec la classe spécifiée.

$(".texte") : sélectionne tous les éléments dotés de l'attributclass="texte".

Exemple

Entourons d'une bordure le paragraphe doté de la classe gras.

<!doctype html><html lang="fr"><head><meta charset="utf-8"><title>jQuery</title><script src="jquery.js"></script><script>$(document).ready(function(){$(".gras").css("border","1px solid black");});</script><style>p { width: 200px;

© E

diti

ons

ENI -

All

righ

ts r

eser

ved


jQuery

padding: 3px;}.gras { font-weight: bold;}</style></head><body><p class="gras">Paragraphe 1</p><p>Paragraphe 2</p><p>Paragraphe 3</p></body></html>

$(".gras").css("border","1px solid black");

La balise avec la classe gras est sélectionnée par jQuery ($(".gras")). Unebordure est alors appliquée.

Commentaires

On aurait pu noter : $("p.gras").css("border","1px solidblack"). Ainsi, jQuery sélectionne les balises <p> avec la classe gras.

Selon les experts, cette notation serait plus efficace car jQuery peut retrouverdirectement les balises <p> dans le DOM et ensuite filtrer celles qui possèdentune classe gras.

La notation avec plusieurs classes est envisageable.$(".classe1.classe2") sélectionne tous les éléments qui ont commenom de classe classe1 ou classe2.

Le sélecteur étoile * permet de sélectionner tous les éléments.

$("*").css("border","1px solid black");

jQuery permet d'associer plusieurs sélecteurs.

$("div,span,p.nom_classe").css("border","1px solid black");

jquery ième édition le framework javascript du web 2.0 le framework javascript...

Documents