Conditions d'utilisation et licence
Cette création est mise à disposition par Gilles Chagnon sous un contrat Creative Commons.
version 1.1.3, dernière mise à jour le 17 octobre 2018.
jQuery est une bibliothèque JavaScript qui a pour but de soulager le développeur des tâches fastidieuses de gestion de compatibilité inter-navigateurs, ainsi que de lui fournir des effets classiques « clef en main ». Une fonction incontournable de cette bibliothèque est la fonction $, qui a de multiples usages comme nous allons le voir. Le but de ce chapitre n'est pas de donner une liste détaillée de toutes les propriétés et méthodes définies par cette bibliothèque. Le site officiel de jQuery le fait bien plus complètement ; il s'agit simplement de fournir les bases permettant de saisir le principe de fonctionnement de la bibliothèque.
Pour commencer, il faut évidemment télécharger la bibliothèque, qui est disponible sur le site officiel. Il suffit ensuite de l'incorporer à l'aide d'un élément script dans l'entête du document HTML :
<script type="text/javascript" src="CheminRelatifVersLeFichierjQuery.js">
</script>
Le script doit être présent sur le serveur afin de limiter les risques de rejet du code lié à la protection contre les scripts inter-domaines.
Il est usuel d'utiliser l'événement load sur l'élément body pour ne lancer un script que lorsque l'on est sûr que l'intégralité du DOM a été chargée, ou, mieux, de ne lancer un gestionnaire qu'une fois que le DOM de la page a été chargé : document.addEventListener("DOMContentLoaded", gestionnaire, false);. jQuery offre une méthode plus souple, à l'aide de la méthode ready :
$(document).ready(GestionnaireALancer) ;
On peut ainsi écrire...
$(document).ready(function(){...}) ;
... ou...
$(document).ready(Gestionnaire) ;
function Gestionnaire(evt)
{
...}
Il suffit de placer cette ligne de code entre les balises <script> et </script> dans l'entête du document HTML.
jQuery est très utile en combinaison avec des extensions, ou plugins. Il en existe de toutes sortes, disponibles sur le site officiel des plugins, où des démonstrations sont possibles. Avant de réaliser un effet, il est souvent judicieux de vérifier s’il n’existe pas déjà un plugin qui permet de le réaliser, souvent avec des options attractives.
Pour utiliser un plugin, il suffit de charger au préalable la bibliothèque, puis le fichier JavaScript de l’extension.
La fonction $ permet de sélectionner directement des éléments à l’aide de la syntaxe CSS :
$("#ident") sélectionne l'élément d'identifiant ident ; c'est donc l'équivalent d'un document.getElementById("ident") en plus court
$("nomÉlément") sélectionne les éléments portant un nom donné. Par exemple, $("p") sélectionne tous les éléments p du document. Il s'agit toujours d'un tableau à une dimension (même s’il n’y a qu’un seul élément dans le document) : par exemple, $("h2")[1] cible le deuxième élément h2 du document.
$(".truc") sélectionne les éléments portant la classe truc, c'est-à-dire tous ceux pour lesquels l'attribut class vaut truc. De même, $(".truc.machin") sélectionne les éléments portant les classes truc
et
machin.
$("*") sélectionne tous les éléments.
Il est possible d'indiquer plusieurs sélecteurs, à la manière des CSS : $(".truc, div, #machin") sélectionne tous les éléments de classe truc, tous les éléments div et l'élément d'identifiant machin.
Remarque : la plupart du temps, on obtient un tableau. Sa taille est évidemment disponible grâce à la propriété length. Par exemple, $("p").length permet de connaître le nombre de paragraphes dans un document.
:first sélectionne le premier élément d'une collection, :last le dernier. Par exemple, $(".truc:last") sélectionne le dernier élément de classe truc dans le document.
:not(selecteur) permet de retirer de la sélection tous les éléments spécifiés. Par exemple, $(".truc:not(.machin)") permet de sélectionner tous les éléments de classe truc ne possédant pas la classe machin.
:header sélectionne tous les titres (h1, h2, etc.)
:odd et :even sélectionne tous les éléments d'ordre respectivement impair et pair d'une collection. Par exemple, $(tr:even) sélectionne les lignes de tableau n°0, 2, 4, etc.
contains(texte) sélectionne tous les éléments contenant un texte donné (par exemple $("p:contains(’test’)") cible tous les paragraphes contenant le texte "test".
has(sélecteur) sélectionne les éléments contenant au moins un élément sélectionné par sélecteur. Par exemple, $("li:has(ul)") sélectionne les éléments d'item de liste (li) contenant au moins une liste.
:empty sélectionne les éléments vides.
:visible sélectionne les éléments qui sont visibles
:hidden sélectionne les éléments qui ont été cachés (voir ci-après)
[attribut] sélectionne les éléments possédant l'attribut attribut. Par exemple, $("img[longdesc]") sélectionne les éléments img possédant un attribut longdesc.
[attribute=valeur] sélectionne les éléments possédant un attribut attribut valant valeur. Par exemple, $("td[colspan=2]") sélectionne les cellules de tableaux s'étendant sur deux colonnes.
Les événements de la spécification du DOM sont baptisés simplement en enlevant le préfixe on de l'attribut HTML correspondant : on obtient alors l'événement click associé au clic de la souris. Pour gérer un événement, on utilise la méthode on, appliquée à un objet de type jQuery (renvoyé par la fonction $), et qui peut prendre trois paramètres :
une chaîne de caractères indiquant l'événement à détecter ;
une chaîne de caractères précisant éventuellement des éléments descendats (voir ci-après) ;
le nom d'une fonction à appeler quand l'événement est déclenché (ce nom doit être écrit sans parenthèses).
On écrira par exemple $("p").on("mouseover", "", survol) pour lancer la fonction survol quand la souris passe au-dessus des paragraphes, et $("p").on("mouseover", "em", survol) pour ne la lancer qu'au passage des éléments em dans les paragraphes.
On retire un gestionnaire d'événement avec la méthode off appelée avec les mêmes paramètres que le on qui avait servi à l'associer. Ici par exemple, on écrira $("p").off("mouseover", "", survol).
jQuery définit de nouveaux événements. En voici quelques-uns :
mouseenter est lancé quand la souris pénètre « au-dessus » d'un élément. Il n'est actif qu'à l'entrée de la souris, au contraire de mouseover qui, lui, est lancé aussi quand la souris survole l'élément. Il est associé à mouseleave, qui est son pendant quand la souris quitte l'élément.
scroll est lancé quand l'utilisateur fait défiler la page.
Pour mémoire, un gestionnaire d’événement est une fonction destinée à être lancée en réponse à une action de l’utilisateur (par exemple un clic de souris sur un élément donné). De la même manière qu’avec le DOM, jQuery fournit deux manières de définir un gestionnaire d’événement :
soit en indiquant le nom du gestionnaire, par exemple...
$("p").on("click", "", Gestionnaire) ;
function Gestionnaire(evt)
{
alert("Ceci est un paragraphe") ;
}
soit en codant directement le gestionnaire, par exemple…
$("p").on("click", "", function(){alert("Ceci est un paragraphe");}) ;
show() et hide() permettent respectivement de montrer et cacher des éléments. Par exemple, $("p").hide() cache tous les paragraphes du document.
show(vitesse) et hide(vitesse) permettent respectivement de montrer et cacher des éléments avec une certaine vitesse. Cette vitesse est indiquée par des mots-clefs ("slow", "normal" ou "fast") ou le nombre de millisecondes que doit durer l'animation.
toggle() et toggle(vitesse) permettent de basculer d'un mode d'affichage à un autre (un élément caché devient visible, ou un élément visible devient caché).
slideDown() et slideUp() permettent de faire apparaître (respectivement disparaître) un élément à la manière d'un store se déroulant ou s'enroulant.
slideToggle() permet de basculer d'un mode d'affichage à un autre.
fadeIn(vitesse) et fadeOut(vitesse) permettent de faire progressivement apparaître (ou disparaître) un élément en jouant sur sa transparence.
animate(paramètres) permet de contrôler une animation, via par exemple les propriétés CSS.
stop() arrête toutes les animations en cours sur le document
jQuery.fx.off = true; permet de désactiver toutes les animations d'un document. jQuery.fx.off = false; les réactive.
La fonction $ permet de facilement créer des nœuds. par exemple, $("<div><p>Un peu de texte</p></div>") crée un élément div contenant un paragraphe. Attention cependant, un tel élément reste « en suspens » tant qu'il n'a pas été explicitement rattaché au DOM, de même qu'un élement créé avec la méthode
createElement()
.
jQuery facilite l'accès et la modification des contenus des nœuds.
Le code HTML est accessible via la méthode html(). Si cette méthode est appelée sans argument, elle renvoie le contenu HTML de l'élément sélectionné. Ainsi, si on a <p id="p1">Un peu de texte <em>important</em>.</p>, alert($("#p1").html()); affichera Un peu de texte <em>important</em>.. Si cette méthode est appelée avec argument, alors elle permet de modifier le contenu HTML. Toujours avec le même code source HTML, alert($("#p1").html("Un peu de texte <strong>très important</strong>."))a pour effet de remplacer le code source initial.
La méthode text() permet, elle, de lire ou de modifier le contenu textuel des éléments auxquels elle est appliquée. $("#id1").text() lit ainsi le contenu de l'élément d'identifiant id1, alors que $("li").text("salut"); permet de modifier le contenu de tous les éléments li en "salut".
Les méthodes append(contenu) et prepend(contenu) ajoutent contenu à l'élément sélectionné, respectivement à sa fin et à son début. Ces méthodes peuvent prendre en paramètres des éléments, des objets jQuery, du texte…
Les méthodes appendTo(sélecteur) et prependTo(sélecteur) ajoutent l'élément sélectionné à la fin (respectivement au début) de l'élément spécifié par sélecteur. Par exemple, $("<span>(Fin de paragraphe)</span>").appendTo($("p")); ajoute un élément span à la fin de tous les paragraphes du document.
Les méthodes after(contenu) et before(contenu) ajoutent contenu respectivement après et avant l'élément sélectionné.
Les méthodes insertAfter(sélecteur) et insertBefore(sélecteur) ajoutent l'élément sélectionné après (respectivement avant) l'élément spécifié par sélecteur. Par exemple, $("<p>(Fin de section)</p>").insertBefore($("*:header:not(h1)")); ajoute un paragraphe avant tous les titres du document, à l'exception des titres h1.
wrap(html) permet d'intégrer l'élément sélectionné dans le code HTML spécifié.
wrap(élément) permet d'intégrer l'élément sélectionné dans l'élément spécifié.
Par exemple, $("p").wrap($("<div></div>")); et $("p").wrap(document.createElement(div)); permettent d'entourer tous les paragraphes par un élément div.
replaceAll(sélecteur) permet de remplacer l'élément indiqué par sélecteur par le contenu spécifié :ar exemple, $("<p>Paragraphe</p>").replaceAll("h3"); remplace tous les titres de niveau 3 par des paragraphes avec le même contenu. replaceWith(contenu) permet de remplacer l'élément sélectionné par contenu : $("em").on("click", "", function(){$(this).replaceWith("<strong>"+$(this).text()+"</strong>")}); remplace ainsi au clic un élément em par un élément strong.
Pour vider un élément sélectionné, on fait appel à la méthode empty(). Par exemple, $("#p1").empty() laisse présent l'élément d'identifiant p1, mais supprime tous ses enfants. La méthode remove(expression) supprime de l'élément sélectionné le contenu indiqué par expression. Par exemple, $("p").remove($(":contains('test')")); supprime tous les paragraphes contenant la chaîne de caractères "test".
Cette création est mise à disposition par Gilles Chagnon sous un contrat Creative Commons.