💲 jQuery – "Write Less, Do More"

jQuery utilise les mêmes fonctions pour lire (GET) et écrire (SET) des propriétés. Si on passe un argument, c'est un SET. Si on n'en passe pas, c'est un GET (sur le 1er élément de la collection).

.html() (Contenu HTML)

// GET (Lecture)
const contenuHtml = $("#mon-div").html();
// SET (Écriture)
$(".alerte").html("Erreur !");

.text() (Contenu Texte)

// GET
const contenuTexte = $("#mon-div").text();
// SET
$(".alerte").text("Erreur !"); // (Sécurisé, encode le HTML)

.val() (Formulaires)

// GET (Valeur d'un input, select, textarea)
const nomUtilisateur = $("#input-nom").val();
// SET
$("#input-nom").val("Valeur par défaut");

La méthode .css() permet de lire ou modifier les styles CSS "inline" d'un élément (ce qui est dans l'attribut style="...").

Note : Il est généralement préférable d'utiliser des classes (voir 3.2) plutôt que de manipuler les styles directement.

1. GET (Lire un style)

// (Retourne la valeur *calculée* par le navigateur)
const couleur = $("h1").css("color");
const fontSize = $("h1").css("font-size");

console.log(couleur); // ex: "rgb(51, 51, 51)"

2. SET (Écrire des styles)

// SET (1 propriété)
// (Utiliser camelCase pour les propriétés composées)
$("h1").css("backgroundColor", "#f0f0f0");

// SET (Multiples propriétés, via objet)
$("h1").css({
    "font-size": "24px", // (Avec quotes)
    fontWeight: "bold", // (Sans quotes si camelCase)
    "border-bottom": "1px solid blue"
});

La **meilleure pratique** pour modifier l'apparence d'un élément est de modifier ses classes CSS (définies dans votre fichier .css) plutôt que ses styles inline.

.addClass() (Ajouter)

// (CSS: .menu-ouvert { background: blue; })
$("#menu").addClass("menu-ouvert");

// (Ajouter plusieurs classes)
$("#menu").addClass("menu-ouvert transition");

.removeClass() (Supprimer)

$("#menu").removeClass("transition");

.toggleClass() (Basculer)

Ajoute la classe si elle est absente, la supprime si elle est présente. Parfait pour les menus, les "likes", etc.

$("#bouton-menu").on("click", function() {
    $("#menu").toggleClass("menu-ouvert");
});

.hasClass() (Vérifier)

if ($("#menu").hasClass("menu-ouvert")) {
    // ...
}

.on() est la méthode universelle (depuis jQuery 1.7) pour lier des événements (click, mouseenter, submit, keydown...).

Cette modal couvre la **Liaison Directe** (sur les éléments qui existent au chargement de la page).

Syntaxe

// 1. Événement 'click'
$("#mon-bouton").on("click", function(event) {
    // Annuler le comportement par défaut (ex: submit)
    event.preventDefault();
    
    // 'this' est l'élément DOM (le bouton)
    // $(this) est l'objet jQuery du bouton
    $(this).text("Cliqué !");
});

// 2. Événement 'submit' (sur un formulaire)
$("#mon-form").on("submit", function(e) {
    e.preventDefault(); // Empêche le rechargement de la page
    const data = $(this).serialize(); // (Helper jQuery pour formulaires)
    console.log(data);
});

// 3. Événements multiples
$("#mon-input").on("focus blur", function() {
    $(this).toggleClass("input-focus");
});

Problème : Si vous ajoutez un élément (

La plupart des méthodes jQuery (manipulation, effets) retournent l'objet jQuery lui-même. Cela permet le "chaînage" (chaining) : appeler des méthodes les unes après les autres sur le même set d'éléments.

Avec Chaining (Concise)

$("#menu")
    .addClass("actif")
    .slideDown(500)
    .css("background-color", "blue");
    
// (Attention: les méthodes "Getters"
// (ex: .html(), .css('color'))
// cassent la chaîne car elles retournent
// une valeur (string, number...))

.end() (Remonter la chaîne)

.end() permet de remonter dans la chaîne (ex: revenir au parent après un .find()).

$("#liste")
    .find("li") // (La sélection est maintenant 
)
    .addClass("item")
    .end() // (La sélection redevient #liste)
    .addClass("liste-init"); 

jQuery a révolutionné AJAX en masquant la complexité de XMLHttpRequest (cross-browser).

$.ajax() est la méthode "couteau-suisse" qui gère tout (GET, POST, etc.) via un objet de configuration. Elle retourne un objet "Deferred" (similaire à une Promise).

Exemple (POST avec .done/.fail)

const userData = { nom: "Alice", id: 123 };

const request = $.ajax({
    url: "/api/users/update",
    type: "POST", // (ou "GET", "PUT", "DELETE")
    data: JSON.stringify(userData), 
    contentType: "application/json; charset=utf-8",
    dataType: "json"
});

// (Style Promise)
request.done(function(response) {
    console.log("Succès:", response);
});

request.fail(function(xhr, status, error) {
    console.error("Échec:", error);
});

request.always(function() {
    console.log("Requête terminée.");
});

Pour les cas simples (GET, POST), jQuery fournit des raccourcis très pratiques.

$.get() & $.getJSON()

// Raccourci pour $.ajax({ type: "GET", dataType: "json" })
// $.get(URL, [data], [callback_succes], [dataType]);

$.getJSON("/api/user/5", function(data) {
    // (Callback de succès, data est déjà parsée)
    console.log("Utilisateur:", data.nom);
});

// (Version GET avec .done() (style Promise))
$.get("/api/user/5")
    .done(function(data) {
        console.log("Utilisateur:", data.nom);
    })
    .fail(function() {
        console.error("Erreur de chargement user");
    });

$.post()

// $.post(URL, [data], [callback_succes], [dataType]);

const formData = { nom: "Bob" };

$.post("/api/users/create", formData)
    .done(function(response) {
        console.log("Utilisateur créé:", response.id);
    });

jQuery est encore (en 2024-2025) la bibliothèque JavaScript la plus utilisée sur le web, principalement en raison de son inclusion massive dans les CMS et les thèmes "legacy".

Ressources pour apprendre et travailler avec jQuery.

"jQuery est-il mort ?" Non, mais il est **moins nécessaire**. Les navigateurs modernes (ES6+) ont adopté des API simples, standardisées, inspirées par jQuery.

Le JavaScript "Vanilla" (natif) est désormais souvent plus performant et ne nécessite pas de charger une bibliothèque de 30ko (minifiée/gzippée).