Retourner à la page d'accueil de TJS

Introduction à jQuery

Pourquoi jQuery ?

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 :

  • Sélection facile d'éléments dans page web
  • Requêtes Ajax/XMLHTTP
  • Animations et effets graphiques
  • Gestion d'événements

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 :

  • Un chargement de ressource supplémentaire (certes réduit à 32 Ko minifié et compressé),
  • L'obligation de détecter et d'attendre la fin du chargement du fichier dédié .js avant d'avoir accès au framework.
  • De moins bonnes performances d'exécution par rapport à du JavaScript natif (à relativiser dans la majorité des cas, car avant que la différence ne soit détectable par l'utilisateur, il y a quand même une sacrée marge).

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

Mise en route

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 :


Emulation de la console

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.

Quelques exemples d'usage de jQuery

Exemple complet d'appel Ajax, de mise à jour du DOM et d'animation

Ce court exemple, grâce à la syntaxe ultra compacte de jQuery, effectue :

  • Une requête Ajax
  • Plusieurs utilisations de sélecteurs et méthodes jQuery
  • Une animation

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

Emulation de la console

La gestion de plusieurs objets

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 :

Emulation de la console

Le chaînage jQuery

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 :

Emulation de la console

Le même résultat en JavaScript natif aurait pris pas loin d'une dizaine de lignes...

La bibliothèque de plugins

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 :

  • Des diaporamas / sliders
  • Des fonctionnalités pour les formulaires (liste déroulante à choix multiples, validation simplifiée, upload de fichiers...)
  • Des "widgets" ou éléments d'interface plus évolués (popups à base de <div>, menus "responsive"...)
  • Des utilitaires (par ex. export de tableau HTML vers CSV/Excel)

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.

Compléments

Sizzle

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/

Zepto

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

jQuery UI permet, en très peu de lignes de code, d'améliorer l'interactivité des interfaces avec :

  • des éléments manipulables par l'utilisateur : drag & drop, retallier, trier...
  • des éléments d'interface (widgets) avancés : menus, onglets, date picker, barre de progression...

Voir ces fonctionnalités en action sur : http://jqueryui.com/demos/

jQuery Mobile

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/

Tutoriel écrit par Frosty mis à jour le

Chercher une fonction, un objet, ...

Le 20/11/2017 03:02:49 sur php7 en 84.86 ms