Comprendre jQuery

jQuery est une bibliothèque JavaScript rapide et concise, créée par John Resig et publiée pour la première fois en janvier 2006. Sa syntaxe simplifiée et sa compatibilité inter-navigateurs améliorent l'efficacité du développement, en particulier pour le parcours du DOM, la manipulation des éléments, la gestion des événements, les animations et les requêtes Ajax.

La philosophie fondamentale de jQuery est « write less, do more » (écrire moins, faire plus).

Configuration de l'Environnement

Pour intégrer jQuery, téléchargez la dernière version depuis le site officiel ou utilisez un CDN. Le fichier .js n'a pas besoin d'être installé. Placez-le dans un répertoire accessible et liez-le dans votre document HTML :

<script src="chemin/vers/jquery.min.js" type="text/javascript"></script>
<!-- Ou via CDN -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

Les versions minifiées sont recommandées pour la production, tandis que les versions non compressées sont utiles pour le débogage et l'apprentissage.

Fonctions d'Entrée

Contrairement à window.onload, qui attend que toutes les ressources (images, fichiers) soient chargées, la fonction d'entrée de jQuery s'exécute dès que le DOM est prêt, ce qui améliore les performances. De plus, plusieurs appels à cette fonction seront tous exécutés, contrairement à window.onload qui n'en conserve que le dernier.

// Méthode standard
$(document).ready(function() {
    // Code à exécuter une fois le DOM prêt
});

// Syntaxe raccourcie
$(function() {
    // Code ici
});

Objet jQuery vs. Objet DOM Natif

Un objet jQuery encapsule un ou plusieurs éléments du DOM natif dans un tableau-like structure. Il permet d'utiliser les méthodes spécifiques de jQuery, mais ne peut pas accéder directement aux propriétés native du DOM.

// Objet DOM natif
const elementNatif = document.getElementById('cible');
console.log(elementNatif.textContent); // Utilise une propriété native

// Objet jQuery (collection)
const $elementsjQuery = $('.cible');
$elementsjQuery.text('Nouveau contenu'); // Utilise une méthode jQuery
$elementsjQuery.css('color', 'red').fadeIn(); // Opérations chaînées

Conversion entre Objets

Pour obtenir un objet DOM natif à partir d'un objet jQuery, utilisez l'indexation ou la méthode .get(). Inversement, enveloppez un objet DOM natif avec $() pour le convertir en objet jQuery.

// jQuery -> DOM natif
const $li = $('li'); // Objet jQuery
const premierLi = $li[0]; // Premier élément DOM natif
const deuxiemeLi = $li.get(1); // Deuxième élément DOM natif

// DOM natif -> jQuery
const divNatif = document.getElementById('carte');
const $divjQuery = $(divNatif); // Objet jQuery

Sélecteurs jQuery

Les sélecteurs jQuery, inspirés des sélecteurs CSS, permettent de cibler des éléments du DOM pour leur appliquer des comportements. Ils retournent toujours un objet jQuery.

// Sélecteurs de base
$('#monId')       // Par ID
$('.maClasse')    // Par classe
$('div')          // Par balise

// Sélecteurs avancés
$('div > p')      // Enfants directs
$('input:text')   // Par type d'input
$('.actif:first') // Premier élément avec la classe 'actif'

L'utilisation de jQuery pour la sélection et la manipulation du DOM offre une syntaxe plus concise et une meilleuree gestion de la compatibilité entre navigateurs.