Aller au contenu

Programmation JavaScript/jQuery

Un livre de Wikilivres.

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]

$[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.

 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()[modifier | modifier le wikicode]

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

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

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

 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()[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!');
    });

Logo

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]

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[modifier | modifier le wikicode]