Chapitre 1 – Introduction à jQuery

1. Qu’est-ce que jQuery ?

jQuery est une bibliothèque JavaScript. Cela signifie qu’elle n’est pas un nouveau langage, mais un ensemble de fonctions écrites en JavaScript, destinées à faciliter le développement côté navigateur.

jQuery a été conçu pour simplifier trois grandes familles de tâches :

• la manipulation du DOM (le HTML de la page)
• la gestion des événements (clics, formulaires, clavier…)
• la communication avec un serveur via AJAX

2. Pourquoi jQuery a-t-il été créé ?

Avant l’apparition de jQuery, écrire du JavaScript était souvent :

• verbeux (beaucoup de lignes pour peu d’actions)
• incohérent selon les navigateurs
• difficile à lire pour les débutants

Par exemple, sélectionner un élément HTML et réagir à un clic nécessitait plusieurs lignes de code, différentes selon le navigateur.

jQuery a unifié ces comportements et a fourni une API simple, cohérente et lisible.

3. jQuery et JavaScript : quelle différence ?

Il est très important de comprendre que :

Comparons un même comportement avec et sans jQuery.

JavaScript natif

document.getElementById('btn')
  .addEventListener('click', function () {
    alert('Bonjour');
  });

Avec jQuery

$('#btn').on('click', function () {
  alert('Bonjour');
});

Le résultat est strictement identique, mais la version jQuery est plus courte, plus lisible, et plus facile à mémoriser.

4. Que signifie le symbole $ ?

Le symbole $ est la fonction principale de jQuery. Elle permet de :

• sélectionner des éléments HTML
• agir sur ces éléments (modifier, écouter, animer…)

$('#titre')      // sélection par id
$('.item')       // sélection par classe
$('button')      // sélection par balise

5. Est-ce que jQuery est encore utilisé aujourd’hui ?

Oui. Même si JavaScript moderne a énormément évolué, jQuery reste très présent dans :

• les projets existants (legacy)
• les back-offices
• les CMS (WordPress, Prestashop…)
• les scripts rapides et les prototypes

Exercice – Découvrir jQuery

Objectif : écrire ton tout premier script jQuery.

1. Crée un bouton avec l’id helloBtn
2. Crée une div vide avec l’id result
3. Au clic sur le bouton, affiche “Bonjour jQuery !” dans la div

<button id="helloBtn">Dire bonjour</button>
<div id="result"></div>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(function () {
  $('#helloBtn').on('click', function () {
    $('#result').text('Bonjour jQuery !');
  });
});
</script>

Résumé du chapitre

• jQuery est une bibliothèque JavaScript
• Elle simplifie le DOM, les événements et AJAX
• Elle reste utile dans de nombreux projets
• Le symbole $ est au cœur de jQuery