Programmation JavaScript/jQuery
jQuery est un framework JavaScript libre lancé en janvier 2006 par John Resig.
Installation
[modifier | modifier le wikicode]Typiquement, il faut l'inclure depuis son site ou en le téléchargeant :
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
Pour vérifier la version installée ensuite, taper dans la console du navigateur (F12) :
console.log(jQuery().jquery);
Utilisation
[modifier | modifier le wikicode]Recherches
[modifier | modifier le wikicode]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"[1], et jQuery propose les méthodes ci-dessous pour ce faire :
.find()
[modifier | modifier le wikicode]Cherche tous les enfants de l'objet courant correspondant au paramètre.
.parents()
[modifier | modifier le wikicode]Cherche tous les parents de l'objet courant correspondant au paramètre.
.first()
[modifier | modifier le wikicode]Cherche le premier enfant de l'objet courant correspondant au paramètre.
.closest()
[modifier | modifier le wikicode]Cherche dans le premier parent de l'objet courant correspondant au paramètre.
.each()
[modifier | modifier le wikicode]Pour boucler sur tous les éléments possédant une classe :
$('.ma_classe').each(function(index, result) {
if (result.value === null) {
return true; // continue
}
if (result.value === "stop") {
console.log(index);
return false; // break
}
});
Évènements
[modifier | modifier le wikicode]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" :
$(document).on('change', '#mon_id', function () { ...
$('#mon_id').change(function() { ...
Les principaux évènements utilisés sont[2] :
.ready()
[modifier | modifier le wikicode]Quand la page est finie de charger.
.change()
[modifier | modifier le wikicode]Quand on change la valeur d'un champ.
.click()
[modifier | modifier le wikicode]Quand on clique sur un élément.
.addClass() et .removeClass()
[modifier | modifier le wikicode]Permettent de rajouter des classes à des éléments JQuery.
Depuis la v1.4, on peut y mettre des fonctions[3]. Par exemple pour retirer toutes les classes par préfixe (finissant par un nombre) :
monElement.removeClass(function (index, className) {
regex = new RegExp(monPrefix + '[0-9]+', 'g');
return (className.match(regex) || []).join(' ');
});
.ajax()
[modifier | modifier le wikicode]La méthode jQuery.ajax() permet comme son nom l'indique de lancer des requêtes AJAX, c'est-à-dire asynchrones[4] 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 :
$.ajax({
url: "http://www.example.com",
type: 'POST',
data: {
'id': 1,
},
dataType: 'json',
}).done(function(data) {
alert(data);
}).fail(function() {
alert('The file is missing!');
});
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[5].
Mots réservés
[modifier | modifier le wikicode]| 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[7] | |
| .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
[modifier | modifier le wikicode]- ↑ 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