jQuery

jQuery est une bibliothèque de Javascripts. Elle rassemble des dizaines de fonctions pré-programmées pour faciliter l’utilisation du langage Javascript.

Cet exemple de script modifie la couleur de fond du bloc jaune en dessous lorsqu’on clique dedans. (copiez-collez ce script dans votre console avant de cliquer sur le bloc jaune)

var divs = document.getElementById("blocJaune");

function switchStyle(){
    if(divs.classList.contains("text-default")) {
        divs.classList.remove("text-default");
        divs.classList.add("text-alternate");
    } else {
        divs.classList.remove("text-alternate");
        divs.classList.add("text-default");
    }
};

document.getElementById("blocJaune").addEventListener("click", switchStyle);

Cliquez-moi pour modifier mon fond…

Même si le code Javascript ci-dessus est simplifiable, avec jQuery, la même opération s’écrira comme ceci :

$("#blocJaune").click(function(){
    this.toggleClass("text-default text-alternate");
});

Installer jQuery

jQuery doit donc être chargée dans la page HTML une seule fois, comme une feuille CSS ou au autre Javascript externe.

Tout autre script faisant appel à jQuery doit évidemment venir après le chargement de ce dernier dans votre page HTML.

Le chargement de jQuery se fait avant </body> comme pour les autres Javascripts.

Option 1 : fichier jQuery local

Vous pouvez télécharger jQuery et le placer dans votre dossier racine, dans un dossier js par exemple.

...
<script src="js/jquery-3.6.4.min.js"></script>
<script src="js/messcripts.js"></script>
</body>

Option 2 : jQuery distant sur un CDN

Vous avez aussi la possibilité d’appeler jQuery depuis un serveur CDN.

...
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="js/messcripts.js"></script>
</body>

Utilisation

Un script jQuery est souvent composé de la même manière :

  • Un $ signale au navigateur qu’on fait appel à jQuery
  • Un déclencher est ciblé (dans l’exemple : un click sur l’élément qui a la classe .btn) https://www.w3schools.com/jquery/trysel.asp
  • Une fonction qui contient une ou plusieurs actions sur un élément HTML à nouveau ciblé par jQuery (dans l’exemple, on utilise une commande jQuey hide pour masquer l’élément qui a une classe .cachezmoi)
$(".btn").click(function(){
    $(".cachezmoi").hide();
}) ;

Traduction : quand on click sur l’élément avec la classe .btn, on déclenche la function qui hide l’élément avec la classe .cachezmoi

Exercice

Rendez-vous sur Codepen pour quelques exercices pratiques : https://codepen.io/bzzz/pen/GLVzvz

Et une Cheat Sheet en passant… https://oscarotero.com/jquery/

Scripts dépendants ou plugins

jQuery peut être accompagné de scripts dépendants ou de plugins aux fonctionnalités diverses.

Leur intégration se fait souvent de la même manière, des éventuelles spécificités sont détaillées sur les sites respectifs. On les charge après jQuery et avant vos propres scripts.