jQuery

jQuery est l'une des bibliothèques JavaScript les plus utilisées au monde.

En 2006, lors de sa sortie, tous les principaux navigateurs géraient JavaScript de

manière légèrement différente. jQuery a simplifié le processus d'écriture de
JavaScript côté client et a également garanti que votre code fonctionnait de la
même manière dans tous les navigateurs.

Dans ce cours, vous apprendrez à utiliser jQuery pour sélectionner, supprimer,

cloner et modifier différents éléments de la page.

1. Bibliothèques de développement front-end

2. jQuery

InstructionsCodeConsoleAperçu

Découvrez comment fonctionnent les balises de script et Document

Ready
Nous sommes maintenant prêts à apprendre jQuery, l'outil JavaScript le plus
populaire de tous les temps.

Avant de pouvoir commencer à utiliser jQuery, nous devons ajouter quelques

éléments à notre code HTML.

Tout d’abord, ajoutez un scriptélément en haut de votre page. Assurez-vous de le

fermer sur la ligne suivante.

Votre navigateur exécutera n'importe quel JavaScript dans un scriptélément, y

compris jQuery.

Dans votre scriptélément, ajoutez ce code : $(document).ready(function() {à

votre script. Fermez-le ensuite sur la ligne suivante (toujours à l'intérieur de
votre scriptélément) avec :});

Nous en apprendrons davantage functionsplus tard. La chose importante à savoir est

que le code que vous y mettez functions’exécutera dès que votre navigateur aura
chargé votre page.

Ceci est important car sans votre document ready function, votre code peut s'exécuter
avant que votre HTML ne soit rendu, ce qui provoquerait des bugs.
 Essais
 En attendant :Vous devez créer un scriptélément en vous assurant qu'il est
valide et qu'il possède une balise de fermeture.
 En attendant :Vous devez ajouter $(document).ready(function() {au début de
votre scriptélément.
 En attendant :Vous devriez fermer votre $(document).ready(function()
{fonction avec});

1. ibliothèques de développement front-end

2. jQuery

InstructionsCodeConsoleAperçu

Cibler les éléments HTML avec des sélecteurs à l'aide de jQuery

Nous avons maintenant une document readyfonction.

Écrivons maintenant notre première instruction jQuery. Toutes les fonctions

jQuery commencent par un $, généralement appelé opérateur de signe dollar ou
bling.

jQuery sélectionne souvent un élément HTML avec un selector , puis fait quelque
chose sur cet élément.

Par exemple, faisons buttonrebondir tous vos éléments. Ajoutez simplement ce code
dans votre fonction document ready :

$("button").addClass("animated bounce");
Notez que nous avons déjà inclus la bibliothèque jQuery et la bibliothèque
Animate.css en arrière-plan afin que vous puissiez les utiliser dans l'éditeur. Vous
utilisez donc jQuery pour appliquer la bounceclasse Animate.css à
vos buttonéléments.

Essais
 En attendant :Vous devez utiliser la fonction jQuery addClass()pour donner
les classes animatedet bouncevos buttonéléments.
 En attendant :Vous devez uniquement utiliser jQuery pour ajouter ces
classes à l'élément.
 En attendant :Votre code jQuery doit être dans la $
(document).ready();fonction.

1. ibliothèques de développement front-end

 2. jQuery

InstructionsCodeConsoleAperçu

Cibler les éléments par classe à l'aide de jQuery

buttonVous voyez comment nous avons fait rebondir tous vos éléments ? Nous les
avons sélectionnés avec $("button"), puis nous leur avons ajouté quelques classes
CSS avec .addClass("animated bounce");.

Vous venez d'utiliser la fonction de jQuery .addClass(), qui permet d'ajouter des
classes aux éléments.

Tout d’abord, ciblons vos divéléments avec la classe wellen utilisant le $

(".well")sélecteur.

Notez que, tout comme pour les déclarations CSS, vous tapez a .avant le nom de la
classe.

Utilisez ensuite .addClass()la fonction de jQuery pour ajouter les

classes animatedet shake.

Par exemple, vous pouvez faire text-primarytrembler tous les éléments de la classe
en ajoutant ce qui suit à votredocument ready function :

$(".text-primary").addClass("animated shake");

Essais
 En attendant :Vous devez utiliser la fonction jQuery addClass()pour donner
aux classes animatedet shakeà tous vos éléments la classe well.
 En attendant :Vous devez uniquement utiliser jQuery pour ajouter ces
classes à l'élément.

1. èques de développement front-end

2. jQuery

InstructionsCodeConsoleAperçu

Cibler les éléments par identifiant à l'aide de jQuery

Vous pouvez également cibler des éléments par leurs attributs id.
Ciblez d’abord votre buttonélément avec l’identifiant target3en utilisant le $
("#target3")sélecteur.

Notez que, tout comme pour les déclarations CSS, vous tapez a #avant le nom de
l'identifiant.

Utilisez ensuite .addClass()la fonction de jQuery pour ajouter les

classes animatedet fadeOut.

Voici comment faire disparaître l' buttonélément portant l'identifiant :target6

$("#target6").addClass("animated fadeOut");

Essais
 En attendant :Vous devez sélectionner l' buttonélément avec le idof target3et
utiliser la addClass()fonction jQuery pour lui donner la classe of animated.
 En attendant :Vous devez cibler l'élément avec l'identifiant target3et utiliser
la fonction jQuery addClass()pour lui donner la classe fadeOut.
 En attendant :Vous devez uniquement utiliser jQuery pour ajouter ces
classes à l'élément.

1. liothèques de développement front-end

2. jQuery

InstructionsCodeConsoleAperçu

Supprimez vos fonctions jQuery

Ces animations étaient sympas au début, mais maintenant elles deviennent un peu
distrayantes.

Supprimez ces trois fonctions jQuery de votre document ready function, mais laissez-
vous document ready functionintact.

Essais
 En attendant :Vos trois fonctions jQuery doivent être supprimées de
votre document ready function.
 En attendant :Vous devez laisser votre scriptélément intact.
 En attendant :Vous devez laisser votre $(document).ready(function() {au début
de votre scriptélément.
  En attendant :Vous devez laisser la document.readyfermeture de la
fonction })intacte.
 En attendant :Vous devez laisser scriptla balise de fermeture de votre
élément intacte.

1. othèques de développement front-end

2. jQuery

InstructionsCodeConsoleAperçu

Ciblez le même élément avec plusieurs sélecteurs jQuery

Vous connaissez maintenant trois façons de cibler des éléments : par type : $
("button"), par classe : $(".btn")et par id $("#target1").

Bien qu'il soit possible d'ajouter plusieurs classes en un seul .addClass()appel,

ajoutons-les au même élément de trois manières distinctes .

En utilisant .addClass(), ajoutez une seule classe à la fois au même élément, de trois
manières différentes :

Ajoutez la animatedclasse à tous les éléments de type button.

Ajoutez la shakeclasse à tous les boutons avec class .btn.

Ajoutez la btn-primaryclasse au bouton avec id #target1.

Remarque : Vous ne devez cibler qu'un seul élément et ajouter une seule classe à
la fois. Au total, vos trois sélecteurs individuels finiront par ajouter les trois
classes shake, animatedet btn-primaryà #target1.

Essais
 En attendant :Votre code doit utiliser le $("button")sélecteur.
 En attendant :Votre code doit utiliser le $(".btn")sélecteur.
 En attendant :Votre code doit utiliser le $("#target1")sélecteur.
 En attendant :Vous ne devez ajouter qu'une seule classe avec chacun de vos
trois sélecteurs.
 En attendant :Votre #target1élément doit avoir les
classes animated‚ shakeet btn-primary.
 En attendant :Vous devez uniquement utiliser jQuery pour ajouter ces
classes à l'élément.

1. Bibliothèques de développement front-end

 2. jQuery

InstructionsCodeConsoleAperçu

Supprimer des classes d'un élément avec jQuery

De la même manière que vous pouvez ajouter des classes à un élément avec la
fonction jQuery addClass(), vous pouvez les supprimer avec la fonction
jQuery removeClass().

Voici comment procéder pour un bouton spécifique :

$("#target2").removeClass("btn-default");
Supprimons la btn-defaultclasse de tous nos buttonéléments.

Essais
 En attendant :La btn-defaultclasse doit être supprimée de tous
vos buttonéléments.
 En attendant :Vous devez uniquement utiliser jQuery pour supprimer cette
classe de l'élément.
 En attendant :Vous devez uniquement supprimer la btn-defaultclasse.

1. iothèques de développement front-end

2. jQuery

InstructionsCodeConsoleAperçu

Changer le CSS d'un élément à l'aide de jQuery

On peut également changer le CSS d'un élément HTML directement avec jQuery.

jQuery a une fonction appelée .css()qui vous permet de changer le CSS d'un
élément.

Voici comment nous changerions sa couleur en bleu :

$("#target1").css("color", "blue");

Ceci est légèrement différent d'une déclaration CSS normale, car la propriété CSS
et sa valeur sont entre guillemets et séparées par une virgule au lieu de deux points.

Supprimez vos sélecteurs jQuery en laissant un fichier document ready function.

Sélectionnez target1et changez sa couleur en rouge.

Essais
 En attendant :Votre target1élément doit avoir du texte rouge.
 En attendant :Vous devez uniquement utiliser jQuery pour ajouter ces
classes à l'élément.
Aller au contenu
Menu
Profil

1. Bibliothèques de développement front-end

2. jQuery

InstructionsCodeConsoleAperçu

Désactiver un élément à l'aide de jQuery

Vous pouvez également modifier les propriétés non CSS des éléments HTML avec
jQuery. Par exemple, vous pouvez désactiver les boutons.

Lorsque vous désactivez un bouton, il devient grisé et il n'est plus possible de

cliquer dessus.

jQuery a une fonction appelée .prop()qui vous permet d'ajuster les propriétés des
éléments.

Voici comment désactiver tous les boutons :

$("button").prop("disabled", true);
Désactivez uniquement le target1bouton.

Essais
 En attendant :Votre target1bouton devrait être désactivé.
 En attendant :Aucun autre bouton ne doit être désactivé.
 En attendant :Vous devez uniquement utiliser jQuery pour ajouter ces
classes à l'élément.
Courir
Réinitialiser
Aide
Déplacez l'aperçu vers une nouvelle fenêtre et concentrez-le
Navigué pour désactiver un élément à l'aide de jQuery
Aller au contenu
Menu
Profil

1. Bibliothèques de développement front-end

2. jQuery

InstructionsCodeConsoleAperçu

Modifier le texte à l'intérieur d'un élément à l'aide de jQuery

À l'aide de jQuery, vous pouvez modifier le texte entre les balises de début et de
fin d'un élément. Vous pouvez même modifier le balisage HTML.

jQuery a une fonction appelée .html()qui vous permet d'ajouter des balises HTML et
du texte dans un élément. Tout contenu précédemment présent dans l'élément sera
complètement remplacé par le contenu que vous fournissez à l'aide de cette
fonction.

Voici comment réécrire et mettre en valeur le texte de notre titre :

$("h3").html("<em>jQuery Playground</em>");

jQuery a également une fonction similaire appelée .text()qui modifie uniquement le

texte sans ajouter de balises. En d’autres termes, cette fonction n’évaluera aucune
balise HTML qui lui est transmise, mais la traitera plutôt comme le texte par lequel
vous souhaitez remplacer le contenu existant.

Changez le bouton avec l'identifiant target4en mettant l'accent sur son texte.

Consultez notre article d'actualité sur <em> pour découvrir la différence

entre <i>et <em>et leurs utilisations.

Notez que même si la <i>balise a traditionnellement été utilisée pour mettre en

valeur le texte, elle a depuis été adoptée pour être utilisée comme balise pour les
icônes. La <em>balise est désormais largement acceptée comme balise
d’accentuation. L’un ou l’autre fonctionnera pour ce défi.

Essais
 En attendant :Vous devez mettre en valeur le texte de votre target4bouton en
ajoutant des balises HTML.
 En attendant :Le texte devrait par ailleurs rester inchangé.
 En attendant :Vous ne devez modifier aucun autre texte.
 En attendant :Vous devriez utiliser .html()et non .text().
 En attendant :Vous devez sélectionner button id="target4"avec jQuery.
Courir
Réinitialiser
Aide
Déplacez l'aperçu vers une nouvelle fenêtre et concentrez-le
Navigué pour modifier le texte à l'intérieur d'un élément à l'aide de jQuery

1. ibliothèques de développement front-end

2. jQuery

InstructionsCodeConsoleAperçu

Supprimer un élément à l'aide de jQuery

Supprimons maintenant un élément HTML de votre page à l'aide de jQuery.

jQuery a une fonction appelée .remove()qui supprimera entièrement un élément

HTML.

Supprimez l' #target4élément de la page à l'aide de la .remove()fonction.

Essais
 En attendant :Vous devez utiliser jQuery pour supprimer
votre target4élément de votre page.
 En attendant :Vous devez uniquement utiliser jQuery pour supprimer cet
élément.

1. bliothèques de développement front-end

 2. jQuery

InstructionsCodeConsoleAperçu

Utilisez appendTo pour déplacer des éléments avec jQuery

Essayons maintenant de déplacer des éléments de l'un divà l'autre.

jQuery a une fonction appelée appendTo()qui vous permet de sélectionner des

éléments HTML et de les ajouter à un autre élément.

Par exemple, si nous voulions passer target4de notre puits droit à notre puits
gauche, nous utiliserions :

$("#target4").appendTo("#left-well");
Déplacez votre target2élément de votre left-wellvers votre right-well.

Essais
 En attendant :Votre target2élément ne doit pas être à l'intérieur de votre left-
well.
 En attendant :Votre target2élément doit être à l'intérieur de votre right-well.
 En attendant :Vous ne devez utiliser jQuery que pour déplacer ces éléments
Aller au contenu
Menu
Profil

1. Bibliothèques de développement front-end

2. jQuery

InstructionsCodeConsoleAperçu

Cloner un élément à l'aide de jQuery

En plus de déplacer des éléments, vous pouvez également les copier d'un endroit à
un autre.

jQuery a une fonction appelée clone()qui fait une copie d'un élément.

Par exemple, si nous voulions copier target2de notre left-wellvers notre right-well, nous
utiliserions :
$("#target2").clone().appendTo("#right-well");

Avez-vous remarqué que cela implique de coller deux fonctions jQuery ensemble ?
C'est ce qu'on appelle le chaînage de fonctions et c'est un moyen pratique de faire
avancer les choses avec jQuery.

Clonez votre target5élément et ajoutez-le à votre left-well.

Essais
 En attendant :Votre target5élément doit être à l'intérieur de votre right-well.
 En attendant :Une copie de votre target5élément doit également se trouver
dans votre fichier left-well.
 En attendant :Vous ne devez utiliser jQuery que pour déplacer ces éléments.
Courir
Réinitialiser
Aide
Déplacez l'aperçu vers une nouvelle fenêtre et concentrez-le
Navigué pour cloner un élément à l'aide de jQuery
Aller au contenu
Menu
Profil

1. Bibliothèques de développement front-end

2. jQuery

InstructionsCodeConsoleAperçu

Cibler le parent d'un élément à l'aide de jQuery

Chaque élément HTML possède un parentélément à partir duquel il inheritspossède
des propriétés.

Par exemple, l' h3élément de votre jQuery Playgrounda l'élément parent de <div
class="container-fluid">, qui lui-même a l'élément parent de body.

jQuery a une fonction appelée parent()qui vous permet d'accéder au parent de

l'élément que vous avez sélectionné.
Voici un exemple de la façon dont vous utiliseriez la parent()fonction si vous
souhaitiez donner à l'élément parent de l' left-wellélément une couleur d'arrière-plan
bleue :

$("#left-well").parent().css("background-color", "blue")
Donnez au parent de l' #target1élément une couleur d'arrière-plan rouge.

Essais
 En attendant :Votre left-wellélément doit avoir un fond rouge.
 En attendant :Vous devez utiliser la .parent()fonction pour modifier cet
élément.
 En attendant :La .parent()méthode doit être appelée sur l' #target1élément.
 En attendant :Vous devez uniquement utiliser jQuery pour ajouter ces
classes à l'élément.
Courir
Réinitialiser
Aide
Déplacez l'aperçu vers une nouvelle fenêtre et concentrez-le
Navigation vers cibler le parent d'un élément à l'aide de jQuery
Aller au contenu
Menu
Profil

1. Bibliothèques de développement front-end

2. jQuery

InstructionsCodeConsoleAperçu

Cibler un enfant spécifique d'un élément à l'aide de jQuery

Vous avez vu pourquoi les attributs id sont si pratiques pour le ciblage avec les
sélecteurs jQuery. Mais vous n’aurez pas toujours des identifiants aussi soignés
avec lesquels travailler.

Heureusement, jQuery propose d'autres astuces pour cibler les bons éléments.
jQuery utilise des sélecteurs CSS pour cibler les éléments. Le target:nth-
child(n)sélecteur CSS vous permet de sélectionner tous les nièmes éléments avec la
classe ou le type d'élément cible.

Voici comment attribuer la classe de rebond au troisième élément de chaque puits :

$(".target:nth-child(3)").addClass("animated bounce");
Faites rebondir le deuxième enfant de chacun de vos éléments de puits. Vous devez
sélectionner les enfants des éléments avec la targetclasse.

Essais
 En attendant :Le deuxième élément de vos targetéléments devrait rebondir.
 En attendant :Seuls deux éléments doivent rebondir.
 En attendant :Vous devez utiliser le :nth-child()sélecteur pour modifier ces
éléments.
 En attendant :Vous devez uniquement utiliser jQuery pour ajouter ces
classes à l'élément.
Courir
Réinitialiser
Aide
Déplacez l'aperçu vers une nouvelle fenêtre et concentrez-le
Navigué pour cibler un enfant spécifique d'un élément à l'aide de jQuery
Aller au contenu
Menu
Profil

1. Bibliothèques de développement front-end

2. jQuery

InstructionsCodeConsoleAperçu

Cibler un enfant spécifique d'un élément à l'aide de jQuery

Vous avez vu pourquoi les attributs id sont si pratiques pour le ciblage avec les
sélecteurs jQuery. Mais vous n’aurez pas toujours des identifiants aussi soignés
avec lesquels travailler.
Heureusement, jQuery propose d'autres astuces pour cibler les bons éléments.

jQuery utilise des sélecteurs CSS pour cibler les éléments. Le target:nth-
child(n)sélecteur CSS vous permet de sélectionner tous les nièmes éléments avec la
classe ou le type d'élément cible.

Voici comment attribuer la classe de rebond au troisième élément de chaque puits :

$(".target:nth-child(3)").addClass("animated bounce");
Faites rebondir le deuxième enfant de chacun de vos éléments de puits. Vous devez
sélectionner les enfants des éléments avec la targetclasse.

Essais
 En attendant :Le deuxième élément de vos targetéléments devrait rebondir.
 En attendant :Seuls deux éléments doivent rebondir.
 En attendant :Vous devez utiliser le :nth-child()sélecteur pour modifier ces
éléments.
 En attendant :Vous devez uniquement utiliser jQuery pour ajouter ces
classes à l'élément.
Courir
Réinitialiser
Aide
Déplacez l'aperçu vers une nouvelle fenêtre et concentrez-le
Navigué pour cibler un enfant spécifique d'un élément à l'aide de jQuery

1. Bibliothèques de développement front-end

2. jQuery

InstructionsCodeConsoleAperçu

Cibler des éléments pairs à l'aide de jQuery

Vous pouvez également cibler des éléments en fonction de leurs positions à l'aide
des sélecteurs :oddou :even.

Notez que jQuery est indexé à zéro, ce qui signifie que le premier élément d'une
sélection a une position de 0. Cela peut être un peu déroutant car, contre-
intuitivement, :oddsélectionne le deuxième élément (position 1), le quatrième
élément (position 3) et bientôt.
Voici comment cibler tous les éléments impairs avec classe targetet leur donner des
classes :

$(".target:odd").addClass("animated shake");
Essayez de sélectionner tous les targetéléments pairs et de leur attribuer les classes
de animatedet shake. N'oubliez pas que cela fait même référence à la position des
éléments en pensant à un système de base zéro.

Essais
 En attendant :Tous les targetéléments que jQuery considère comme égaux
devraient trembler.
 En attendant :Vous devez utiliser le :evensélecteur pour modifier ces
éléments.
 En attendant :Vous devez uniquement utiliser jQuery pour ajouter ces
classes à l'élément.
Menu

Profil

1. Bibliothèques de développement front-end

2. jQuery

InstructionsCodeConsoleAperçu

Utilisez jQuery pour modifier la page entière

Nous avons fini de jouer avec notre terrain de jeu jQuery. Démolissons-le !

jQuery peut bodyégalement cibler l'élément.

Voici comment nous ferions disparaître le corps entier :$("body").addClass("animated

fadeOut");

Mais faisons quelque chose de plus dramatique. Ajoutez les classes animatedet hingeà
votre bodyélément.

Essais
 En attendant :Vous devez ajouter les classes animatedet hingeà
votre bodyélément.