Programmation JavaScript/jQuery

Dojo/Ressources

Node.js

jQuery est un framework JavaScript libre lancé en janvier 2006 par John Resig.

Programmation JavaScript

Dojo/Ressources

Node.js

Installation

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

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.

c'est équivalent au JS document.querySelectorAll() mais qui renvoie un objet jQuery.

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()

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

équivalent au JS .querySelector() mais renvoie un objet jQuery.

.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 :

$('.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

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()

Quand la page est finie de charger.

.change()

Quand on change la valeur d'un champ.

On ne peut pas accéder à l'ancienne valeur depuis cette méthode (uniquement à la nouvelle), il faut donc la dupliquer dans le DOM avant si besoin.

.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^[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()

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

Liste des mots spécifiques en jQuery^[6]
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

[1] ttps://api.jquery.com/category/traversing/

[2] ttps://api.jquery.com/category/events/

[3] ttps://stackoverflow.com/questions/2644299/jquery-removeclass-wildcard

[4] ttp://api.jquery.com/jquery.ajax/

[5] ttps://stackoverflow.com/questions/10931836/should-i-use-done-and-fail-for-new-jquery-ajax-code-instead-of-success-and

[6] ttp://api.jquery.com/category/core/

[7] ttp://tutorials.jenkov.com/jquery/dom.html

[1]

[2]

[3]

[4]

[5]

[6]

[7]