Chapitre 2 – Installation et CDN jQuery

Avant d’utiliser jQuery, il faut l’ajouter correctement à un projet. Dans ce chapitre, on voit les méthodes possibles, leurs avantages/inconvénients, et les erreurs classiques à éviter.

1) Pourquoi “installer” jQuery ?

jQuery n’est pas intégré nativement au navigateur. Pour pouvoir utiliser $(), il faut d’abord charger la bibliothèque.

Erreur typique si jQuery n’est pas chargé :

Uncaught ReferenceError: $ is not defined

Traduction : jQuery n’est pas disponible (pas chargé, ou chargé après votre script).

2) Deux approches : CDN ou fichier local

Méthode	Principe	Quand
CDN	Chargement depuis un serveur externe	Simple, rapide, très courant
Local	Fichier jQuery dans votre projet	Intranet, hors-ligne, contrôle total

3) Ajouter jQuery via CDN (recommandé pour démarrer)

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

Ordre correct (très important) :

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="app.js"></script>

Si votre script est chargé avant jQuery, vous aurez $ is not defined.

4) Vérifier que jQuery est chargé

console.log($.fn.jquery);

Si une version s’affiche (ex : 3.7.1), jQuery est chargé correctement.

5) Utiliser jQuery en local

<script src="assets/js/jquery-3.7.1.min.js"></script>

Même API, même comportement : seule la source change (CDN vs local).

Exercice – Test complet

Crée une page HTML.
Ajoute jQuery via CDN.
Affiche la version dans la console.
Ajoute un bouton qui déclenche une alerte au clic.

Correction

<button id="btn">Tester jQuery</button>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  console.log($.fn.jquery);

  $('#btn').on('click', function () {
    alert('jQuery fonctionne !');
  });
</script>

Résumé

jQuery doit être chargé avant utilisation
CDN = simple et rapide
Local = utile en intranet / offline
L’ordre des scripts est une cause d’erreur très fréquente