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 script
dans l'entête du document HTML
:load
sur l'élément body
pour ne lancer un script que lorsque l'on est sûr que l'intégralité du document.addEventListener("DOMContentLoaded", gestionnaire, false);
. jQuery offre une méthode plus souple, à l'aide de la méthode ready :
]]>
et ]]>
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 JavaScript
de l’extension.$
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
machin
.$("*")
sélectionne tous les éléments.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
.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.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 :$("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.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)
.mouseenter
est lancé quand la souris pénètre « au-dessus » d'un élément. Il n'est actif qu'à l'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.jQuery
fournit deux manières de définir un gestionnaire d’événement :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 documentjQuery.fx.off = true;
permet de désactiver toutes les animations d'un document. jQuery.fx.off = false;
les réactive.$
permet de facilement créer des nœuds. par exemple, $("Un peu de texte
]]>")
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()
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 Un peu de texte important.]]>
, alert($("#p1").html());
affichera important.]]>
. 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
, très important."))]]>
a pour effet de remplacer le code source initial.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".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…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, $("(Fin de paragraphe)]]>").appendTo($("p"));
ajoute un élément span
à la fin de tous les paragraphes du document.after(contenu)
et before(contenu)
ajoutent contenu
respectivement après et avant l'élément sélectionné.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, $("(Fin de section)]]>").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é."));]]>
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, Paragraphe").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
: "+$(this).text()+"")});]]>
remplace ainsi au clic un élément em
par un élément strong
.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"
.