Cours jQuery
Plan du cours
I. Introduction
II. Les sélecteurs
III. Les évènements
IV. Quelques effets
V. Manipulation du DOM
2
I. Introduction
1. Principe
2. Utilisation
a. Chargement de la bibliothèque
b. Lancement au chargement de la page
c. Syntaxe
3. Utilisation de plugins
3
I. Introduction
[Link]
• jQuery est une bibliothèque JavaScript qui a pour but de de faciliter
des fonctionnalités communes de Javascript.
• C'est une librairie légère : "écrire moins, faire plus« (Write less do
more)
• Une fonction incontournable de cette bibliothèque est la
fonction jQuery() ou son alias $(), 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 [Link] 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.
4
I. Introduction
[Link]
Cette bibliothèque contient les fonctionnalités
suivantes:
• Sélection des éléments HTML
• Manipulation des éléments HTML
• Manipulation du CSS
• Fonctions d'événements HTML
• Effets JavaScript et animations
• Parcours et modification du DOM
• Ajax
5
I. Introduction
[Link]
✓Deux versions de JQuery sont disponibles :
une version minimale et une autre non
compressée (pour débugger ou lire)
✓Les deux versions sont disponibles à l'adresse :
[Link]
✓Si l'on ne veux pas stocker localement la
librairie elle est disponible en ligne
6
I. Introduction
[Link]
a. Chargement 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="[Link]"></script>
• La bibliothèque jQuery est stockée dans un fichier
unique en JavaScript, contenant toutes les
fonctions jQuery. 7
I. Introduction
[Link]
b. Lancement au chargement de la page
• jQuery offre une méthode plus souple, à l'aide de la
méthode ready :
On peut ainsi écrire :
$(document).ready(function(){
// Toutes les fonctions jQuery devront se trouver ici
});
8
I. Introduction
[Link]
• C. Syntaxe
La syntaxe de jQuery est faite sur mesure pour la sélection des
éléments HTML et effectuer certaines actions.
La syntaxe de base est la suivante : $ (sélecteur). action ()
• un signe $ pour définir JQuery
• un (sélecteur) afin de trouver les éléments HTML
• une action() JQuery a effectuer
JQuery utilise une combinaison de XPATH et CSS pour la sélection
des éléments
9
I. Introduction
[Link]
Exemple de base :
<html>
<head>
<script type="text/javascript" src="[Link]"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>Ceci est un titre</h2>
<p>Ceci est un paragraphe.</p>
<p>Un autre paragraphe.</p>
<button>Cliquer ici</button>
</body>
</html> 10
I. Introduction
[Link] des plugins
• 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 ([Link] 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.
11
II. Les sélecteurs
1. Sélecteurs de base
2. Filtrage
a. Filtre sur l’arborescence
b. Filtre de contenu
c. Filtre de visibilité
d. Filtre d’attributs
12
II. Les sélecteurs
1. Les sélecteurs de base
• La fonction $ permet de sélectionner directement des éléments à l’aide de
la syntaxe CSS . Du coup on distingue:
➔$("#ident") [Link]("ident") en plus court
a] Sélecteur natif:
➔$("h2") .eq(1) cible le deuxième élément h2 du document.
➔$("p").length donne le nombre de paragraphes dans un document.
➔$("p") sélectionne tous les éléments p du document.
b] Sélecteur de id:
➔$(" #truc") sélectionne l’élément portant l’identifiant truc.
c] Sélecteur de class:
➔$(" .truc") sélectionne les éléments portant la classe truc.
• $("*") 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.
13
II. Les sélecteurs
1. Les sélecteurs de base
• Exemples :
$(this).hide() : pour cacher l'élément HTML
courant.
$("#test").hide() : pour cacher l'élément HTML
dont l'ID est test.
$("p").hide() : pour cacher tous les éléments
HTML de type p.
$(".test").hide() ; pour cacher tous les éléments
possédant la classe "test".
14
II. Les sélecteurs
2. Filtrage
a. Filtres sur l'arborescence
• :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.
15
II. Les sélecteurs
2. Filtrage
b. Filtres de contenu
• :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.
16
II. Les sélecteurs
2. Filtrage
c. Filtres de visibilité
• :visible sélectionne les éléments qui sont visibles
• :hidden sélectionne les éléments qui ont été cachés (voir ci-
après)
d. Filtres d'attributs
• [attribut] sélectionne les éléments possédant
l'attribut attribut.
• [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.
17
18
19
III. Les évènements
1. Evénements du DOM
2. Nouveaux événements
3. Gestionnaires d’évènements
4. Méthode CSS avec Jquery
5. Exercice: Premiers effets
6. Exercice: Sélecteurs
20
III. Les évènements
1. Evènements du DOM
• 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 le
nom de la méthode à appliquer à l'élément
sélectionné.
• Par exemple :
$("p").click(function(){
alert("salut!")
})
21
III. Les évènements
2. Nouveaux Evénements
• 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, contrairement au mouseover qui, lui, est
lancé aussi quand la souris survole l'élément. Il est
associé à mouseleave, qui est actif quand la souris
quitte l'élément.
• scroll est lancé quand l'utilisateur fait défiler la
page.
22
III. Les évènements
3. Gestionnaires d’événements
• 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").click(Gestionnaire) ;
function Gestionnaire(evt)
{
alert("Ceci est un paragraphe") ;
}
• soit en codant directement le gestionnaire, par exemple...
$("p").click(function(){
alert("Ceci est un paragraphe");
}) ;
23
III. Les évènements
3. Gestionnaires d’événements
La principale fonction pour modifier le style d'un élément est
la méthode css().
• css(name,value) : fixe la valeur d'une propriété
• css({properties}) : pour en fixer plusieurs
Exemples :
• $("p").css("background-color","yellow");
• $("p").css({"background-color":"yellow","font-
size":"200%"});
24
III. Les évènements
4. Exercice: Premiers effets
• Insérer deux paragraphes P1 et P2 dans une
page html
• Ecrire un script qui permet, au clique sur P1,
de colorier son texte en vert
• Ecrire un autre script qui permet, au clique sur
P2, de colorier son texte en rouge
25
III. Les évènements
5. Exercice: Sélecteurs
• Insérer trois paragraphes dans une page html
avec la classe « vert » pour le paragraphe 1,
« jaune » pour le paragraphe 2 et « rouge » pour
le paragraphe 3.
• Au clique sur un paragraphe on colorie le texte
du paragraphe avec la couleur de la classe
correspondante.
26
IV. Quelques effets
1. Apparition, disparition
2. Effets personnalisés, contrôle
3. Exercice: Effets
27
IV. Quelques effets
1. Apparition, disparition
• 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.
28
IV. Quelques effets
2. Effets personnalisés, contrôle
• 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
• [Link] = true; permet de désactiver
toutes les animations d'un document.
• [Link] = false; les réactive.
29
IV. Quelques effets
4. Exercice: Effets
• Reprendre la page créée dans l’exercice
précédant. Insérer trois boutons 1, bouton 2 et
bouton 3 au dessus des paragraphes. On veut lier
chaque bouton à un paragraphe.
• Au chargement de la page seul le paragraphe 1
est affiché, le bouton 1 est colorié en noir et les
autres sont en gris.
• Au clique sur un bouton n le paragraphe n est
affiché le bouton n est colorié en noir et les
autres en gris
30
V. Manipulation du DOM
1. Création des noeuds
2. Modification des noeuds
3. Insertion de contenu
a- Insertion à l’intérieur d’un élément donnée
b- Insertion à l’extérieur d’un élément donnée
c-Insertion autour d’un élément donnée
4. Remplacement et suppression
5. Exercice: Manipulation du DOM
31
V. Manipulation du DOM
1. Création des noeuds
• 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
32
V. Manipulation du DOM
2. Modification des noeuds
• 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".
33
V. Manipulation du DOM
3. Insertion de contenu
a. Insertion à l'intérieur d'un élément donné
• Les méthodes append(contenu) et prepend(contenu)
ajoutent contenu à l'élément sélectionné, respectivement à sa
fin et à son début.
• 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.
34
V. Manipulation du DOM
3. Insertion de contenu
b. Insertion à l'extérieur d'un élément donné
• after(contenu) et before(contenu) sont des méthodes qui
ajoutent contenu respectivement après et avant l'élément
sélectionné.
• insertAfter(sélecteur) et insertBefore(sélecteur)
sont deux méthodes qui 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.
35
V. Manipulation du DOM
3. Insertion de contenu
c. Insertion autour d'un élément donné
• 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>"));
$("p").wrap([Link](div));
➔Permettent d'entourer tous les paragraphes par
un élément div.
36
V. Manipulation du DOM
4. Remplacement et bsuppression(1)
• replaceAll(sélecteur) permet de remplacer l'élément
indiqué par sélecteur par le contenu spécifié, 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").click(function(){$(this).replaceWith("
<strong>"+$(this).text()+"</strong>")});
➔remplace ainsi au clic un élément em par un
élément strong.
37
V. Manipulation du DOM
4. Remplacement et suppression(2)
• 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".
38
V. Manipulation du DOM
5. Exercice: Manipulation du DOM
• Créer une page HTML et mettez un formulaire
avec un champ texte et un bouton « valider ».
Et un paragraphe « Bonjour L3 info. »
• Ecrire une fonction qui récupère la valeur
saisie dans le champ, après clique sur le
bouton « valider » et l’ajoute au paragraphe.
• Le paragraphe final est comme suit :
« Bonjour L3 info. Vous avez saisi : valeur »
39