Découvrir jQuery — Cours Programmer en JavaScript

Leçon 1

Présentation et installation

Méthode d'installation	Écriture	Usage
fichier téléchargé sur jquery.com	`<script src="js/jquery-3.7.1.min.js"></script>`	fonctionne sans Internet
CDN (Content Delivery Network)	`<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>`	rien à télécharger, fichier souvent déjà en cache

Leçon 2

La syntaxe de jQuery

JavaScript pur	jQuery
`document.querySelectorAll("p").forEach(p => p.style.display = "none")`	`$("p").hide()`
`document.querySelector("#titre").textContent = "Salut"`	`$("#titre").text("Salut")`
`el.classList.add("actif")`	`$(el).addClass("actif")`
`el.addEventListener("click", f)`	`$(el).on("click", f)`

Leçon 3

Les fonctions essentielles

Méthode	Lire	Modifier
`.text()`	`$("h1").text()`	`$("h1").text("Nouveau titre")`
`.html()`	`$("#zone").html()`	`$("#zone").html("<b>Gras</b>")`
`.val()`	`$("#nom").val()`	`$("#nom").val("")`
`.attr()`

Leçon 4

Le comportement des liens

Besoin	jQuery
désactiver un lien	`$(lien).removeAttr("href")`
activer un lien	`$(lien).attr("href", "url")`
ouvrir dans un nouvel onglet	`$(lien).attr("target", "_blank")`
empêcher la navigation au clic, sans toucher au lien	`$(lien).on("click", e => e.preventDefault())`

Leçon 5

Associer et déclencher des événements

Méthode	Rôle
`.on("click", f)`	associer un gestionnaire (méthode générale, recommandée)
`.click(f)`, `.dblclick(f)`, `.mouseenter(f)`, `.mouseleave(f)`, `.keyup(f)`, `.submit(f)`…	raccourcis pour les événements courants
`.off("click")`	retirer les gestionnaires
`.trigger("click")`	déclencher l'événement par le code
`.on("click", "sélecteur", f)`

Leçon 6

Les plugins jQuery

1
Trouver le pluginSur GitHub, npm ou le site de l'auteur ; vérifier qu'il est maintenu et compatible avec ta version de jQuery.
2
Télécharger ou référencerRécupérer le fichier .js (et son .css s'il en a un), ou utiliser son lien CDN.
3
Charger dans le bon ordrejQuery, puis le plugin, puis ton script.
4
Appeler le pluginSur les éléments voulus, avec les options décrites dans sa documentation.

Travaux pratiques

La liste de tâches en jQuery

Exercices

Exercice 13.1

Choisis la bonne réponse

1$("p") est équivalent à…
2$(".item").hide() cache…
3$("#nom").val() sans argument…
4Le chaînage est possible car chaque méthode d'action renvoie…
5Pour déclencher un clic par le code :
6Un plugin jQuery doit être chargé…
7L'erreur « $ is not defined » signifie…

0/7 répondues

Exercice 13.2

Traduis en jQuery

Exercice 13.3

La FAQ en accordéon

L'essentiel du chapitre

À retenir

jQuery (John Resig, 2006) simplifie DOM, CSS, événements, effets et AJAX. Installation : fichier ou CDN, avant ton script.
Syntaxe : $(sélecteur).action() ; l'action s'applique à tous les éléments trouvés.
$(function () { ... }) : le code s'exécute quand le DOM est prêt (ready).
.text(), .html(), .val(), .attr(), .css() : lire sans argument, modifier avec ; .addClass(), .toggleClass(), .removeAttr().
Effets : hide, show, toggle, fadeIn, fadeOut, slideUp, slideDown, animate. Chaînage : $(x).css(...).slideUp().slideDown().
Événements : .on("click", f), .click(f), .dblclick(f), .mouseenter(f), .trigger("click"), délégation .on("click", "li", f).
Plugins : chargés après jQuery, appelés comme une méthode $(x).plugin(options) ; on en crée avec $.fn.nom = function () { return this; }.

Méthode	Rôle
`.addClass()`, `.removeClass()`, `.toggleClass()`, `.hasClass()`	gérer les classes
`.removeAttr("href")`	supprimer un attribut
`.append()`, `.prepend()`, `.before()`, `.after()`	ajouter du contenu
`.remove()`, `.empty()`	supprimer les éléments / vider leur contenu
`.each(function () { ... })`	parcourir les éléments un par un (`this` = l'élément courant)
`.find()`, `.parent()`, `.children()`, `.next()`, `.closest()`	naviguer dans le DOM

Méthode	Effet
`.hide()`, `.show()`, `.toggle()`	cacher, afficher, basculer
`.fadeIn()`, `.fadeOut()`, `.fadeToggle()`	apparition / disparition en fondu
`.slideUp()`, `.slideDown()`, `.slideToggle()`	glissement vers le haut / vers le bas
`.animate({ propriétés }, durée)`	animation personnalisée de propriétés CSS numériques

La structure d'une page avec jQuery

html

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>jQuery</title>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>   <!-- 1. jQuery d'abord -->
  <script src="script.js" defer></script>                                <!-- 2. puis ton script -->
</head>
<body>
  <p id="p1">Bonjour jQuery</p>
</body>
</html>

Les exemples du résumé

$(this).hide();          // cache l'élément courant (dans un gestionnaire d'événement)
$("p").hide();           // cache TOUS les paragraphes
$(".test").hide();       // cache tous les éléments de classe test
$("#test").hide();       // cache l'élément d'id test

Désactiver les liens de classe disabled (exemple du résumé)

html

<ul class="menu">
  <li><a href="https://www.ofppt.ma/">Lien 1</a></li>
  <li><a href="https://www.ofppt.ma/">Lien 2</a></li>
  <li><a href="https://www.ofppt.ma/" class="disabled">Lien 3</a></li>
</ul>
<script>
  $(function () {
    $(".menu a").each(function () {
      if ($(this).hasClass("disabled")) {
        $(this).removeAttr("href");        // le lien n'est plus cliquable
      }
    });
  });
</script>

L'exemple du résumé : le sélecteur d'heure jquery-clock-timepicker

html

<input type="text" class="heure" value="14:30">

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="js/jquery-clock-timepicker.min.js"></script>   <!-- le plugin, après jQuery -->
<script>
  $(function () {
    $(".heure").clockTimePicker();     // le plugin ajoute la méthode clockTimePicker()
  });
</script>

document.querySelector("#titre").textContent = "Bienvenue";
document.querySelectorAll(".prix").forEach(p => p.style.color = "green");
document.querySelector("#menu").classList.toggle("ouvert");
document.querySelector("#photo").setAttribute("src", "maroc.jpg");
document.querySelector("#liste").innerHTML += "<li>Nouveau</li>";
document.querySelector("#btn").addEventListener("click", () => console.log("ok"));

L'exemple du résumé

$("#p1").css("color", "red").slideUp(2000).slideDown(2000);

// même chose, plus lisible sur plusieurs lignes
$("#p1")
  .css("color", "red")
  .slideUp(2000)
  .slideDown(2000);

Les exemples du résumé

$("p").click(function () {
  $(this).hide();                              // cache le paragraphe cliqué
});

$("p").dblclick(function () {
  $(this).hide();
});

$("#p1").mouseenter(function () {
  console.log("Tu es sur le paragraphe p1 !");
});

$("#p1").mouseleave(function () {
  console.log("Tu as quitté le paragraphe p1 !");
});

on, trigger et délégation

$("#btnValider").on("click", function () {
  console.log("Validé");
});
$("#btnValider").trigger("click");             // déclenche le clic sans action de l'utilisateur

$("#taches").on("click", "li", function () {   // fonctionne aussi pour les li ajoutés plus tard
  $(this).toggleClass("faite");
});

Un mini plugin « surligner »

$.fn.surligner = function (couleur = "yellow") {
  return this.css("background-color", couleur);   // return this : le chaînage reste possible
};

$("p.important").surligner().fadeIn();
$("h2").surligner("lightblue");