# Programmation JavaScript/jQuery

* Introduction
    Programmer en deux minutes
*   * Page wiki
*   * Compteur en temps réel
*   * Site dans un document
* Outils de développement
* Syntaxe
** Ligne d'instruction
** Ordre d'évaluation
** Bloc d'instructions
** Identificateurs
** Expression littérale
** Commentaire
** Mots réservés
** Variables
** Opérateurs
** Structures de contrôle
** Exceptions et erreurs
** Fonctions utilisateur
** Évènement
* Objets prédéfinis
** window
** document
** navigator
** Array
** Boolean
** Date
** Error
** Function
** Math
** Number
** Object
** String
** Element
** RegExp
* Fonctions prédéfinies
* Programmation avancée
** Opérateurs de bits
** Fermeture
** Programmation objet
** Notation JSON
** AJAX
** Stockage
** Générateurs
** Interface DOM
** Objets Microsoft
* Frameworks
** Dojo
    Hello World
    Widgets
    Ressources
** jQuery
** Node.js
** React.js
* Tests
** Ava
** Jest
** Cypress
* Débogage
* Erreurs connues
* Références
* Introduction
    Programmer en deux minutes
*   * Page wiki
*   * Compteur en temps réel
*   * Site dans un document
* Outils de développement
* Syntaxe
** Ligne d'instruction
** Ordre d'évaluation
** Bloc d'instructions
** Identificateurs
** Expression littérale
** Commentaire
** Mots réservés
** Variables
** Opérateurs
** Structures de contrôle
** Exceptions et erreurs
** Fonctions utilisateur
** Évènement
* Objets prédéfinis
** window
** document
** navigator
** Array
** Boolean
** Date
** Error
** Function
** Math
** Number
** Object
** String
** Element
** RegExp
* Fonctions prédéfinies
* Programmation avancée
** Opérateurs de bits
** Fermeture
** Programmation objet
** Notation JSON
** AJAX
** Stockage
** Générateurs
** Interface DOM
** Objets Microsoft
* Frameworks
** Dojo
    Hello World
    Widgets
    Ressources
** jQuery
** Node.js
** React.js
* Tests
** Ava
** Jest
** Cypress
* Débogage
* Erreurs connues
* Références
[ Modifier le sommaire ]
jQuery est un framework JavaScript libre lancé en janvier 2006 par John Resig.

## Installation

Typiquement, il faut l'inclure depuis son site ou en le téléchargeant :
Pour vérifier la version installée ensuite, taper dans la console du navigateur (F12) :

## Utilisation
### Recherches

Afin de raccourcir la syntaxe au maximum, en jQuery le dollar ($) est un alias de la fonction jQuery servant à rechercher dans le DOM un nœud correspondant au sélecteur en paramètre.
Par exemple, entrer le sélecteur $('.data') dans la console du navigateur affiche un objet avec les éléments de la page au format jQuery.
Autre exemple pour rechercher par attribut de données : $('*[data-my-attribute-id="' + attribute_id + '"]').
Pour éviter des recherches absolues dans toute la page, on peut aussi lancer des recherches relatives à un nœud. Ceci est appelé le "traversing", et jQuery propose les méthodes ci-dessous pour ce faire :

#### .find

Cherche tous les enfants de l'objet courant correspondant au paramètre.

#### .parents

Cherche tous les parents de l'objet courant correspondant au paramètre.

#### .first

Cherche le premier enfant de l'objet courant correspondant au paramètre.

#### .closest

Cherche dans le premier parent de l'objet courant correspondant au paramètre.

#### .each

Pour boucler sur tous les éléments possédant une classe :

### Évènements

Il existe deux syntaxes pour écouter les évènements : l'une avec la méthode "on" et l'autre avec le nom de l'évènement directement. Exemple avec "change" :
Les principaux évènements utilisés sont :

#### .ready

Quand la page est finie de charger.

#### .change

Quand on change la valeur d'un champ.

#### .click

Quand on clique sur un élément.

### .addClass et .removeClass

Permettent de rajouter des classes à des éléments JQuery.
Depuis la v1.4, on peut y mettre des fonctions. Par exemple pour retirer toutes les classes par préfixe (finissant par un nombre) :

### .ajax

La méthode jQuery.ajax permet comme son nom l'indique de lancer des requêtes AJAX, c'est-à-dire asynchrones en XMLHttpRequest (XHR).
Pour appliquer un traitement dépendant du résultat de ces requêtes, il suffit de les faire suivre par les méthodes existantes qui correspondent à chaque type de résultat.
Par exemple, le code suivant récupère un fichier et affiche son contenu, ou une erreur si le fichier est inaccessible :
Le style avec callbacks "error: / success:" sous "url:" est moins bien géré au niveau "defer" que les méthodes ".done et .fail" (voire ".then et .fail"), introduites dans la v1.5.

## Mots réservés

Liste des mots spécifiques en jQuery :
| Nom | Fonction |
| $, jQuery | Fonction de sélection, et d'initialisation |
| holdReady | Retiens ou relâche un évènement jQuery |
| noConflict | Supprime un mot réservé |
| sub | Crée une copie modifiable d'un objet jQuery |
| when | Planifie des objets |
| each | Sélectionne chaque élément d'un objet |
| parents | Sélectionne tous les éléments parents |
| parent | Sélectionne le parent direct |
| children | Sélectionne tous les enfants |
| closest | Sélectionne l'élément le plus proche avec une certaine caractéristique (évite des parent.parent.parent). |
| hasClass | Renvoie si l'élément à une classe |
| addClass | Ajoute une classe |
| removeClass | Retire une classe |
| toggleClass | Échange deux classes |
| Sélecteurs ||
| :animated | Sélectionne les éléments animés |
| :hidden | Sélectionne les éléments cachés |
| :visible | Sélectionne les éléments visibles |
| :first | Sélectionne le premier élément |
| :last | Sélectionne le dernier élément |
| :even | Sélectionne les éléments pairs |
| :odd | Sélectionne les éléments impairs |
| :eq(index) | Sélectionne le nème élément |
| :gt(index) | Sélectionne les éléments supérieurs au nème |
| :lt(index) | Sélectionne les éléments inférieurs au nème |
| :input | Sélectionne les champs modifiables |
| :text | Sélectionne les champs texte |
| :radio | Sélectionne les boutons radio |
| :checkbox | Sélectionne les cases à cocher |
| :checked | Sélectionne les boutons radio et cases à cocher cochés |
| :first-child | Sélectionne le premier élément enfant |
| :last-child | Sélectionne le dernier élément enfant |
| parent > child | Sélectionne le premier enfant d'un parent |
| Méthodes ||
| .attr | Affiche ou remplace la valeur d'un attribut |
| .val | Affiche ou remplace la valeur d'un champ |
| .html | Affiche ou remplace l'objet par de l'HTML |
| .text | Affiche ou remplace l'objet par du texte |
| .prepend | Ajoute le paramètre avant l'objet, dans la balise |
| .append | Ajoute le paramètre après l'objet, dans la balise |
| .prependTo | Ajoute l'objet avant le paramètre, dans la balise |
| .appendTo | Ajoute l'objet après le paramètre, dans la balise |
| .before | Ajoute le paramètre avant l'objet |
| .after | Ajoute le paramètre après l'objet |
| .insertBefore | Ajoute l'objet avant le paramètre |
| .insertAfter | Ajoute l'objet après le paramètre |
| .wrap | Ajoute les balises en paramètre autour de l'objet |
| .wrapInner | Ajoute les balises en paramètre autour de l'objet à l'intérieur |
| .wrapAll | Ajoute les balises en paramètre autour des objets |
| .clone | Duplique un objet |
| .empty | Vide un objet |
| .remove | Retire un objet |
| .removeAttr | Retire un attribut |
| .replaceWith | Remplace l'objet par le paramètre |
| .replaceAll | Remplace le paramètre par l'objet |

## Références

* ↑ https://api.jquery.com/category/traversing/
* ↑ https://api.jquery.com/category/events/
* ↑ https://stackoverflow.com/questions/2644299/jquery-removeclass-wildcard
* ↑ http://api.jquery.com/jquery.ajax/
* ↑ https://stackoverflow.com/questions/10931836/should-i-use-done-and-fail-for-new-jquery-ajax-code-instead-of-success-and
* ↑ http://api.jquery.com/category/core/
* ↑ http://tutorials.jenkov.com/jquery/dom.html