Les forces de cette bibliothèque : simplifier l'écriture pour des besoins très fréquents en JavaScript, tout en garantissant une compatibilité confortable avec les principaux navigateurs, y compris d'anciennes versions (IE 9+).
Au programme de la plus connue des librairies JS :
Très en vogue au début des années 2010, le recours à cette bibliothèque devient moins systématique, notamment grâce à l'évolution des standards du web et des navigateurs.
En effet, le coût de jQuery est :
Ce site liste les fonctions de jQuery et leur équivalent en natif, permettant ainsi d'éviter de charger tout jQuery si on n'a besoin que d'une poignée de fonctions.
Voir aussi cette question StackOverflow (en anglais).
Créez un fichier HTML vide classique.
Téléchargez la dernière version de jQuery (un des deux premiers liens de "download" conviendra très bien)
et déplacez le fichier jquery-x.y.z.js ou plutôt la version compactée jquery-x.y.z.min.js dans le même répertoire.
Entre les balises <body>, rajoutez le chargement du fichier JavaScript contenant la bibliothèque.
Ce qui donne (adapté de l'exemple du site officiel) :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test jQuery</title>
</head>
<body>
<script src="jquery-x.y.z.min.js"></script>
<script>
// Votre code ici
</script>
</body>
</html>
A présent pour essayer jQuery, nous allons créer un <div>, auquel nous allons attacher un événement click()
pour afficher "Bonjour" dans un autre <div> lors de ce clic.
En HTML nous rajoutons donc :
<div id="cliquable">Clique moi</div> <div id="affichage">...</div>
Et à la place de Votre code ici, mettons :
$(document).ready(function() {
// la page et le document sont manipulables avec jQuery
console.log("jQuery détecte que le document est prêt");
$('#cliquable').click(function() {
console.log("jQuery détecte que le div#cliquable a reçu un click");
$('#affichage').html('Bonjour');
});
});
Cliquez sur l'élément Clique moi dans la zone d'exécution de l'exemple :
Pour bien comprendre :
$ représente JavaScript l'objet global jQuery.
Pour les habitués du PHP, $ n'a rien à voir avec la déclaration des variables !
On voit d'emblée qu'il est possible de désigner des éléments HTML et de leur appliquer des fonctionnalités JavaScript, de la même manière qu'on applique des styles en CSS. Il est possible de le faire également en natif avec document.querySelector() et document.querySelectorAll() mais jQuery va plus loin, comme nous le verrons ensuite.
Ce court exemple, grâce à la syntaxe ultra compacte de jQuery, effectue :
Après avoir récupéré des actualités sur le serveur sous formes d'un tableau d'objets (JSON), ce script affiche chaque actualité.
Lorsqu'on clique sur une actualité, cela fait apparaître son texte à l'aide d'une animation "slide".
Si on clique à nouveau dessus, le texte se replie.
Le code HTML pour afficher le container des résultats des actualités chargées.
<div class="actualite">Actualités</div> <div id="news"></div>
Le code JavaScript qui lance l'appel AJAX et traite le résultat.
$(document).ready(function() {
$.ajax(
{
url: "actualites.json?abcccc",
method: 'GET',
dataType: 'json',
success: function(resultat, statut) {
console.log("L'appel ajax se termine avec le statut '"+statut+"'");
resultat.forEach(function(element) {
var dateLisible = new Date(element.date);
dateLisible = dateLisible.getDate()+'/'+dateLisible.getMonth()+'/'+dateLisible.getFullYear();
$('#news').append('<div class="news-item" data-url="'+element.url+'">'
+ ' <div class="actuTitre">'+element.titre+'</div>'
+ ' <p>'+element.source+', le '+dateLisible+'</p>'
+ ' <p class="actuTexte" style="display:none;">'+element.texte+'</p>'
+ '</div>');
});
$('.news-item').click(function() {
console.log("Une actu est cliquée");
$(this).find('.actuTexte').slideToggle();
});
}
});
});
La force de jQuery est de pouvoir travailler sur un ensemble d'éléments HTML en une seule fois. Que le sélecteur jQuery retourne un ou plusieurs objets, l'action demandée s'appliquera d'office sur tous les éléments trouvés. Pas besoin de faire une boucle sur le tableau retourné par document.querySelectorAll() comme en JavaScript natif.
Créons de nombreux div.block qui vont être manipulés en un seul appel à jQuery.
<div class="block">Bloc</div><div class="block">Bloc</div> <div class="block">Bloc</div><div class="block">Bloc</div> <div class="block">Bloc</div><div class="block">Bloc</div> <div class="block">Bloc</div><div class="block">Bloc</div> <div class="block">Bloc</div><div class="block">Bloc</div>
Une seule petite ligne de jQuery ajoute la classe red à tous les éléments de classe block :
$("div.block").addClass("red");
Et voila :
jQuery prévoit une gestion des cas où aucun élément n'est retourné par le sélecteur. Si en JavaScript natif, un getElementById() sur un élément introuvable retourne null et génère une erreur, jQuery ignore simplement le traitement à effectuer. C'est réellement très pratique.
L'autre force de jQuery est de toujours retourner un ensemble d'objets qui peut recevoir l'appel à une nouvelle fonction.
Créons 3 div qui vont être manipulés par jQuery.
<div class="myDiv"></div> <div class="myDiv"></div> <div class="myDiv"></div>
Avec cette simple ligne, les 3 blocs passent en rouge, italique avec une bordure.
$("div.myDiv").html("via jQuery").addClass("red").addClass("italic").css("border","1px solid #000");
Et voila :
Le même résultat en JavaScript natif aurait pris pas loin d'une dizaine de lignes...
Le répertoire de plugins de jQuery dispose de plus de 2500 plugins qui s'intègrent parfaitement à jQuery.
Il s'agit le plus souvient d'éléments d'interface ou d'utilitaires.
Les plus populaires sont :
<div>, menus "responsive"...)Voir ici : http://www.jqueryscript.net/popular/ (en anglais)
Les plugins jQuery peuvent également être associés à un projet à l'aide du gestionnaire de packages npm.
Permet de charger uniquement la partie "sélecteur" de jQuery (par ex. Sizzle('.conteneur .element')),
qui pèse seulement 4 Ko compressée.
Pour correspondre à la syntaxe jQuery, on peut faire un var $ = Sizzle; au début du script.
Attention : retourne un tableau d'objets HTML natifs, et non d'objets jQuery. On ne peut donc pas leur appliquer
les méthodes de jQuery telles que .click(), .css('propriété', 'valeur'), .each(), etc.
Voir : https://sizzlejs.com/
Une bibliothèque presque équivalente à jQuery, en faisant quelques sacrifices sur la compatibilité avec les anciens navigateurs, ce qui lui permet d'être encore plus légère : moins de 10 Ko compressée. Voir : http://zeptojs.com/
jQuery UI permet, en très peu de lignes de code, d'améliorer l'interactivité des interfaces avec :
Voir ces fonctionnalités en action sur : http://jqueryui.com/demos/
Se présente comme un véritable framework, qui propose notamment des élements d'interface "responsive" (s'adaptent automatiquement aux différentes tailles d'écran disponibles : mobiles, tablettes, écrans de bureau)
Voir les démonstrations ici : http://demos.jquerymobile.com/
En savoir plus