JQuery

Bibliothèque JavaScript open-source qui simplifie considérablement l’utilisation de JavaScript dans les sites web : - manipulation de la DOM HTML - manipulation de sélecteurs CSS - gestion des événements HTML - effets et animations - AJAX - des plugins complémentaires disponibles…

⚙

Outils : https://jquery.com/

📌

Pour aller plus loin : https://api.jquery.com/ (documentation) https://www.w3schools.com/jquery/jquery_intro.asp

⚠️

Actuellement la librairie JavaScript la plus utilisée, son implémentation dans les nouveaux projets se fait de plus en plus rare.

Mise en place

télécharger la librairie
- par exemple avec npm install jquery, ce qui installe jQuery dans le dossier “node_modules” à l’intérieur duquel on retrouve notamment la librairie décompressée (node_modles/jquery/dist/jquery.min.js)

possibilité d’utiliser plutôt un CDN (content delivery network)

ℹ️

L’un des avantages d’utiliser un CDN est un gain de performance sur la rapidité de chargement de la librairie : 1. le fichier sera téléchargé à partir du serveur le plus proche géographiquement, 2. si l’utilisateur a déjà une copie du fichier issue du même CDN, alors cette copie sera utilisée à partir du cache (et non téléchargée).

Ajout au fichier HTML

Dans la section <head>, on référence la librairie dans une balise <script>, en indiquant avec l’attribut src soit le chemin du fichier soit l’adresse CDN.

<head>
	<script src="jquery-3.6.3.min.js"></script>
</head>

BP : Il est recommandé de placer la librairie dans le répertoire du projet, avec les fichiers HTML qui l’appellent.

Utiliser jQuery

On reconnait son utilisation soit au mot-clé JQuery soit au symbole $.

La syntaxe basique est : $(selector).action()

avec le dollar qui permet d’accéder à jQuery,

l’appel du sélecteur qui permet de “trouver” l’élément HTML que l’on souhaite utiliser,

l’appel d’une méthode jQuery qui permet d’effectuer une action sur cet élément.

Sélecteurs CSS

Il est possible d’utiliser tous les sélecteurs CSS avec jQuery(selector) ou $(selector).

La notation CSS est respectée, avec notamment l’appel simple des éléments du DOM (”body”, “p”, “div”…), l’appel des classes avec un point (”.class”), l’appel des identifiants uniques avec un sharp (”#id”), l’appel des pseudo-classes avec deux-points (”:first-child”), l’appel des pseudo-éléments avec deux fois deux-points (”::after”).

ℹ️

Cette notation simplifie et remplace le document.getElementById("monId").

📌

Pour aller plus loin : https://www.w3schools.com/jquery/jquery_ref_selectors.asp

Événements

La gestion des événements est également simplifiée : la plupart sont gérés dans des méthodes du même nom.

événements liés à la souris : click(), dbclick(), mouseenter(), mouseleave(), hover()...

événements liés au clavier : keypresss(), keydown(), keyup()...

événement liés à un formulaire : submit(), change(), focus(), blur()...

événements liés au document ou à la fenêtre : ready(), load(), resize(), scroll(), unload()...

Une fois un événement lié à un élément HTML, des instructions lui sont données à travers une fonction : $("p").click(function() { instructions });.

Une syntaxe équivalente utilise la fonction on() qui s’applique sur le nom de l’événement et la fonction à utiliser : $("p").on("click", function() { instructions });.

Elle permet également de lier plusieurs événement à un même élément, listés avec des accolades :

$("p").on({
  hover: function(){ instructions },
  click: function(){ instructions },
  dbclick: function(){ instructions }
});

Il est possible d’annuler le comportement par défaut d’un événément avec : event.preventDefault().

L’événément document ready

Toutes les fonctionnalités créées avec jQuery sont généralement regroupées au sein de l’événement $(document).ready(function(){ toutes mes instructions jQuery });, qui s’assure que le document soit entièrement et correctement chargé avant de lancer le code jQuery.

Méthodes disponibles

Pour manipuler les éléments :

// manipuler un element
let unElement = $(selecteur);
unElement.html();
unElement.text();
unElement.attr();
unElement.width();
unElement.height();
unElement.val();
unElement.css();
unElement.addClass();
unElement.removeClass();

// manipuler une collection d'elements
let desElements = $(selecteur);
desElements.each(function() {
	console.log($(this).text());
})

Les méthodes sont à la fois getter et setter ! Il suffit d’ajouter un paramètre pour modifier la valeur de l’élément.

let h = $("#zone").height(120); // setter
h = $("#zone").height(); // getter

Pour créer, ajouter et supprimer des éléments :

// creer un element
let maDiv = $("<div>une nouvelle div</div>");
let monBouton =
    $("<button/>", {
        html: "Valider",
        class: "mon-btn"
    });
let unAutreBouton = monBouton.clone();

// ajouter un element dans le HTML
// - dans un sens...
monNouvelElement.insertAfter(unElementExistant);
monNouvelElement.insertBefore(unElementExistant);
monNouvelElement.appendTo(unElementExistant);
monNouvelElement.prependTo(unElementExistant);
// - ... ou dans l'autre
unElementExistant.after(monNouvelElement);
unElementExistant.before(monNouvelElement);
unElementExistant.append(monNouvelElement);
unElementExistant.prepend(monNouvelElement);

// supprimer un element
unElement.remove();
unElement.empty();
unElement.detach();

Méthodes utilitaires de l’objet racine (désigné avec $) :

// en vrac
$.trim("chaîne de caractères");

$.each(tableau, function(index, valeur) {...});
$.each(objet, function(propriete, valeur){...});

$.inArray(valeurARechercher,tableau);

$.data(element, cle, valeur);
let valeur = $.data(element, cle);

$.isNumeric(valeur);

AJAX

Asynchronous JavaScript and XML.

AJAX permet de recharger une partie de la page sans avoir à tout recharger. —> énorme à l’époque !

ℹ️

En comparaison, PHP oblige le rechargement de la page (un des points négatifs).

📌

Pour aller plus loin : https://www.w3schools.com/jquery/jquery_ref_ajax.asp

jQuery met à disposition un objet $.ajax tel que $.ajax( configuration ) .done(...) .fail(...) .always(...):

la configuration initiale où on spécifie l’url (serveur, API…), selon la requête on peut envoyer des données, et enfin la méthode (POST, GET…)

on peut lui ajouter une ou plusieurs fonctions qui vont être exécutées
- tout s’est bien passé : fonction .done()
- ça n’a pas marché : fonction .fail()
- dans tous les cas, on peut appeler .always() (équivalente du finally dans un try…catch)
Elles prennent différents paramètres : données, statut, xhr (la requête en elle-même)…

Le fonctionnement un peu asynchrone : on sait pas exactement quand la méthode .done() va s’exécuter.

$.ajax(
    // configuration
    {
    url: uneURL,
    [data: dataAEnvoyer,]
    method: "POST|GET|PUT|DELETE"
    })
    // traitement du resultat
    .done(function(data, status, xhr) { instructions })
    .fail(function(xhr, status, errorThrown) { instructions })
    .always(function(data, xhr, errorThrown) { instructions });