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 (au détriment des performances).

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 (entre autres) une fonction, qui permet d'accéder aux balises de la page Web.

Par exemple :

Le sélecteur passé en paramètre à la fonction $ : est identique aux sélecteurs CSS 3. Vous pouvez donc écrire :

Plus de détails sur Openclassroom : Sélection d'éléments / Plus loin dans la sélection d'éléments.

Inutile de testez ces codes, ils ne produisent aucun effet (sauf à vérifier qu'il n'y a pas d'erreur Javascript dans la console). C'est au chapitre suivant qu'on va vraiment agir sur la page Web.

Écrivez la fonction JQuery qui sélectionne toutes les balises table dans la page.

Votre réponse n°1

Écrivez la fonction JQuery qui sélectionne toutes les balises a de classe menu.

Votre réponse n°2

Écrivez la fonction JQuery qui sélectionne toutes les balises img contenues dans le div d'id trombinoscope.

Votre réponse n°3

Écrivez la fonction JQuery qui sélectionne toutes les balises table qui possède un attribut border.

Votre réponse n°4

Écrivez la fonction JQuery qui sélectionne toutes les balises a dont l'attribut href commence par http://.

Votre réponse n°5

Premières méthodes JQuery : les getters et les setter

L'intérêt de sélectionner des balises, c'est qu'on peut ensuite leur appliquer des méthodes JQuery. Par exemple :

Comme souvent en programmation objet, JQuery fournit les méthodes pour lire (getter) des valeurs, ou les modifier (setters).

On peut modifier : le contenu texte d'une balise, son contenu HTML (l'équivalent de innerHTML en Javascript), la valeur de ses attributs HTML (par exemple src, href), et la valeur de ses propriétés CSS (par exemple font-weight, background-color).

Par exemple, voici comment lire et modifier le contenu texte d'un div (méthode text()) :

Voici comment lire et modifier le contenu HTML d'un span (méthode html()) :

Voici comment lire et modifier l'attribut src d'une image (méthode attr()) :

Voici comment lire et modifier la propriété CSS background-color du body (méthode css()) :

Écrivez le code JQuery qui ajoute une bordure CSS solid 3px red à la zone de texte input#login. C'est le moment de commencer à tester vos codes. Je vous conseille, dans un premier temps, de mettre vos codes JQuery juste avant le /body. L'idée est que JQuery, comme Javascript, ne peuvent agir QUE sur des balises qui ont déjà été chargée par le navigateur.
Votre réponse n°6

Vous ne voyez pas l'intérêt ce cette question et de ce qu'on fait jusqu'à maintenant car, vous dites-vous, on peut très bien mettre cette propriété dans la feuille de style au démarrage. L'intérêt sera de pouvoir appliquer ces styles dynamiquement, sur des événements Javascript. Par exemple, lorsque l'utilisateur veut choisir un login qui existe déjà, on applique cette bordure rouge.

D'autres méthodes JQuery

Voici quelques autres méthodes :

Un exemple COMPLET pour ajouter le texte [citation] au début de chaque paragraphe qui a la classe citation. L'ajout se fait automatiquement au chargement de la page, grâce à la méthode prepend(). Vous pouvez l'essayer, le code est complet, donc un copier-coller suffit :

Réalisez un exemple complet et fonctionnel qui, lorsque la page est chargée, estompe lentement (fadeOut('slow')) toutes les balises qui possèdent la classe discret :

Votre réponse n°7

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 image :

Par exemple, pour le survol de liens hypertextes :

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

Quand le document a fini de se charger :

Dans une galerie de photos, c'est sympathique de faire un effet de transformation CSS pour agrandir ou pivoter la photo quand on la survole avec la souris.

Commencez par créer, sur toutes les images de la page, l'événement onmouseover.

Le traitement consistera à appliquer à l'image la propriété CSS transform avec une valeur de rotate(0.1turn) (rotation), ou scale(1.2) (zoom);

Sur l'événement onmouseout (quand la souris quitte l'image), vous restaurez la valeur d'origine (rotate(0) ou scale(1)).

Votre réponse n°8

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.

Reprenez une de vos fonctionnalité AJAX (villes par département, vérification du choix du login, ou dans vos projets perso) et adaptez-le en JQuery.

Collez ici la vieille version AJAX/Javascript (uniquement la partie appelante, puisque le script PHP n'est pas censé bouger) :

Votre réponse n°9

Collez ici la nouvelle version AJAX/JQuery :

Votre réponse n°10

Parcourir le DOM avec JQuery

Ce paragraphe n'a pas encore été modifié pour la mise à jour du 8 au 9 janvier 2018, bientôt !

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

Exemples de codes JQuery

Ouvrir les liens externes dans un nouvel onglet

Le code JQuery suivant fait en sorte que tous les liens externes (commençant par http:// ou https://) s'ouvrent dans un nouvel onglet.

Le sélecteur permet de dire : "toutes les balises <a> dont le href commence par http:// ou https://".

L'action consiste à ajouter l'attribut target=_blank à ces balises, ce qui entraîne l'ouverture du lien dans un nouvel onglet.

Automatiser les images survolées

Les images survolées sont des images qui changent d'aspect (donc de src) lorsque la souris passe dessus.

Ici, l'automatisation consiste à créer l'événement qui fait que lorsque l'image de classe .survol est survolée (onmouseover) :
la source : src=mon_image.ext
devient : src=mon_imageUp.ext

Lorsque la souris quitte l'image (onmouseout), cette dernière reprend son aspect normal.

Création d'un sommaire automatique

JQuery va aller lire tous les titres <h1> et <h2>. Il va construire automatiquement un sommaire à partir de ces titres.

Le sommaire est construit dans le div qui a pour id sommaire.

Voici une première version simple où, dans le sommaire, les h1 deviennent du texte en gras, et les h2 deviennent du texte normal.

Une version plus complexe mais le résultat est plus riche : la structure HTML générée dans le sommaire est une liste non-ordonnée (<ol>) pour les titres h1, et des sous-listes non-ordonnées pour les h2.

1000 itérations on été chronométrées à 2470 millisecondes en JQuery, contre 604 millisecondes en Javascript. Cela montre la perte de performance avec JQuery (4x plus lent ici).