jQuery / Charger et utiliser jQuery dans HTML

Chargez jQuery par script avant le code qui l’utilise. Vous pouvez choisir un CDN ou un fichier local téléchargé. Disponibilité de la bibliothèque et préparation des éléments HTML sont deux conditions distinctes.

Choisir fichier et ordre

jQuery est une bibliothèque JavaScript. Référencez-la avec script et src, puis sélectionnez des éléments et appelez leurs méthodes. Aucune balise spéciale, installation npm ou compilation n’est nécessaire ici.

L’exemple fixe le script ordinaire 4.0.0 des téléchargements officiels. min signifie compression, pas fonctionnalités différentes. Slim exclut Ajax et effects ; choisissez selon les besoins suivants. L’affichage immédiat ici n’utilise ni effet temporisé ni Ajax.

Chargez l’instance voulue une fois. Une copie supplémentaire sur un site existant peut séparer données et plugins. Vérifiez l’exemple indépendant avant les dépendances du site.

Exemple CDN complet dans un fichier

Un CDN, Content Delivery Network, distribue des fichiers externes. Enregistrez en UTF-8 cdn-demo.html et ouvrez-le avec Internet. Aucun serveur ou paquet n’est nécessaire. Choisissez version et script ordinaire dans la liste CDN officielle. Exécuté séparément dans Edge sous Windows avec 3.7.1 et 4.0.0.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Load jQuery and use it</title>
  <style>body { font: 16px/1.6 sans-serif; margin: 20px; } button { font: inherit; margin: 4px; } pre { white-space: pre-wrap; }</style>
</head>
<body>
  <button type="button" id="toggle" aria-controls="message" aria-expanded="true">Toggle message</button>
  <button type="button" id="reset">Reset</button>
  <p id="message">This message is controlled by jQuery.</p>
  <pre id="status" aria-live="polite">Waiting for scripts.</pre>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
  <script>
jQuery(function ($) {
  let clicks = 0;
  function report() {
    const visible = $("#message").is(":visible");
    $("#toggle").attr("aria-expanded", String(visible));
    $("#status").text(`ready=true\nmessage visible=${visible}\nclicks=${clicks}`);
  }
  $("#toggle").on("click", function () { clicks++; $("#message").toggle(); report(); });
  $("#reset").on("click", function () { clicks = 0; $("#message").show(); report(); });
  report();
});
  </script>
</body>
</html>

Sortie réussie. Waiting for scripts. appartient au HTML initial ; seul le code exécuté le remplace par ready=true.

ready=true
message visible=true
clicks=0

1. Toggle message masque le paragraphe : message visible=false, clicks=1.
2. Une seconde activation l’affiche avec clicks=2. aria-expanded suit. Le focus et Entrée fonctionnent également.
3. Reset restaure texte et zéro sans recharger.

Le script ordinaire après jQuery exécute les dépendances. Le rappel DOM prêt jQuery(function ($) { ... }) attend un Document Object Model manipulable. $ local désigne jQuery. Il n’attend pas le fichier jQuery lui-même : l’appeler avant son chargement échoue.

Fichiers locaux avec defer ordonné

Téléchargez la même version officielle pour éviter le CDN. index.html et app.js sont côte à côte, jquery-4.0.0.min.js dans le sous-dossier vendor. Vérifiez les extensions réelles, sans .js.txt accidentel.

1. Gardez la bibliothèque dans vendor/jquery-4.0.0.min.js, sans l’écraser avec app.js.
2. Enregistrez le HTML complet suivant dans index.html. ./vendor/ est relatif à ce fichier.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Local jQuery with ordered deferred scripts</title>
  <script defer src="./vendor/jquery-4.0.0.min.js"></script>
  <script defer src="./app.js"></script>
  <style>body { font: 16px/1.6 sans-serif; margin: 20px; } button { font: inherit; margin: 4px; } pre { white-space: pre-wrap; }</style>
</head>
<body>
  <button type="button" id="toggle" aria-controls="message" aria-expanded="true">Toggle message</button>
  <button type="button" id="reset">Reset</button>
  <p id="message">This message is controlled by jQuery.</p>
  <pre id="status" aria-live="polite">Waiting for scripts.</pre>
</body>
</html>

Enregistrez tout ce JavaScript dans app.js à côté, sans balises script.

jQuery(function ($) {
  let clicks = 0;
  function report() {
    const visible = $("#message").is(":visible");
    $("#toggle").attr("aria-expanded", String(visible));
    $("#status").text(`ready=true\nmessage visible=${visible}\nclicks=${clicks}`);
  }
  $("#toggle").on("click", function () { clicks++; $("#message").toggle(); report(); });
  $("#reset").on("click", function () { clicks = 0; $("#message").show(); report(); });
  report();
});

index.html donne le même résultat, vérifié avec le véritable fichier local 4.0.0 dans Edge sous Windows. Après préparation, aucun CDN externe n’est nécessaire.

ready=true
message visible=true
clicks=0

Les scripts externes ordinaires defer s’exécutent après analyse HTML dans l’ordre du document : bibliothèque puis app. async suit la fin des téléchargements et ne garantit pas cet ordre. defer sur du code en ligne ne remplace pas le fichier externe présenté.

Vérifier et diagnostiquer

Dans les outils, typeof window.jQuery doit être function et jQuery.fn.jquery la version voulue. Si undefined, résolvez le chargement avant de lire la version. Network montre URL, réponse et contenu : du HTML d’erreur sous un nom .js n’est pas une bibliothèque.

Pour « jQuery is not defined », vérifiez chemin, blocage réseau et ordre. Le CDN volontairement bloqué laisse Waiting for scripts. et le paragraphe lisible. En local, contrôlez casse, dossiers et extensions. Mélange HTTPS/HTTP et politiques de scripts apparaissent aussi dans Network/Console.

Pour « $ is not a function », examinez aussi l’autre propriétaire du nom. Un chargement correct ne corrige pas id erroné ou gestionnaire double. Séparez disponibilité, sélection et exécution.

Avant déploiement, vérifiez changements de version et plugins, en conservant l’ancienne liaison. Dans un CMS ou framework gérant déjà jQuery, inspectez enregistrement et ordre des dépendances avant d’ajouter le CDN.