Introduction à jQuery : guide pratique pour débuter simplement

Si vous vous lancez dans le développement web, vous avez sûrement déjà entendu parler de jQuery. Cette librairie JavaScript, créée par John Resig en 2006, est rapidement devenue incontournable grâce à sa capacité à simplifier l’écriture du JavaScript natif. Elle permet d’interagir facilement avec le DOM (Document Object Model), d’animer des éléments HTML, et même de gérer des requêtes AJAX avec simplicité. Découvrons ensemble comment jQuery peut rendre votre vie de développeur beaucoup plus agréable.

Pourquoi utiliser jQuery ?

Avant l’arrivée massive de frameworks modernes tels que React, Vue ou Angular, jQuery dominait largement le marché. Son slogan, « Write less, do more » (« Écrivez moins, faites-en plus »), illustre parfaitement son avantage principal : réduire considérablement la quantité de code nécessaire pour accomplir des tâches courantes.

Voici un exemple concret pour illustrer la simplicité de jQuery. Supposons que vous vouliez masquer un paragraphe HTML en cliquant sur un bouton. Avec JavaScript pur, vous écririez ceci :

document.getElementById('monBouton').addEventListener('click', function() {
  document.getElementById('monParagraphe').style.display = 'none';
});

En utilisant jQuery, cette opération devient extrêmement simple :

$('#monBouton').click(function() {
  $('#monParagraphe').hide();
});

Ici, non seulement le code est plus court, mais il est également beaucoup plus lisible.

Premiers pas avec jQuery

Pour démarrer, vous devez d’abord inclure la librairie dans votre projet HTML. Vous pouvez facilement l’intégrer via un CDN comme ceci :

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

Sélection et manipulation du DOM

L’une des grandes forces de jQuery réside dans sa capacité à manipuler aisément le DOM. Voici comment changer le texte d’un élément :

$('#titre').text('Bienvenue sur mon site !');

Vous pouvez également modifier le CSS très simplement :

$('.important').css('color', 'red');

Gestion des événements

La gestion des événements en jQuery est très intuitive. Voici un exemple d’affichage d’une alerte lorsqu’un bouton est cliqué :

$('#alerteBouton').on('click', function() {
  alert('Bouton cliqué !');
});

Animations simplifiées

jQuery simplifie énormément les animations courantes. Par exemple, pour faire apparaître ou disparaître progressivement un élément, vous utiliserez :

$('#boite').fadeIn(1000); // Apparition en 1 seconde
$('#boite').fadeOut(500); // Disparition en 0.5 seconde

Chargement de contenu dynamique (AJAX)

Les requêtes AJAX deviennent très faciles à gérer. Voici un exemple simple pour charger du contenu d’un autre fichier HTML :

$('#contenu').load('contenu.html');

Vous pouvez également récupérer des données JSON à partir d’un serveur :

$.getJSON('donnees.json', function(data) {
  console.log(data);
});

Exercice pratique : une simple To-Do List

Pour mettre en pratique ce que nous avons appris, voici un petit projet de to-do list interactive en quelques lignes de code :

HTML :

<input type="text" id="tache" placeholder="Nouvelle tâche">
<button id="ajouter">Ajouter</button>
<ul id="liste"></ul>

jQuery :

$('#ajouter').click(function() {
  var tache = $('#tache').val();
  if(tache !== ''){
    $('#liste').append('<li>' + tache + ' <button class="supprimer">Supprimer</button></li>');
    $('#tache').val('');
  }
});

$(document).on('click', '.supprimer', function() {
  $(this).parent().remove();
});

Ce petit exemple montre bien comment jQuery permet de réaliser une interface dynamique en très peu de temps et avec un code très clair.

Quel avenir pour jQuery en 2025 ?

Avec l’évolution du JavaScript natif (ES6+) et des frameworks modernes, beaucoup se demandent si jQuery est encore pertinent aujourd’hui. La réponse est nuancée. jQuery reste utile dans des contextes spécifiques :

• Projets simples ou rapides où un framework complet serait excessif.
• Sites existants qui l’utilisent déjà massivement.
• Apprentissage progressif du JavaScript.

De plus, sa légèreté (en particulier avec la version slim) et sa compatibilité étendue avec divers navigateurs continuent d’en faire une option intéressante pour de nombreux développeurs.

Conclusion

Cette introduction vous a permis de voir comment cette librairie simplifie drastiquement de nombreuses tâches JavaScript courantes. Grâce à sa syntaxe simple et intuitive, jQuery constitue un excellent choix pour débuter en programmation web, en particulier pour apprendre à interagir facilement avec le DOM et gérer des événements de manière efficace.

Même si jQuery est aujourd’hui concurrencé par de nombreuses autres technologies, il demeure une excellente solution pour des projets rapides et des apprentissages progressifs. Alors n’hésitez pas à l’essayer et à l’intégrer dans vos futurs projets !

Voila, vous pouvez maintenant briller en soirée …

Formations de Develop4fun

• Apprenez à créer des jeux 2D facilement avec LUA et LÖVE 2D
• Comprendre la programmation : les bases pour débutants
• Apprenez à programmer en C#
• Apprenez à programmer en C++
• Parcours pour devenir un programmeur web
• Cours JavaScript : maîtrisez les fondamentaux du langage de programmation web
• Apprendre à coder en HTML et CSS : Cours Complet
• Parcours pour devenir un programmeur de jeux vidéo