Scribd
Importer
195 vues114 pages

Coursj Query 1

Transféré par

azade zerri
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
195 vues114 pages

Coursj Query 1

Transféré par

azade zerri
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

Les bases de jQuery

Achref El Mouelhi

Docteur de l’université d’Aix-Marseille


Chercheur en programmation par contrainte (IA)
Ingénieur en génie logiciel

elmouelhi.achref@gmail.com

H & H: Research and Training 1 / 76


Plan
1 Introduction
2 Intégration de jQuery
3 Un premier Hello world
4 Les méthodes .html() et .text()
5 Les méthodes .attr(), .val() et .prop()
6 Les méthodes .css() et .xClass()
7 Les méthodes de filtrage et de recherche
8 Les méthodes .wrap() et .data()
9 Ajouter et supprimer un nœud
10 Les évènements
11 Quelques opérations sur les tableaux

H & H: Research and Training 2 / 76


Introduction

jQuery

H I ©
UEL
O
f E LM
ch r e
©A

H & H: Research and Training 3 / 76


Introduction

jQuery

jQuery
H I ©
EL
une bibliothèque JavaScript lancée par John Resig en 2006
U
O
f E LM
conçue pour simplifier l’écriture de codes JavaScript et AJAX

r e
librairie front-end la plus utilisée au monde
ch
©A
basée sur le concept de sélecteur CSS 3

H & H: Research and Training 4 / 76


Intégration de jQuery

jQuery
Deux solutions possibles

Télécharger la bibliothèque jQuery et l’intégrer dans le fichier HTML comme


n’importe quel fichier JS grâce à la balise
<script src = ...> </script>

H I ©
Faire référence à une version en ligne (CDN) du fichier jQuery dans la balise
<script src = ...> </script>
UEL
O
f E LM
ch r e
©A

H & H: Research and Training 5 / 76


Intégration de jQuery

jQuery
Deux solutions possibles

Télécharger la bibliothèque jQuery et l’intégrer dans le fichier HTML comme


n’importe quel fichier JS grâce à la balise
<script src = ...> </script>

H I ©
Faire référence à une version en ligne (CDN) du fichier jQuery dans la balise
<script src = ...> </script>
U EL
O
f E LM
CDN : Content Deliveryc h ?r e
© A Network

un réseau de serveurs installés dans plusieurs villes et/ou pays sur lesquels sont
mis à disposition des fichiers tels que jQuery/Bootstrap...

en appelant un fichier jQuery à partir d’un fichier HTML sur un CDN, un


téléchargement rapide sera effectué puisqu’on aura accès au plus proche d’où
on se trouve.

H & H: Research and Training 5 / 76


Intégration de jQuery

jQuery

Deux versions disponibles en téléchargement

H
compressed version (version de production) : le code est I ©
UEL
compressé, le fichier est beaucoup moins volumineux (diminue la
O
f E LM
consommation de bande passante du site) mais illisible

r e
uncompressed version (version de développement) : code
ch
©A
source lisible, pratique en cas de debug pour savoir sur quelle
fonction le script a planté

H & H: Research and Training 6 / 76


Intégration de jQuery

jQuery

Première solution

H I
Aller sur https://jquery.com/download/ et télécharger©
une version stable compressée de jQuery
U EL
M O
f E L le répertoire dans le répertoire de
Placer le fichier téléchargé dans
votre projet
c h re
© A à ce fichier dans la balise <script src = ...>
Faire référence
</script>

H & H: Research and Training 7 / 76


Intégration de jQuery

jQuery
Première solution
<!DOCTYPE html>
<html>
<head>
<title> jQuery test </title>
H I ©
EL
<link rel="stylesheet" href="style.css">
</head>
O U
LM
<body>
...
r e f E
ch
<script src="chemin/vers/mon/fichier/jquery-3.1.0.min

©A
.js"></script>
<script src = script.js>
// script.js fichier contenant les scripts qui
utiliseront la librairie jQuery
</script>
</body>
</html>

H & H: Research and Training 8 / 76


Intégration de jQuery

jQuery

Pour la deuxième solution : plusieurs hébergeurs

jQuery : https://code.jquery.com/jquery-3.4.1.js

H I ©
Google : http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js

EL
Microsoft : http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.js
U
O
f E LM
ch r e
©A

H & H: Research and Training 9 / 76


Intégration de jQuery

jQuery

Pour la deuxième solution : plusieurs hébergeurs

jQuery : https://code.jquery.com/jquery-3.4.1.js

Google : http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js
H I ©
EL
Microsoft : http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.js
U
O
f E LM
ch r e
©A
Remarque

Une version compressée de jQuery existe chez tous les hébergeurs (il suffit d’ajouter
.min avant .js)

Dans ce cours, on utilisera la version complète hébergée par jQuery

H & H: Research and Training 9 / 76


Intégration de jQuery

jQuery

Comment l’utiliser ?
Copier un des liens précédents
H I ©
UEL
O
Coller le comme valeur de l’attribut src de la balise
<script src = ...> </script>
f E LM
ch r e
Placer les balises <script> avant la fermeture de la balise
©A
</body> de votre fichier HTML en commençant par celle qui
importe la libraire jQuery

H & H: Research and Training 10 / 76


Intégration de jQuery

jQuery
Deuxième solution

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> jQuery test </title>
H I ©
<link rel="stylesheet" href="style.css">
UEL
</head>
O
<body>
f E LM
...

ch r e
<script src="https://code.jquery.com/jquery-3.4.1.js">
</script>
©A
<script src=script.js>
// script.js fichier contenant les scripts qui
utiliseront la librairie jQuery
</script>
</body>
</html>

H & H: Research and Training 11 / 76


Un premier Hello world

jQuery
Le body du index.html Le fichier script.js
<button id=but> $("#but").click(
cliquer function(){
</button> console.log("Hello World! ");
}
H I ©
EL
);

O U
f E LM
ch r e
©A

H & H: Research and Training 12 / 76


Un premier Hello world

jQuery
Le body du index.html Le fichier script.js
<button id=but> $("#but").click(
cliquer function(){
</button> console.log("Hello World! ");
}
H I ©
EL
);

O U
Explication
f E LM
ch r e
$() : la fonction magique qui prend en paramètre un sélecteur
©A
$ : opérateur utilisé par certains langages et frameworks (PHP, Angular
JS, EL...). En effet, $ est l’abrégé de la fonction principale jQuery() (à
utiliser en cas de conflit)

H & H: Research and Training 12 / 76


Un premier Hello world

jQuery
Le body du index.html Le fichier script.js
<button id=but> $("#but").click(
cliquer function(){
</button> console.log("Hello World! ");
}
H I ©
EL
);

O U
Explication
f E LM
ch r e
$() : la fonction magique qui prend en paramètre un sélecteur
©A
$ : opérateur utilisé par certains langages et frameworks (PHP, Angular
JS, EL...). En effet, $ est l’abrégé de la fonction principale jQuery() (à
utiliser en cas de conflit)

Si ReferenceError: jQuery is not defined ou ReferenceError:


$ is not defined, vérifier le chargement de la librairie jQuery.
H & H: Research and Training 12 / 76
Un premier Hello world

jQuery
Remarque

Avant de manipuler des éléments dans votre page, il faut attendre


que cette dernière soit correctement chargée (le DOM est bien
analysé)
H I ©
E
Cette opération est réalisée par la méthode
U L
$(document).ready(· · · ) de jQuery
L MO
r e f E
A ch
©

H & H: Research and Training 13 / 76


Un premier Hello world

jQuery
Remarque

Avant de manipuler des éléments dans votre page, il faut attendre


que cette dernière soit correctement chargée (le DOM est bien
analysé)
H I ©
E
Cette opération est réalisée par la méthode
U L
$(document).ready(· · · ) de jQuery
L MO
r e f E
A
Le fichier script.jsch
©
$(document).ready(function(){
$("#but").click(function(){
console.log("Hello World!");
});
});
H & H: Research and Training 13 / 76
Un premier Hello world

jQuery

On peut aussi utiliser le raccourci


H I ©
$(function() {
UEL
$("#but").click(function(){
O
console.log("Hello World!");
f E LM
});
ch r e
©A
});

H & H: Research and Training 14 / 76


Un premier Hello world

jQuery

On peut aussi préciser la zone de recherche


$(function() {
$("#but","body").click(function(){
H I ©
console.log("Hello World!");
UEL
}); O
});
f E LM
ch r e
© A
Le deuxième paramètre (optionnel) correspond à la zone dans laquelle
la recherche est effectuée, par défaut la recherche s’effectue dans tout
le document

H & H: Research and Training 15 / 76


Les méthodes .html() et .text()

jQuery
Plaçons ce code dans le body d’index.html Le fichier style.css
<div id=container> .red {
Considérons les paragraphes suivants : color: red;
<p class=blue> bonjour </p> }
<p class=red> bonsoir, voici <a href="http
://www.lsis.org/elmouelhia/"> ma page </a
H I ©{
.blue
></p>
UEL color: blue;
<p class="blue"> salut </p>
O }
</div>
f E LM
ch r e .green {
color: green;

©A }

Pour récupérer le contenu d’une balise


.html() ≡ .innerHTML en JS
.text() ≡ .textContent en JS
H & H: Research and Training 16 / 76
Les méthodes .html() et .text()

jQuery

Pour tester
$(function() { H I ©
$("#but","body").click(function(){
UEL
O
console.log($("#container").html());
console.log($("#container").text());
f E LM
});
ch r e
});
©A

H & H: Research and Training 17 / 76


Les méthodes .html() et .text()

jQuery
Pour modifier le contenu d’une balise
$(function() {
$("#but","body").click(function(){
$("#container").text("<p> hello </p>");
});
H I ©
});
UEL
O
f E LM
Ou bien
ch r e
$(function() {
©A
$("#but","body").click(function(){
$("#container").html("<p> hello </p>");
});
});

Vérifier la différence
H & H: Research and Training 18 / 76
Les méthodes .html() et .text()

jQuery

Exercice
H I ©
UEL
O
Écrire un script jQuery qui permet d’ajouter du contenu textuel au

f E LM
début et à la fin de la balise <div class=container> sans
r e
écraser le contenu précédent.
ch
©A

H & H: Research and Training 19 / 76


Les méthodes .attr(), .val() et .prop()

jQuery

La méthode .attr()
.attr(nomAttribut) : permet de récupérer la valeur de
l’attribut passé en paramètre
H I ©
.attr(nomAttribut, nouvelleValeur) U EL: permet de
modifier la valeur de l’attribut duM O paramètre par la valeur
premier
du deuxième paramètref (si L
El’attribut n’existe pas, il sera créé)
ch r e
© A
Et comment supprimer un paramètre ?
removeAttr(nomAttribut)

H & H: Research and Training 20 / 76


Les méthodes .attr(), .val() et .prop()

jQuery

Un exemple avec .attr(nomAttribut)


$(function() {
H I ©
console.log ($("p").attr("class"));
UEL
O
LM
});

r e f E
ch
©A

H & H: Research and Training 21 / 76


Les méthodes .attr(), .val() et .prop()

jQuery

Un exemple avec .attr(nomAttribut)


$(function() {
H I ©
console.log ($("p").attr("class"));
UEL
O
LM
});

r e f E
ch
©A
Que la valeur de la classe du premier paragraphe est affichée

H & H: Research and Training 21 / 76


Les méthodes .attr(), .val() et .prop()

jQuery
Pour faire la même chose pour tous les paragraphes, on peut
utiliser la méthode each()
$(function() {
$("p").each(function () {
console.log($(this).attr("class"));
H I ©
});
UEL
O
LM
});

r e f E
ch
©A

H & H: Research and Training 22 / 76


Les méthodes .attr(), .val() et .prop()

jQuery
Pour faire la même chose pour tous les paragraphes, on peut
utiliser la méthode each()
$(function() {
$("p").each(function () {
console.log($(this).attr("class"));
H I ©
});
UEL
O
LM
});

r e f E
ch
On peut faire aussi
©A
$(function() {
$("p").each(function (ind, elt) {
console.log($(elt).attr("class"));
});
});
H & H: Research and Training 22 / 76
Les méthodes .attr(), .val() et .prop()

jQuery
On peut aussi utiliser .length pour déterminer le nombre
d’éléments sélectionnés
$(function() {
console.log($("p").length);
});
H I ©
UEL
O
f E LM
ch r e
©A

H & H: Research and Training 23 / 76


Les méthodes .attr(), .val() et .prop()

jQuery
On peut aussi utiliser .length pour déterminer le nombre
d’éléments sélectionnés
$(function() {
console.log($("p").length);
});
H I ©
UEL
O
Ou .eq(i) pour choisir l’élément de la sélection ayant l’indice i
$(function() {
f E LM
console.log($("p").eq(i));
ch r e
});
©A

H & H: Research and Training 23 / 76


Les méthodes .attr(), .val() et .prop()

jQuery
On peut aussi utiliser .length pour déterminer le nombre
d’éléments sélectionnés
$(function() {
console.log($("p").length);
});
H I ©
UEL
O
Ou .eq(i) pour choisir l’élément de la sélection ayant l’indice i
$(function() {
f E LM
console.log($("p").eq(i));
ch r e
});
©A
Ou bien :eq(i)
$(function() {
console.log($("p:eq(i)");
});
H & H: Research and Training 23 / 76
Les méthodes .attr(), .val() et .prop()

jQuery
Ou aussi
$(function() {
console.log($("p")[i]);
});

H I ©
UEL
O
LM
De même

r e f E
p:lt(i) : les paragraphes dont l’indice est inférieur à i
ch
©A
p:gt(i) : les paragraphes dont l’indice est supérieur à i
p:even et p:odd : les paragraphes d’indice pair et impair
p:first et p:last : le premier et le dernier paragraphes
input:text : les input de type text

H & H: Research and Training 24 / 76


Les méthodes .attr(), .val() et .prop()

jQuery

On peut aussi utiliser le raccourci .first() pour choisir le


premier
$(function() {
H I ©
EL
console.log($("p").first());
});
O U
f E LM
ch r e
©A

H & H: Research and Training 25 / 76


Les méthodes .attr(), .val() et .prop()

jQuery

On peut aussi utiliser le raccourci .first() pour choisir le


premier
$(function() {
H I ©
EL
console.log($("p").first());
});
O U
f E LM
r e
h choisir le dernier
Ou aussi .last()cpour
© A
$(function() {
console.log($("p").last());
});

H & H: Research and Training 25 / 76


Les méthodes .attr(), .val() et .prop()

jQuery

Exemple avec .attr(nomAttribut, nouvelleValeur) et


removeAttr(nomAttribut)
$(function() {
$("p").eq(0).removeAttr("class");
H I ©
$("p").eq(0).attr("class","red");
UEL
}); O
f E LM
ch r e
©A

H & H: Research and Training 26 / 76


Les méthodes .attr(), .val() et .prop()

jQuery

Exemple avec .attr(nomAttribut, nouvelleValeur) et


removeAttr(nomAttribut)
$(function() {
$("p").eq(0).removeAttr("class");
H I ©
$("p").eq(0).attr("class","red");
UEL
}); O
f E LM
ch r e
©A
On peut modifier la valeur sans supprimer et recréer l’attribut
$(function() {
$("p").eq(0).attr("class","red");
});

H & H: Research and Training 26 / 76


Les méthodes .attr(), .val() et .prop()

jQuery

Ajoutons une zone de saisie dans la page HTML : nouveau


contenu
<div id = container>
Considerons les paragraphes suivants : H I ©
<p class=blue> bonjour </p>
UEL
O
<p class=red> bonsoir, voici <a href="http://www.
f E
lsis.org/elmouelhia/"> ma page </a></p> LM
<p class="blue"> salut </p>
ch r e
</div>
©A
<input type=text id=nom value="initial" >
<button id=but> cliquer </button>
<script ...

H & H: Research and Training 27 / 76


Les méthodes .attr(), .val() et .prop()

jQuery

La méthode .val()
H I ©
EL
OU
.val() : permet de récupérer la valeur de l’attribut value
M
E:Lpermet de remplacer la valeur de
.val(nouvelleValeur)
e f
chrla valeur de nouvelleValeur
l’attribut value par
A
©

H & H: Research and Training 28 / 76


Les méthodes .attr(), .val() et .prop()

jQuery
Un exemple avec .val()
$(function() {
$("#but").click(function(){
console.log($("#nom").val());
});
H I ©
});
UEL
O
f E LM
ch r e
©A

H & H: Research and Training 29 / 76


Les méthodes .attr(), .val() et .prop()

jQuery
Un exemple avec .val()
$(function() {
$("#but").click(function(){
console.log($("#nom").val());
});
H I ©
});
UEL
O
f E LM
ch r e
Un exemple avec .val(nouvelleValeur)
© A
$(function() {
$("#but").click(function(){
$("#nom").val("John Wick");
});
});

H & H: Research and Training 29 / 76


Les méthodes .attr(), .val() et .prop()

jQuery

La méthode .prop()

.prop(nomPropriété) : permet de récupérer la valeur


booléenne d’une propriété (contrairement à
H
.attr(nomPropriété) qui retourne soit le nom de la propriété,I ©
si elle est définie, ou undefined)
U EL
M O
Lété
.prop(nomPropriété, nouvelleValeur)
f E : permet de

c h re
modifier la valeur d’une propri

©A
Pour supprimer une propriété
removeProp(nomPropriété)

H & H: Research and Training 30 / 76


Les méthodes .attr(), .val() et .prop()

jQuery
Un exemple avec .prop()
$(function() {
$("#but").click(function(){
$("#nom").prop("readonly","true");
console.log($(this).prop("disabled"));
// affiche false
H I ©
EL
});
});
O U
f E LM
ch r e
©A

H & H: Research and Training 31 / 76


Les méthodes .attr(), .val() et .prop()

jQuery
Un exemple avec .prop()
$(function() {
$("#but").click(function(){
$("#nom").prop("readonly","true");
console.log($(this).prop("disabled"));
// affiche false
H I ©
EL
});

OU
});

M
L et .prop
e f E
Pour comprendre la différence entre .attr
$(function() {
A c hr
©
$("#but").click(function(){
$("#nom").prop("readonly",true);
console.log($(this).prop("disabled")); // false
console.log($(this).attr("disabled")); // undefined
console.log($("#nom").prop("readonly")); // true
console.log($("#nom").attr("readonly")); // readonly
});
});
H & H: Research and Training 31 / 76
Les méthodes .css() et .xClass()

jQuery

La méthode .css()
.css(nomPropriété) : permet de récupérer la valeur de la H I ©
propriété CSS passée en paramètre U EL
M O
E L
.css(nomPropriété, nouvelleValeur)
f
: permet de
modifier la valeur de
c h ela propriété CSS (premier paramètre) par la
rparam
©
sera créée)
A
valeur du deuxi ème ètre (si la propriété n’existe pas, elle

H & H: Research and Training 32 / 76


Les méthodes .css() et .xClass()

jQuery
Un exemple avec .css(nomPropriété)
$(function() {
console.log($("p").eq(0).css("color"));
});

H I ©
UEL
O
f E LM
ch r e
©A

H & H: Research and Training 33 / 76


Les méthodes .css() et .xClass()

jQuery
Un exemple avec .css(nomPropriété)
$(function() {
console.log($("p").eq(0).css("color"));
});

H I ©
EL
Un exemple avec .css(nomPropriété, nouvelleValeur)
$(function() {
O U
LM
$("#but").click(function(){
$("p").eq(0).css("color","green");
});
r e f E
});
ch
©A

H & H: Research and Training 33 / 76


Les méthodes .css() et .xClass()

jQuery
Un exemple avec .css(nomPropriété)
$(function() {
console.log($("p").eq(0).css("color"));
});

H I ©
EL
Un exemple avec .css(nomPropriété, nouvelleValeur)
$(function() {
O U
LM
$("#but").click(function(){
$("p").eq(0).css("color","green");
});
r e f E
});
ch
©A
Pour un changement multiple de propriétés CSS
$(function() {
$("#but").click(function(){
$("p").eq(0).css({"color":"green", "background-color":"red"});
});
});
H & H: Research and Training 33 / 76
Les méthodes .css() et .xClass()

jQuery

Les méthodes .xClass()


H I ©
.addClass() : pour ajouter une classe
UEL
O
.removeClass() : pour supprimer une classe
f E LM
r e
.hasClass() : pour tester l’existence d’une classe
ch
©A
.toggleClass() : pour retirer ou ajouter une classe

H & H: Research and Training 34 / 76


Les méthodes .css() et .xClass()

jQuery
Exercice

En utilisant les méthodes xClass, écrire un code jQuery qui permet de


permuter les couleurs des paragraphes suivants : (rouge ⇒ bleu), (bleu ⇒
vert) et (vert ⇒ rouge).

H I ©
Le HTML
UELLe CSS
O
<div id=paragraphs>
LM .red {
<p class=red>rouge</p>
<p class=green>vert</p>
ch ref E }
color: red;

© A
<p class=blue>bleu</p> .green {
</div> color: green;
}
.blue {
color: blue;
}

H & H: Research and Training 35 / 76


Les méthodes de filtrage et de recherche

jQuery

La méthode .filter(’sélecteur’)
Retourne un ensemble d’élément filtré en fonction du sélecteur

H I ©
UEL
O
f E LM
ch r e
©A

H & H: Research and Training 36 / 76


Les méthodes de filtrage et de recherche

jQuery

La méthode .filter(’sélecteur’)
Retourne un ensemble d’élément filtré en fonction du sélecteur

H I ©
Exemple UEL
O
$(function() {
f E LM
ch r e
$("#container > p").filter(":not(:eq(0))")

©A
.css("background-color", "
skyblue");
});

Filtre les paragraphes ayant un indice différent de 0 parmi ceux qui


sont dans container.
H & H: Research and Training 36 / 76
Les méthodes de filtrage et de recherche

jQuery
La méthode .has(’sélecteur’)

Retourne un ensemble d’élément filtré en fonction du sélecteur, ne prend que les enfants
associés à l’élément.

H I ©
UEL
O
f E LM
ch r e
©A

H & H: Research and Training 37 / 76


Les méthodes de filtrage et de recherche

jQuery
La méthode .has(’sélecteur’)

Retourne un ensemble d’élément filtré en fonction du sélecteur, ne prend que les enfants
associés à l’élément.

H I ©
EL
Exemple
$(function() {
O U
LM
$("#container > p").has("a")

});
r e E
.css("background-color", "skyblue");
f
ch
©A

H & H: Research and Training 37 / 76


Les méthodes de filtrage et de recherche

jQuery
La méthode .has(’sélecteur’)

Retourne un ensemble d’élément filtré en fonction du sélecteur, ne prend que les enfants
associés à l’élément.

H I ©
EL
Exemple
$(function() {
O U
LM
$("#container > p").has("a")

});
r e E
.css("background-color", "skyblue");
f
ch
©A
Filtre les paragraphes, définis dans container, ayant comme enfant un lien hypertexte.

H & H: Research and Training 37 / 76


Les méthodes de filtrage et de recherche

jQuery
La méthode .has(’sélecteur’)

Retourne un ensemble d’élément filtré en fonction du sélecteur, ne prend que les enfants
associés à l’élément.

H I ©
EL
Exemple
$(function() {
O U
LM
$("#container > p").has("a")

});
r e E
.css("background-color", "skyblue");
f
ch
©A
Filtre les paragraphes, définis dans container, ayant comme enfant un lien hypertexte.

On peut aussi utiliser has comme pseudo-sélecteur jQuery


$(function() {
$("#container > p").filter(":has(a)")
.css("background-color", "skyblue");
});

H & H: Research and Training 37 / 76


Les méthodes de filtrage et de recherche

jQuery
La méthode .not(’sélecteur’)
Retourne un ensemble d’élément filtré en fonction du sélecteur,
retire tous les éléments qui respecte le sélecteur

H I ©
UEL
O
f E LM
ch r e
©A

H & H: Research and Training 38 / 76


Les méthodes de filtrage et de recherche

jQuery
La méthode .not(’sélecteur’)
Retourne un ensemble d’élément filtré en fonction du sélecteur,
retire tous les éléments qui respecte le sélecteur

H I ©
UEL
O
LM
Exemple
$(function() {
r e f E
ch
©A
$("#container > p").not(":even")
.css("background-color", "
skyblue");
});

Filtre les paragraphes d’indice pair parmi ceux qui sont dans
container.
H & H: Research and Training 38 / 76
Les méthodes de filtrage et de recherche

jQuery

H I ©
Exercice
UEL
O
LM
Écrire un code qui permet de mettre le bleu comme couleur de fond
f E
pour tous les paragraphes qui ne contiennent pas de lien hypertexte
r e
ch
©A

H & H: Research and Training 39 / 76


Les méthodes de filtrage et de recherche

jQuery
Première solution
$(function() {
$("#container > p").filter(":not(:has(a))")
.css("background-color", "
skyblue");
H I ©
});
UEL
O
f E LM
ch r e
©A

H & H: Research and Training 40 / 76


Les méthodes de filtrage et de recherche

jQuery
Première solution
$(function() {
$("#container > p").filter(":not(:has(a))")
.css("background-color", "
skyblue");
H I ©
});
UEL
O
f E LM
Deuxième solution
ch r e
$(function() { ©A
$("#container > p").not(":has(a)")
.css("background-color", "
skyblue");
});

H & H: Research and Training 40 / 76


Les méthodes de filtrage et de recherche

jQuery
La méthode .find(’sélecteur’)

permet de chercher et de filtrer des éléments selon le sélecteur

possible d’effectuer plusieurs recherches en utilisant la méthode end() pour


remonter dans le chaı̂nage
H I ©
UEL
O
f E LM
ch r e
©A

H & H: Research and Training 41 / 76


Les méthodes de filtrage et de recherche

jQuery
La méthode .find(’sélecteur’)

permet de chercher et de filtrer des éléments selon le sélecteur

possible d’effectuer plusieurs recherches en utilisant la méthode end() pour


remonter dans le chaı̂nage
H I ©
UEL
O
Exemple
f E LM
$(function() {
ch r e
©A
$("#container").find("p:even").css("background-color","blue")
.end()
.find("p:odd").css("background-color","pink");
});

Les paragraphes d’indice pair auront une couleur de fond bleue et ceux d’indice impair
auront une couleur de fond rose.
H & H: Research and Training 41 / 76
Les méthodes de filtrage et de recherche

jQuery

.find() vs .filter H I ©
UEL
O
.find() cherche dans les enfants de l’élément sélectionné

f E LM
ch r e
.filter() cherche dans les éléments sélectionnés

©A

H & H: Research and Training 42 / 76


Les méthodes de filtrage et de recherche

jQuery

La méthode .children()
permet de sélectionner les enfants directs de la sélection

H I ©
UEL
O
f E LM
ch r e
©A

H & H: Research and Training 43 / 76


Les méthodes de filtrage et de recherche

jQuery

La méthode .children()
permet de sélectionner les enfants directs de la sélection

H I ©
UEL
O
Exemple
f E LM
$(function() {
ch r e
©A
$("#container").children().css("background-color",
"skyblue");
});

Tous les enfants du container auront une couleur de fond bleue.

H & H: Research and Training 43 / 76


Les méthodes de filtrage et de recherche

jQuery

Exemple avec .children(selecteur)


$(function() {
H I ©
$("#container").children("p").css("background-
UEL
color", "skyblue");
O
});
f E LM
ch r e
©A
Tous les enfants de type p du container auront une couleur de fond
bleue.

H & H: Research and Training 44 / 76


Les méthodes de filtrage et de recherche

jQuery
Exercice, considérons le code HTML suivant
<h1>Titre</h1>
<div class="about">
<strong>Adipiscing elit.</strong>
<div>
H I ©
Lorem ipsum dolor sit amet,
UEL
O
LM
<strong>consectetur</strong>
</div>
r e f E
</div>
ch
<p>
Nulla pellentesque©A
<em>molestie</em> tempus.
<strong>Curabitur</strong>
turpis est.
</p>

H & H: Research and Training 45 / 76


Les méthodes de filtrage et de recherche

jQuery

En utilisant les méthodes précédentes, sélectionner


H I ©
tous les strongs fils de la première divU EL
le strong directement fils de L M O
f E la première div
reniveau dans la première div
c
le strong de plus h
bas
©A

H & H: Research and Training 46 / 76


Les méthodes de filtrage et de recherche

jQuery

La méthode .parent()
permet de remonter au premier parent de la sélection

H I ©
UEL
O
f E LM
ch r e
©A

H & H: Research and Training 47 / 76


Les méthodes de filtrage et de recherche

jQuery

La méthode .parent()
permet de remonter au premier parent de la sélection

H I ©
UEL
O
LM
Exemple
$(function() {
r e f E
ch
©A
$("a").parent().css("background-color","skyblue");
});

Le paragraphe contenant un lien hypertexte aura une couleur de fond


bleue.

H & H: Research and Training 47 / 76


Les méthodes de filtrage et de recherche

jQuery

La méthode .parents()
permet de remonter dans les parents jusqu’à trouver le père
recherché
H I ©
UEL
O
f E LM
ch r e
©A

H & H: Research and Training 48 / 76


Les méthodes de filtrage et de recherche

jQuery

La méthode .parents()
permet de remonter dans les parents jusqu’à trouver le père
recherché
H I ©
UEL
O
Exemple
f E LM
$(function() { ch r e
©A
$("a").parents("div").css("background-color", "
skyblue");
});

Le div container aura une couleur de fond bleue.

H & H: Research and Training 48 / 76


Les méthodes de filtrage et de recherche

jQuery

Autre méthodes
H I ©
.next() : le frère suivant immédiat
UEL
O
LM
.nextAll() : tous les éléments suivants

r e f E
.prev() : le frère précédent immédiat
ch
©A
.prevAll() : tous les éléments précédents

H & H: Research and Training 49 / 76


Les méthodes de filtrage et de recherche

jQuery

La méthode .siblings()
permet de récupérer tous les frères (précédents et suivants) de
l’élément

H I ©
UEL
O
f E LM
ch r e
©A

H & H: Research and Training 50 / 76


Les méthodes de filtrage et de recherche

jQuery

La méthode .siblings()
permet de récupérer tous les frères (précédents et suivants) de
l’élément

H I ©
UEL
O
Exemple
f E LM
$(function() {
ch r e
©A
$("p.red").siblings().css("background-color", "
skyblue");
});

Les frères (précédents et suivants) du paragraphe ayant la classe


rouge auront une couleur de fond bleue.
H & H: Research and Training 50 / 76
Les méthodes de filtrage et de recherche

jQuery

On peut ajouter un paramètre à siblings pour préciser quel type


de balise on cherche

H I ©
EL
$(function() {
$("#container").siblings("input").css("background-
O U
});
color", "skyblue");
f E LM
ch r e
©A
Les frères (précédents et suivants) du container de type input
auront une couleur de fond bleue.

H & H: Research and Training 51 / 76


Les méthodes de filtrage et de recherche

jQuery
Exercice, considérons le code HTML suivant

<div id="menu">
<ul>
<li><a href="#">Lien 1</a></li>
<li><a href="#">Lien 2</a></li>
H I ©
</ul>
</div>
UEL
O
LM
<div class="contact">
<strong>Adipiscing elit.</strong>
<div>
r e f E
ch
©A
Lorem ipsum dolor sit amet, <strong>consectetur</strong>
</div>
<form method="POST">
<input type="text" name="email" />
<input type="submit" value="s’inscrire" />
</form>
</div>

H & H: Research and Training 52 / 76


Les méthodes de filtrage et de recherche

jQuery

Que ferait le code suivant


$(’#menu’).find(’li:eq(1)’)
H I ©
EL
.siblings(’li’)
.css(’border’, ’1px solid blue’)
O U
.end().end()
f E LM
.siblings(’.contact’)
ch r
.find(’:text[name=email]’)
e
©A
.parent(’form’)
.css(’border’, ’1px solid red’);

H & H: Research and Training 53 / 76


Les méthodes .wrap() et .data()

jQuery

H I ©
La méthode .wrap(baliseHTML)
UEL
O
LM
permet d’entourer les éléments sélectionnés par les balises passées
en paramètre
r e f E
ch
©A

H & H: Research and Training 54 / 76


Les méthodes .wrap() et .data()

jQuery
Le body de la page index.html Le CSS associé
<p>Bonjour</p> div {
<p>Bonsoir</p> color: red;
<button id=but> }
cliquer
</button>
H I ©
U EL
O
f E LM
ch r e
©A

H & H: Research and Training 55 / 76


Les méthodes .wrap() et .data()

jQuery
Le body de la page index.html Le CSS associé
<p>Bonjour</p> div {
<p>Bonsoir</p> color: red;
<button id=but> }
cliquer
</button>
H I ©
EL
M OU
E L sur le bouton
Le code qui sera exécuté en cliquant
f
$("#but").click( hr
c e
function(){ A
©
$("p").wrap("<div></div>");
}
);

H & H: Research and Training 55 / 76


Les méthodes .wrap() et .data()

jQuery
Le body de la page index.html Le CSS associé
<p>Bonjour</p> div {
<p>Bonsoir</p> color: red;
<button id=but> }
cliquer
</button>
H I ©
EL
M OU
E L sur le bouton
Le code qui sera exécuté en cliquant
f
$("#but").click( hr
c e
function(){ A
©
$("p").wrap("<div></div>");
}
);

En cliquant sur le bouton, les paragraphes seront affichés en rouge.


H & H: Research and Training 55 / 76
Les méthodes .wrap() et .data()

jQuery

La méthode .data(key,value)
permet d’attacher des données aux balises sélectionnées
H I ©
UEL
O
f E LM
ch r e
©A

H & H: Research and Training 56 / 76


Les méthodes .wrap() et .data()

jQuery

La méthode .data(key,value)
permet d’attacher des données aux balises sélectionnées
H I ©
UEL
O
f E LM
La méthode .removeData(key)
ch r e
©A
permet de supprimer des données dont la clé est passée en
paramètre associées aux balises sélectionnées

H & H: Research and Training 56 / 76


Les méthodes .wrap() et .data()

jQuery
Le body de la page index.html
<div>
Bonjour
<span></span>
<span></span>
</div>

H I ©
UEL
O
f E LM
ch r e
©A

H & H: Research and Training 57 / 76


Les méthodes .wrap() et .data()

jQuery
Le body de la page index.html
<div>
Bonjour
<span></span>
<span></span>
</div>

H I ©
UEL
Pour associer des données à une balise div
O
$(document).ready(function() {
f E LM
r e
$("div").data("obj", {nom: "wick", prenom: "john"});
});
ch
©A

H & H: Research and Training 57 / 76


Les méthodes .wrap() et .data()

jQuery
Le body de la page index.html
<div>
Bonjour
<span></span>
<span></span>
</div>

H I ©
UEL
Pour associer des données à une balise div
O
$(document).ready(function() {
f E LM
r e
$("div").data("obj", {nom: "wick", prenom: "john"});
});
ch
©A
Pour récupérer et afficher les données associées à la balise div
$(document).ready(function() {
$("div").data("obj", {nom: "wick", prenom: "john"});
$("span:first").text( $("div").data("obj").prenom);
$("span:last").text( $("div").data("obj").nom);
});
H & H: Research and Training 57 / 76
Ajouter et supprimer un nœud

jQuery

Plusieurs méthodes possibles

.append(contenu) : permet d’insérer le contenu en paramètre


à la fin des éléments sélectionnés
H I ©
$("contenu").appendTo(sélecteur) U E:Lpermet d’insérer le
L MélO
contenu en paramètre à la fin des éments ciblés via le sélecteur

r e f E
: permet d’insérer le contenu en
.prepend(contenu)
A
paramètre au dc
h
ébut des éléments sélectionnés
©
$("contenu").prependTo(sélecteur) : permet d’insérer le
contenu en paramètre au début des éléments ciblés via le
sélecteur

H & H: Research and Training 58 / 76


Ajouter et supprimer un nœud

jQuery

Exemple
$(function() {
$("#container > p.red").append("<p> hello </p>");
});
H I ©
UEL
O
f E LM
ch r e
©A

H & H: Research and Training 59 / 76


Ajouter et supprimer un nœud

jQuery

Exemple
$(function() {
$("#container > p.red").append("<p> hello </p>");
});
H I ©
EL
M OU
f
Autre utilisation de .append( E L$(selecteur) ) : copier le
deuxième élément sh
c e
r é à la fin du premier élément
électionn
sélectionné© A
$(function() {
$("#container").append($("input:text"));
});

H & H: Research and Training 59 / 76


Ajouter et supprimer un nœud

jQuery

Autres méthodes possibles

$(sélecteur).after(contenu) : permet d’insérer le contenu


en paramètre après les éléments sélectionnés
H I ©
EL
$(contenu).insertAfter(sélecteur) : permet d’insérer le
U
O
contenu en paramètre après les éléments sélectionnés (le
E
contenu et le sélecteur sont inversés)
f LM
ch r e
$(sélecteur).before(contenu) : permet d’insérer le
en A
contenu© paramètre avant les éléments sélectionnés
$(contenu).insertBefore(sélecteur) : permet d’insérer
le contenu en paramètre avant les éléments sélectionnés (le
contenu et le sélecteur sont inversés)

H & H: Research and Training 60 / 76


Ajouter et supprimer un nœud

jQuery

Exemple
$(function() {
$("#container").after("<p> hello </p>");
H I ©
EL
});

O U
f E LM
ch r e
©A

H & H: Research and Training 61 / 76


Ajouter et supprimer un nœud

jQuery

Exemple
$(function() {
$("#container").after("<p> hello </p>");
H I ©
EL
});

O U
f E LM
r e
Pour .insertAfter() : il faut juste inverser le contenu et le
ch
sélecteur
© A
$(function() {
$("<p> hello </p>").insertAfter("#container");
});

H & H: Research and Training 61 / 76


Ajouter et supprimer un nœud

jQuery

Pour supprimer, on peut utiliser soit .remove() soit .detach()


H I ©
UEL
$(function() {
O
$("p.red").remove(); // ou $("p.red").detach();
f E LM
});
ch r e
©A

H & H: Research and Training 62 / 76


Ajouter et supprimer un nœud

jQuery
Pour comprendre la différence entre .remove() et .detach()

$(function() {
$("p.red").click(function(){
$(this).css("color","yellow");
});
$("#but").click(function(){
var parRouge =$("p.red").detach();
H I ©
$("#container").html(parRouge);
U EL
});
O
});

f E LM
ch r e
Explication
©A
cliquer sur le bouton, ensuite cliquer sur le texte en rouge (il ne sera jamais affiché en
jaune)

remplacer remove par detach et refaire la même chose (le texte est affiché en jaune)

Avec detach, on ne perd pas les données de nos éléments HTML (les événements...)

H & H: Research and Training 63 / 76


Les évènements

jQuery

Syntaxe
H I ©
$(function() {
UEL
$("selector").event(function(){
O
// code de la fonction
f E LM
});
ch r e
©A
});

H & H: Research and Training 64 / 76


Les évènements

jQuery
Et si on veut attacher plusieurs évènements à un sélecteur
$(function() {
$("selector").on("event1 event2", function(){
// code de la fonction
});
H I ©
});
UEL
O
f E LM
ch r e
©A

H & H: Research and Training 65 / 76


Les évènements

jQuery
Et si on veut attacher plusieurs évènements à un sélecteur
$(function() {
$("selector").on("event1 event2", function(){
// code de la fonction
});
H I ©
});
EL
M OU
Et si les fonctions liées aux diffE
f L évènements sont différentes
érents
$(function() { chr
e
© A
$("selector").on({
event1: function(){...},
event2: function(){...}
});
});

H & H: Research and Training 65 / 76


Les évènements

jQuery
Et si on veut attacher plusieurs évènements à un sélecteur
$(function() {
$("selector").on("event1 event2", function(){
// code de la fonction
});
H I ©
});
EL
M OU
Et si les fonctions liées aux diffE
f L évènements sont différentes
érents
$(function() { chr
e
© A
$("selector").on({
event1: function(){...},
event2: function(){...}
});
});

La méthode .on() remplace .bind() depuis la version 3.


H & H: Research and Training 65 / 76
Les évènements

jQuery

Exemple
$(function() {
$("p.red").on({
mouseover: function(){
H I ©
EL
$("body").css("background-color", "pink");
},
O U
mouseout: function(){
f E LM
}, ch r e
$("body").css("background-color", "green");

©A
click: function(){
$("body").css("background-color", "yellow");
}
});
});

H & H: Research and Training 66 / 76


Les évènements

jQuery
Pour supprimer un évènement
$(function() {
$("selector").off("event");
});

H I ©
UEL
O
f E LM
ch r e
©A

H & H: Research and Training 67 / 76


Les évènements

jQuery
Pour supprimer un évènement
$(function() {
$("selector").off("event");
});

H I ©
UEL
Exemple O
$(function() {
f E LM
ch r e
$("p.red").click(function(){

});
©A
$(this).css("color","yellow");

$("#but").click(function(){
$("p.red").off("click");
});
});

H & H: Research and Training 67 / 76


Les évènements

jQuery

Et si on veut que la fonction liée à l’évènement soit exécutée une


seule fois
H I ©
$(function() {
UEL
O
$("selector").one("event1 event2",
// code de la fonction
f E LM function(){

});
ch r e
});
©A

H & H: Research and Training 68 / 76


Les évènements

jQuery

Et si on veut déclencher un évènement manuellement ou suite à


un autre évènement
$(function() {
H I ©
$("p.red").click(function(){
UEL
O
LM
$(this).css("color","pink");
});
r e f E
ch
$("button").click(function(){

©A
$("p.red").trigger("click");
});
});

H & H: Research and Training 69 / 76


Les évènements

jQuery
Certaines méthodes comme .hover() acceptent deux
fonctions : une sera exécutée lorsque l’élément est survolé, la
deuxième quand il ne l’est plus
$(function() {
H I ©
EL
$("p.red").hover(function(){
$(this).css("color","pink");
O U
},
function(){
f E LM
ch r e
$(this).css("color","green");

});
});
©A

Sans la deuxième fonction, l’élément reste pink lorsqu’il n’est plus


survolé.
H & H: Research and Training 70 / 76
Les évènements

jQuery
Exercice

Créer une page HTML contenant deux images de grande taille

La deuxième image n’est pas initialement affichée (vous pouvez utiliser la propriété CSS
display: none)

H I ©
Pour atteindre le bas de la première image, il faut utiliser un scroll

U EL
Lorsque le scroll arrive au bas de la première image, la seconde apparaı̂t (la valeur de sa
O
LM
propriété CSS display reprend la valeur initiale inline)

e f E
vous pouvez utiliser les propriétés suivantes :
r
ch
©A
$(window).scrollTop() : retourne le nombre de pixels à remonter pour
atteindre le haut de la page
$(window).height() : retourne la hauteur de la partie de page affichée dans le
navigateur

$(document).height() : retourne la hauteur totale de la page en pixels

Lorsque le scroll arrive au bas du document, on a :


$(document).height() = $(window).height() + $(window).scrollTop()

H & H: Research and Training 71 / 76


Quelques opérations sur les tableaux

jQuery

Quelques opérations sur les tableaux

$.grep : pour filtrer les éléments d’un tableau.


H I ©
UEL
$.map : pour appliquer une opération sur les éléments d’un
O
tableau.
f E LM
ch r e
$.inArray : retourne la position d’un élément dans un tableau,
-1 sinon.
©A
$.merge : pour fusionner deux tableaux.

H & H: Research and Training 72 / 76


Quelques opérations sur les tableaux

jQuery
Considérons le body de la page index.html
<body>
<div id=resultat></div>
<button id=but>cliquer</button>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="script.js"></script>
</body>
H I ©
UEL
O
f E LM
ch r e
©A

H & H: Research and Training 73 / 76


Quelques opérations sur les tableaux

jQuery
Considérons le body de la page index.html
<body>
<div id=resultat></div>
<button id=but>cliquer</button>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="script.js"></script>
</body>
H I ©
UEL
O
f E LM
Exemple d’utilisation de .grep() : filtrer les chaı̂nes de longueur <= 5
$(document).ready(function() {
ch r e
©A
var tableau = [’Marseille’, ’Barcelone’, ’Madrid’, ’Turin’, ’Londres’
, ’Milan’, ’Manchester’, ’Lyon’];
$(’#but’).click(function() {
tableau2 = $.grep(tableau, function(elt,ind) {
return (elt.length > 5);
});
$(’#resultat’).text(tableau2.join(’, ’));
// Marseille, Barcelone, Madrid, Londres, Manchester
});
});

H & H: Research and Training 73 / 76


Quelques opérations sur les tableaux

jQuery
Exemple d’utilisation de .map() : récupérer les 5 premiers
caractères de chaque élément du tableau
$(document).ready(function() {
var tableau = [’Marseille’, ’Barcelone’, ’Madrid’,
’Turin’, ’Londres’, ’Milan’, ’Manchester’, ’
H I ©
Lyon’];
UEL
O
LM
$(’#but’).click(function() {

f E
tableau2 = $.map(tableau, function(elt,ind) {
r e
ch
return (elt.substring(0,5));
});
©A
$(’#resultat’).text(tableau2.join(’, ’));
// Marse, Barce, Madri, Turin, Londr, Milan,
Manch, Lyon
});
});

H & H: Research and Training 74 / 76


Quelques opérations sur les tableaux

jQuery
On ajoute une zone de saisie dans le body de la page index.html
<body>
<input type=text id=ville placeholder="ville à chercher">
<div id=resultat></div>
<button id=but>cliquer</button>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="script.js"></script>
H I ©
EL
</body>

O U
f E LM
ch r e
©A

H & H: Research and Training 75 / 76


Quelques opérations sur les tableaux

jQuery
On ajoute une zone de saisie dans le body de la page index.html
<body>
<input type=text id=ville placeholder="ville à chercher">
<div id=resultat></div>
<button id=but>cliquer</button>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="script.js"></script>
H I ©
EL
</body>

O U
Exemple d’utilisation de .inArray()
f E LM
ch r e
©A
$(document).ready(function() {
var tableau = [’Marseille’, ’Barcelone’, ’Madrid’, ’Turin’, ’Londres’
, ’Milan’, ’Manchester’, ’Lyon’];
$(’#but’).click(function() {
var ville = $("#ville").val();
position = $.inArray(ville, tableau);
position != -1 ? $(’#resultat’).text("oui") : $(’#resultat’).text("
non");
});
});

H & H: Research and Training 75 / 76


Quelques opérations sur les tableaux

jQuery

Exemple d’utilisation de .merge()


$(document).ready(function() {
var france = [’Marseille’, ’Lyon’, ’Paris’];
var autre = [’Barcelone’, ’Turin’, ’Manchester’]; H I ©
$(’#but’).click(function() {
UEL
O
var ville = $("#ville").val();
resultat = $.merge(france, autre);
f E LM
ch r e
$(’#resultat’).text( resultat.join(’, ’));
©A
// Marseille, Lyon, Paris, Barcelone, Turin,
Manchester
});
});

H & H: Research and Training 76 / 76

Vous aimerez peut-être aussi