JQuery
Réponse AJAX

Introduction à JQuery

JQuery a été créé en 2006 par John Resig. C'est une des librairies les plus utilisées au monde.

JQuery est une sur-couche de Javascript. Cela implique que la librairie JQuery n'ajoute aucune nouvelle fonctionnalité à Javascript, elle en simplifie seulement l'écriture.

Vous pouvez importer JQuery avec la ligne HTML suivante :

La bible de la documentation JQuery sur le site jquery.com.

La fonction $

En Javascript, on peut nommer une fonction (ou une variable) $. Ça peut paraître surprenant, car ce n'est le cas dans aucun autre langage de programmation. Et pourtant, le code suivant fonctionne :

JQuery utilise cette notation comme point d'entrée dans la librairie. En effet, dans JQuery, $ représente :

Les méthodes JQuery

Une fois les balises sélectionnées, vous pouvez lui appliquer une méthode JQuery. Par exemple :

Un exemple pour appliquer une fonction à plusieurs balises :

Un exemple pour construire un sommaire automatique qui tient compte des <h1> et des <h2> :

Gérer les événements avec JQuery

Pour gérer un événement, il existe la méthode on(string événement, function).

Par exemple, pour le clic sur une balise :

Par exemple, pour le survol d'une balise :

Les événements sont les mêmes que ceux de Javascript.

Quand le document a fini de se charger :

Lancer une requête AJAX avec JQuery

Vous pouvez calquer vos requêtes AJAX sur ce modèle :

Retrouvez toutes les autres options sur W3schools.com.

Parcourir le DOM avec JQuery

JQuery propose des méthodes qui permettent de naviguer dans l'arborescence des balises HTML. Par exemple :

Entraînements

Écrivez le code JQuery qui fait en sorte que tous les liens externes (commençant par http:// ou https://) s'ouvre dans un nouvel onglet

Votre réponse n°1

Écrivez le code JQuery qui fait en sorte que toutes les images ayant la classe survol se voient affecté un événement qui, quand on survole l'image (mouseover), remplace l'attribut src=image.ext par src=imageUp.ext.

Votre réponse n°2