# Référence rapide jQuery

*Sélecteurs, DOM, événements, AJAX, effets, traversal*

> Source: jQuery Documentation (api.jquery.com) · MIT

## Sélecteurs

### Sélecteurs de base

```
$("p")               // tous les éléments <p>
$(".btn")            // sélecteur de classe
$("#main")           // sélecteur d'ID
$("ul > li")         // enfants directs
$("input[type='text']") // sélecteur d'attribut
```

### Sélecteurs courants

| Command | Description |
|---------|-------------|
| `$('*')` | 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("<b>Bold</b>");   // définir le HTML interne
$("#el").text("Plain text");     // définir le contenu texte
$("ul").append("<li>New</li>");  // ajouter à la fin
$("ul").prepend("<li>First</li>"); // ajouter au début
```

### Insérer et supprimer

```
$("<p>Hello</p>").insertAfter("#el");  // insérer après
$("<p>Hi</p>").insertBefore("#el");     // insérer avant
$("#el").remove();     // supprimer l'élément du DOM
$("#el").empty();      // supprimer tous les enfants
```

### Méthodes

| Command | Description |
|---------|-------------|
| `.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

| Command | Description |
|---------|-------------|
| `.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

| Command | Description |
|---------|-------------|
| `.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

| Command | Description |
|---------|-------------|
| `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

| Command | Description |
|---------|-------------|
| `.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

| Command | Description |
|---------|-------------|
| `$(":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

| Command | Description |
|---------|-------------|
| `$.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
});
```