Intégrer la bibliothèque jQuery, sélectionner et modifier des éléments avec $(), enchaîner les méthodes, gérer les événements et les liens, ajouter des effets et utiliser des plugins existants.
Vous rejoignez une agence web de Rabat qui maintient le site d'une chaîne d'hôtels, écrit il y a quelques années avec jQuery. Des millions de sites l'utilisent encore. Il faut savoir lire et modifier ce code : sélectionner, cacher, afficher, réagir aux clics, en moins de lignes qu'en JavaScript pur.
À gauche, JavaScript « pur » ; à droite, jQuery. Le résultat dans la page est le même.
jQuery (2006) est une bibliothèque JavaScript qui simplifie la manipulation de la page, les événements, les effets et AJAX. Les navigateurs modernes font aujourd’hui presque tout en JavaScript pur, mais jQuery reste très présent dans les sites existants et les thèmes (WordPress, Bootstrap 4).
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> <!-- 1. la bibliothèque -->
<script src="js/script.js"></script> <!-- 2. votre code -->
$(function () {
// le DOM est prêt : on peut sélectionner les éléments
});
| jQuery | Rôle |
|---|---|
$('sélecteur CSS') | sélectionner |
.text(), .html(), .val() | lire ou modifier le texte, le HTML, la valeur d’un champ |
.attr('href', '...'), .data('prix') | attributs, attributs data- |
.addClass(), .removeClass(), .toggleClass() | classes |
.css('color', 'red') | style |
.append(), .prepend(), .remove() | ajouter, supprimer |
.hide(), .show(), .fadeIn(), .slideToggle() | effets |
.each(function () { ... }) | parcourir |
Sans argument, une méthode lit ($('#titre').text()) ; avec un argument, elle modifie.
Chaque méthode renvoie l’objet jQuery : on peut enchaîner.
$('#titre').text('Bienvenue').addClass('grand').fadeIn(400);
$('#voir').on('click', function () {
$('#chambres').slideToggle();
});
$('.chambre').on('click', function () {
$('.chambre').removeClass('selection');
$(this).addClass('selection'); // this : l'élément cliqué
$('#choix').text(`Prix : ${$(this).data('prix')} DH`);
});
$('a.externe').on('click', function (e) { e.preventDefault(); }); // comportement des liens
$('#voir').trigger('click'); // déclencher un événement
Un plugin ajoute une méthode à jQuery (carrousel, calendrier, validation de formulaire…). On charge jQuery, puis le plugin, puis on l’active : $('.galerie').monPlugin({ vitesse: 500 }).
Plutôt qu'une télécommande par appareil, une seule télécommande avec des boutons simples. jQuery donne une seule fonction, $(), et des méthodes courtes qui marchent sur tous les navigateurs.
// JavaScript pur document.querySelectorAll('.chambre').forEach((el) => el.classList.add('dispo')); // jQuery $('.chambre').addClass('dispo');
« Prends le titre, colore-le en rouge, puis fais-le apparaître doucement » : avec jQuery, on enchaîne les actions sur une seule ligne (chaînage).
$('#titre').css('color', '#c0392b').hide().fadeIn(600);
Traduisez en jQuery : document.querySelector('#msg').textContent = 'Réservé'; document.querySelector('#msg').classList.add('ok');
$('#msg').text('Réservé').addClass('ok');
Tous les liens externes (href commence par http) doivent s'ouvrir dans un nouvel onglet. Écrivez le code jQuery.
$('a[href^="http"]').attr('target', '_blank').attr('rel', 'noopener');
Quelles sont les étapes pour utiliser un plugin jQuery existant (par exemple un carrousel) ?
1. Charger jQuery d'abord, puis le fichier JS du plugin (et son CSS)
2. Écrire le HTML attendu par le plugin (voir sa documentation)
3. L'activer sur les éléments : $('.carrousel').nomDuPlugin({ options });
4. Vérifier la licence, la date de dernière mise à jour et la compatibilité
avec la version de jQuery.