RÉFÉRENCE RAPIDE JQUERY
Sélecteurs, DOM, événements, AJAX, effets, traversal
Sélecteurs
Sélecteurs de base
$("p") // tous les éléments
$(".btn") // sélecteur de classe
$("#main") // sélecteur d'ID
$("ul > li") // enfants directs
$("input[type='text']") // sélecteur d'attribut
Sélecteurs courants
| $('*') | Tous les éléments |
| $('a, span') | Sélecteurs multiples |
| $(':first') | Premier élément correspondant |
| $(':last') | Dernier élément correspondant |
| $(':even') / $(':odd') | Éléments d'index pair/impair |
| $(':visible') / $(':hidden') | Filtres de visibilité |
| $(':contains(text)') | Éléments contenant le texte |
| $(':has(selector)') | Éléments contenant la correspondance du sélecteur |
Manipulation du DOM
Contenu et structure
$("#el").html("Bold"); // définir le HTML interne
$("#el").text("Plain text"); // définir le contenu texte
$("ul").append("
New"); // ajouter à la fin
$("ul").prepend("First"); // ajouter au début
Insérer et supprimer
$("
Hello
").insertAfter("
#el"); // insérer après
$("
Hi
").insertBefore("
#el"); // insérer avant
$("
#el").remove(); // supprimer l'élément du DOM
$("
#el").empty(); // supprimer tous les enfants
Méthodes
| .html() | Obtenir/définir le HTML interne |
| .text() | Obtenir/définir le contenu texte |
| .append() / .prepend() | Ajouter un enfant à la fin/au début |
| .after() / .before() | Insérer un frère après/avant |
| .wrap() | Envelopper l'élément dans un nouveau parent |
| .clone() | Copie profonde de l'élément |
| .replaceWith() | Remplacer l'élément |
Événements
Attacher des événements
$(".btn").on("click", function () {
$(this).toggleClass("active");
});
$(document).on("click", ".dynamic", handler); // délégation
$(".btn").off("click"); // supprimer le gestionnaire
Méthodes abrégées
| .click(fn) | Gestionnaire de clic |
| .hover(fnIn, fnOut) | Entrée/sortie de souris |
| .focus() / .blur() | Focus obtenu/perdu |
| .change(fn) | Valeur modifiée (input/select) |
| .submit(fn) | Soumission de formulaire |
| .keydown() / .keyup() | Événements clavier |
Document prêt
$(document).ready(function () { /* DOM chargé */ });
$(function () { /* abréviation */ });
Effets et animations
Afficher / Masquer / Basculer
$("#el").hide(400); // masquer avec animation
$("#el").show(400); // afficher avec animation
$("#el").toggle(); // basculer la visibilité
$("#el").fadeIn(600); // apparaître en fondu
$("#el").slideDown(400); // glisser vers le bas
Animation personnalisée
$("#el").animate({
opacity: 0.5,
left: "+=50px",
height: "toggle"
}, 1000, function () { /* terminé */ });
Méthodes d'effets
| .fadeIn() / .fadeOut() | Animer l'opacité |
| .fadeToggle() | Basculer avec fondu |
| .slideDown() / .slideUp() | Animer la hauteur |
| .animate(props, ms) | Animation CSS personnalisée |
| .stop() | Arrêter l'animation courante |
| .delay(ms) | Délai pour le prochain effet en file |
AJAX
Méthodes abrégées
$.get("/api/data", function (data) { console.log(data); });
$.post("/api/data", { name: "Alice" }, function (res) {});
$.getJSON("/api/items", function (json) {});
$("#el").load("/fragment.html"); // charger du HTML dans l'élément
$.ajax complet
$.ajax({
url: "/api/data",
method: "POST",
data: JSON.stringify({ key: "val" }),
contentType: "application/json",
success: (res) => console.log(res),
error: (xhr) => console.error(xhr.status)
});
Options AJAX
| url | URL de la requête |
| method | Méthode HTTP (GET, POST, ...) |
| data | Données à envoyer |
| dataType | Type de réponse attendu |
| contentType | Type de contenu de la requête |
| success / error | Fonctions de rappel |
| headers | En-têtes de requête personnalisés |
Traversal
Navigation dans l'arbre
$("li").parent(); // parent direct
$("li").parents("ul"); // tous les ancêtres correspondants
$("ul").children("li"); // enfants directs
$("ul").find(".active"); // tous les descendants correspondants
$("li").siblings(); // éléments frères
Méthodes de traversal
| .parent() / .parents() | Parent direct / tous les ancêtres |
| .children() / .find() | Enfants directs / tous les descendants |
| .siblings() | Tous les éléments frères |
| .next() / .prev() | Frère suivant/précédent |
| .closest(sel) | Ancêtre le plus proche correspondant au sélecteur |
| .first() / .last() | Premier/dernier dans l'ensemble correspondant |
| .eq(index) | Élément à l'index |
| .filter(sel) | Réduire aux éléments correspondants |
Attributs et CSS
Attributs
$("img").attr("src"); // obtenir l'attribut
$("img").attr("src", "new.jpg"); // définir l'attribut
$("img").removeAttr("title"); // supprimer l'attribut
$("input").prop("checked", true); // définir la propriété
CSS et classes
$(".box").css("color", "red"); // définir un style unique
$(".box").css({ color: "red", fontSize: "14px" }); // multiple
$("p").addClass("highlight");
$("p").removeClass("highlight");
$("p").toggleClass("active");
$("p").hasClass("active"); // retourne boolean
Formulaires
Valeurs et sérialisation
$("input").val(); // obtenir la valeur
$("input").val("new value"); // définir la valeur
$("form").serialize(); // "name=Alice&age=30"
$("form").serializeArray(); // [{name, value}, ...]
Sélecteurs de formulaire
| $(":input") | Tous les éléments de formulaire |
| $(":checked") | Cases cochées/boutons radio sélectionnés |
| $(":selected") | Options sélectionnées |
| $(":disabled") | Éléments désactivés |
| $(":text") | Champs texte |
Utilitaires
Helpers pour tableaux et objets
$.each([1, 2, 3], function (i, val) { /* itérer */ });
$.each(obj, function (key, val) { /* itérer un objet */ });
$.extend({}, defaults, options); // fusionner des objets
$.inArray("b", ["a", "b", "c"]); // retourne 1 (index)
Méthodes utilitaires
| $.each(arr, fn) | Itérer un tableau ou un objet |
| $.extend(target, ...) | Fusionner des objets (superficiel) |
| $.inArray(val, arr) | Index de la valeur (-1 si absent) |
| $.isArray(obj) | Vérifier si c'est un tableau |
| $.trim(str) | Supprimer les espaces en début/fin |
| $.parseJSON(str) | Analyser une chaîne JSON |
| $.map(arr, fn) | Transformer les éléments d'un tableau |
Modèles courants
Chaînage
$("ul")
.find("li")
.addClass("item")
.first()
.css("font-weight", "bold");
Modèle de plugin
$.fn.highlight = function (color) {
return this.each(function () {
$(this).css("background", color || "yellow");
});
};
$("p").highlight("pink");
Résolution de conflits
// Éviter les conflits $ avec d'autres bibliothèques
jQuery.noConflict();
jQuery(document).ready(function ($) {
$(".btn").click(handler); // $ sécurisé à l'intérieur
});