Module - jQuery

M. DJE BI GABIN

1/23
 Module - jQuery

Table des matières

JavaScript........................................................................................... 3
Lier un fichier JavaScript .................................................................................................... 3
JavaScript ou CSS3 ? ........................................................................................................... 3
Préparation de l’environnement .................................................... 3
Chargement de la bibliothèque ........................................................................................ 4
Inclusion de votre fichier .js personnel ............................................................................ 4
Coder en jQuery ................................................................................ 7
Fonctionnement ................................................................................................................. 7
Les méthodes ...................................................................................................................10
Les arguments ..................................................................................................................17
Les événements ...............................................................................................................17
Les variables .....................................................................................................................20
Intégrer des fonctionnalités ............................................................................................22
Ressources ........................................................................................................................22

2/23
 Module - jQuery

JavaScript
Le langage JavaScript (différent de Java) est un langage de programmation utilisé
pour réaliser des pages Web dynamiques.

Il s’exécute le plus souvent coté client (navigateur) et s'insère dans le code HTML
soit directement, soit par inclusion d'un script externe.

Lier un fichier JavaScript

<script type="text/javascript" src="js/script.js" async></script>
Attributs :
• type - optionnel en HTML5
• src - indique l'emplacement du fichier source
• async - optionnel – Exécuter le script de façon asynchrone (ne bloque pas
l’analyse du DOM au chargement du script)

JavaScript ou CSS3 ?
Nous avons vu que certaines propriétés CSS3 tendaient à remplacer l'utilisation de
JavaScript notamment avec les animations rendues possibles en CSS3.
Le débat est ouvert :
• L'avantage de JavaScript est d'être bien reconnu par tous les navigateurs, et
jQuery permet d'assurer une compatibilité maximale même pour les vieux
navigateurs.
• L'avantage de CSS3 est qu'il est plus facile à modifier à et n'a pas besoin d'être
chargé en plus (rapidité d'affichage). Cependant, les propriétés nouvelles ne
seront pas forcement bien implémentées dans tous les navigateurs.

Je pencherai donc pour dire : tout ce qui peut être fait en HTML5 et CSS3 doit
l'être, tant que la compatibilité avec les navigateurs est assurée. S'il y a des
problèmes de compatibilité ou si CSS3 trouve ses limites (gestion des événements :
click, chargement, scroll…) utiliser JavaScript.
Préparation de l’environnement
JQuery est une bibliothèque JavaScript, c’est à dire un ensemble de fonctions
JavaScript « prêtes à l’emploi » permettant de faciliter le développement de modules
JavaScript grâce à une syntaxe plus lisible (par les développeurs débutants) et plus
concise.

3/23
 Module - jQuery

La compatibilité du code produit via jQuery est assurée sur tous les navigateurs (même
les anciennes versions d’internet explorer).
Dernier intérêt : vous trouverez sur internet beaucoup de modules construits en
jQuery que vous pourrez facilement adapter à votre site (slides, navigations, pop-
up…).

Chargement de la bibliothèque
Bibliothèque (fichier js) chargée une seule fois dans votre fichier HTML, au choix :
+ Inclusion bibliothèque jQuery hébergée sur votre site (préférable en
développement local) : Récupérez la dernière version de jquery compressée, placée
dans un dossier « js ». Le fichier sera lié juste avant la fermeture de la balise </body>
<script type="text/javascript" src="js/jquery.min.js"></script>
+ Inclusion bibliothèque jQuery hébergée sur un CDN Google (préférable pour
un site en ligne) :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></
script>

Exemple
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Installation de jQuery</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<!-- Contenu de la page -->
<script src="js/jquery-3.6.0.min.js"></script>
</body></html>

Inclusion de votre fichier .js personnel

Tous les scripts jQuery devront être insérés après la bibliothèque et avant la fermeture
de </body>.
<script src="js/scripts.js"></script>

script.js doit contenir ce code (une seule fois, le code est développé à l'intérieur)
4/23
 Module - jQuery

$(function() {
// Commencer à coder en jquery ici
});

Le D.O.M (arborescence du document) doit être chargé avant l’exécution des fonctions
jquery. Cette fonction assure cela en 1er lieu, elle doit donc encadrer
systématiquement tous les développements jquery (une seule fois).
Vous pourrez trouver la notation suivante, moins synthétique que celle ci-dessus mais
ayant le même effet :
$(document).ready(function() {
// Commencer à coder en jquery ici
});
Lorsque le document est chargé, lancer l’exécution du code entre accolades

Éviter les conflits

Dans cette partie nous allons voir comment gérer les conflits entre plusieurs
bibliothèques jQuery. La plupart des bibliothèques jQuery utilisent le signe $ comme
préfix de sélecteurs d'éléments. Bien entendu, cela a pour effet de produire des conflits.
JQuery à prévu une alternative afin de palier à ce problème avec la méthode
noConflict() . Il suffira de remplacer $ par jQuery.
jQuery.noConflict();
Une fois ce code déclaré, vous pouvez continuer à utiliser $ pour l'autre bibliothèque.
<script src="js/jquery.js"></script>
<script src="js/mootools.js"></script>
<script>
jQuery.noConflict();
//Ici vos codes jQuery avec comme préfixe `jQuery`
jQuery('.box_inner').addClass('rounded');
//Pour l'autre bibliothèque `$`
$('.box').set('opacity',0);
</script>
Points a retenir

5/23
 Module - jQuery

1. Pour le développement de votre site, utilisez jQuery en local pour la rapidité

d'exécution.
2. Pour la production, passez par un CDN afin d'utiliser le cache de vos utilisateurs.
3. Placez vos scripts en fin de page, pour optimiser le chargement de la page.
4. Eviter les conflits de bibliothèques avec noConflict().
Activité
1- configurer votre ordinateur pour une utilisation de jQuery en local pour les
exercices du cours.

6/23
 Module - jQuery

Le DOM
Le DOM ou Document Object Model est un standard du W3C qui définit l'arborescence
du document HTML. JQuery est utilisé pour manipuler le DOM en écriture et en
lecture. Prenons le cas où le DOM n'est pas encore totalement construit lors du
chargement de la page et que le script jQuery est exécuté ; les scripts produiront des
erreurs. Pour attendre que le DOM soit entièrement chargé et ainsi éviter des erreurs.
En JavaScript
document.addEventListener('DOMContentLoaded', function() {
// Ici le DOM est prêt
})
En jquery
Avec jQuery, nous utiliserons la méthode .ready() prévue à cet effet.
$(document).ready(function() {
// Ici le DOM est prêt
});
Ou simplement
$(function() {
// Ici le DOM est prêt
});
Coder en jQuery

Les variables
Lors de développement Javascript (et autres), vous aurez besoin de stocker des unités
d'informations pour les réutiliser plus tard (les tester, les modifier...). Cela peut être :
du texte (string), des nombres (number) ou un boléen (boolean).
Ces unités d'informations s'appellent des variables. Voici comment on affecte une
valeur à une variable, grâce au mot clé var suivi du nom de la variable (inventé) :

var monTexte = 'Ceci est un texte écrit via jQuery'; var

numeroLoto = 6;
var monTitre = $('#titre-site');
var monTitreModifie = $('#titre-site').text('Hello World');

7/23
 Module - jQuery

Fonctionnement de JQuery
Une fois ou plusieurs éléments HTML sélectionné $() - il se «transforme» en objet
jquery et vous pouvez lui appliquer toutes les .methodes (fonctions) incluant des
paramètres d'exécutions.

Sur le principe :
$(selecteur).methode(parametres);

Exemple :
<p id='demo1'>Ceci est un texte ciblé par jQuery</p>

$(function() {

$('#demo1').css('color', 'red');

});
Passe la couleur du texte en rouge (propriété CSS)

Sélectionner des éléments

De JavaScript vers jQuery
JQuery nous permet de sélectionner des éléments de façon plus simple qu'en
JavaScript.
 Exemple : Sélectionner une balise span
- Version Javascript
document.getElementsByTagName('span');
- Version jQuery
$('span');
 Exemple : Sélectionner un identifiant #sub-footer
- Version Javascript
document.getElementById('sub-footer');
document.querySelector('#sub-footer')
- Version jQuery
$('#sub-footer') ;
 Exemple : Sélectionner une classe box

8/23
 Module - jQuery

- Version Javascript
document.getElementsByClassName('box');
document.querySelector(''box')

- Version jQuery
$('.box');

 Exemple changer le mot « Texte » en « Modification de texte »

- Version Javascript
document.getElementById("demo1").innerHTML="Modification de texte";
document.querySelector("#demo1").innerText= " Modification de texte";
- Version jQuery
$('#demo1').html('Modification de texte');
$('#demo1').text('Modification de texte');

Les sélecteurs
La sélection en jQuery se fait avec la syntaxe :
$('')

La syntaxe à ajouter à l'intérieur des simples (ou doubles) quotes reprend celle des
sélecteurs CSS3

Ainsi pour « attraper via jQuery » un titre HTML

<h1 id="titre-site">Le Blog du Webmaster</h1>

Le sélecteur jQuery sera

$('#titre-site')

Tous les paragraphes

$('p')

Les images ayant la class=''logo''

$('img.logo')
9/23
 Module - jQuery

Liste des sélecteurs, sur la doc officielle :

http://api.jquery.com/category/selectors/

Intéressant :
• Élément qui contient un mot: http://api.jquery.com/contains-selector/
<div>IUA Abidjan</div>
$( "div:contains(IUA)" ).css( "text-decoration", "underline" );
• Élément vide : https://api.jquery.com/empty-selector/
<table border="1">
<tr><td>TD #0</td><td></td></tr>
<tr><td>TD #2</td><td></td></tr>
<tr><td></td><td>TD#5</td></tr>
</table>

$( "td:empty" )
.text( "IUA" )
.css( "background", "rgb(255,220,200)" );

Les méthodes
Une fois la (les) balises HTML sélectionnées, nous allons la manipuler grâce aux
méthodes jQuery.
Nous avons vu précédemment 2 méthodes :

• .html() qui permet de remplacer le contenu textuel d'un bloc HTML

(paragraphe par exemple)
• .css() qui permet d'appliquer une propriété CSS

Syntaxe simple : la méthode « s'accroche » au sélecteur avec un point suit son nom
(html, css, animate, attr…) puis des parenthèses qui pourront contenir des
paramètres ou rester vides. Enfin un point virgule pour indiquer que l’instruction est
terminée.

Ce qui donne :
$('#titre-site').html();
Il est possible de chaîner les méthodes.

Ainsi, si on veut appliquer plusieurs modifications au titre, il est possible d'écrire :

10/23
 Module - jQuery

$('#titre-site').html().css().after();

JQuery nous propose plusieurs méthodes pour manipuler le DOM. Avec ces
méthodes, nous pouvons supprimer, créer, cloner, ajouter… Bref nous pouvons
remodeler le DOM à notre convenance.

Méthode Description
.addClass() Ajoute un ou plusieurs noms de classe à des éléments sélectionnés
.after() Insére le contenu après les éléments sélectionnés
.append() Insére le contenu à la fin les éléments sélectionnés
.appendTo() Insére le contenu sélectionné à la fin les éléments sélectionnés
.attr() Définit ou retourne les attributs / valeurs des éléments sélectionnés
.before() Insére le contenu avant les éléments sélectionnés
.clone() Effectue une copie des éléments sélectionnés
.css() Définit ou retourne une ou plusieurs propriétés de style pour les
éléments sélectionnés
.detach() Supprime les éléments sélectionnés (conserve les données et les
événements)
.empty() Supprime tous les nœuds enfants et le contenu de l'élément
sélectionné
.hasClass() Vérifie si l'un des éléments sélectionnés ont un nom de classe
spécifié
.height() Définit ou retourne la hauteur des éléments sélectionnés .html()
Définit ou retourne le contenu des éléments sélectionnés
.innerHeight() Renvoie la hauteur d'un élément (y compris le padding, mais pas
les border)
.innerWidth() Renvoie la largeur d'un élément (y compris le padding, mais pas
les border)
.insertAfter() Insère des éléments HTML après les éléments sélectionnés
.insertBefore() Insère des éléments HTML avant les éléments sélectionnés
.offset() Définit ou retourne les coordonnées de l'offset (left et top) pour les
éléments sélectionnés (en position relative dans le document)
.offsetParent() Retourne l'élément le premier parent positionné
.outerHeight() Renvoie la hauteur d'un élément (y compris le padding et les
border)
.outerWidth() Renvoie la largeur d'un élément (y compris le padding et les
border)
11/23
 Module - jQuery

.position() Renvoie la position (par rapport à l'élément parent) d'un élément

.prepend() Introduire le contenu au début des éléments sélectionnés
.prependTo() Insére des éléments de HTML au début des éléments sélectionnés
au format html
.prop() Définit ou retourne propriétés / valeurs des éléments sélectionnés
.remove() Supprime les éléments sélectionnés (y compris des données et des
événements)
.removeAttr() Supprime un ou plusieurs attributs à partir d'éléments sélectionnés
.removeClass() Supprime une ou plusieurs classes à partir d'éléments sélectionnés
.removeProp() Supprime une propriété définie par la méthode prop()
.replaceAll() Remplace les éléments sélectionnés avec de nouveaux éléments
HTML
.replaceWith() Remplace les éléments sélectionnés par un nouveau contenu
.scrollLeft() Définit ou retourne la position de la barre de défilement
horizontale des éléments sélectionnés
.scrollTop() Définit ou retourne la position de la barre de défilement vertical
des éléments sélectionnés
.text() Insère des éléments de HTML au début des éléments sélectionnés
au format texte
.toggleClass() Bascule entre l'ajout / suppression d'une ou plusieurs classes à
partir d'éléments sélectionnés
.unwrap() Supprime l'élément parent des éléments sélectionnés
.val() Définit ou retourne la value des éléments sélectionnés (pour les
éléments de formulaire)
.width() Définit ou retourne la largeur des éléments sélectionnés
.wrap() Entoure d'un balisage HTML l'élément sélectionné
.wrapAll() Entoure d'un balisage HTML tous les éléments sélectionnés
.wrapInner() Entoure d'un balisage HTML le contenu de l'élément sélectionné

Manipuler le texte
Dans cette partie, nous verrons les méthodes .text() , .html() et .val() .
1- La méthode .text() récupère ou remplace le contenu en texte brut sans prendre en
compte les balises HTML.
Exemple
<div class="box">Je suis étudiant </div>

12/23
 Module - jQuery

$('.box').text(‘Je suis informaticien');

Résultat
<div class="box"> Je suis informaticien</div>
2- La méthode .html() récupère ou remplace le contenu HTML de l'élément.
Exemple

<div class="box"> Je suis étudiant </div>

$('.box').html('<h1> Je suis informaticien </h1>');
Résultat
<div class="box">
<h1> Je suis informaticien </h1>
</div>
3- La méthode .val() récupère ou remplace la value d'un élément de formulaire input
text, textarea etc. Dans les champs de type radio et checked elle renvoie :checked
ou pas
Exemple 1
<form role="form" action="#" class="box">
<div class="form-group">
<label for="#name">Nom:</label>
<input type="text" name="name" id="name">
</div>
<input id="submit" class="btn btn-primary" type="submit" value="Envoyer">
</form>
$('#submit').click(function(){
alert($('#name').val());
});
Exemple 2
<div class="form-group" style="margin:1em;">
<input id="cb" type="checkbox" class="form-control mt-2 checkbox" name="cb">
</div>
Méthode 1
$('#cb').on('change', function(e) {
alert( $('#cb').is(':checked') );
});
Méthode 2
$('#cb').on('change', function() {
alert( $('#cb').prop('checked') );
13/23
 Module - jQuery

});
Exemple 3 : Decocher cocher une checkbox

<div class="text-center mt-2">

<button id="checkTheCB">Cocher</button>
<button id="uncheckTheCB">decocher</button>
</div>

<div class="form-group" style="margin:1em;">

<input id="cb" type="checkbox" class="form-control mt-2 checkbox" name="cb">
</div>
$('#checkTheCB').on('click', function() {
$('#cb').prop('checked', true);
});

$('#uncheckTheCB').on('click', function() {
$('#cb').prop('checked', false);
alert( $(‘#cb’).val(‘"someValue") ;
});
Supprimer du contenu
Dans cette partie, nous verrons les méthodes .remove() et .empty()
1- Méthode .remove()
La méthode.remove() supprime du DOM l'élément sélectionné
Exemple
<div id="main">
<div class="other">Je suis ingénieur informaticien</div>
<div class="box">Je suis magicien</div>
</div>
$('.box').remove();
Résultat
<div id="main">
<div class="other">Je suis ingénieur informaticien</div>
</div>
2- Méthode .empty()
La méthode .empty() vide le contenu de l'élément sélectionné.
Exemple
14/23
 Module - jQuery

<div id="main">
<div class="other">Je suis ingénieur informaticien</div>
<div class="box">Je suis magicien</div>
</div>
('.box').empty();
Résultat
<div id="main">
<div class="other">Je suis ingénieur informaticien</div>
<div class="box"></div>
</div>

Manipuler le CSS

Dans cette partie, nous verrons les méthodes .addClass() , .removeClass() ,

.toogleClass() et .css() .

Méthode .addClass()
La méthode .addClass() permet d'ajouter une classe sur l'élément sélectionné.
<div class="box">…</div>
Exemple
$('.box').addClass('pod');
Résultat
<div class="box pod product">…</div>

Méthode .removeClass()
La méthode .removeClass() permet de supprimer une classe sur l'élément sélectionné.
Exemple
<div class="box pod">…</div>
$('.box').removeClass();
Résultat
<div>…</div>

Méthode .toggleClass()
La méthode .toggleClass() permet d'ajouter une classe sur l'élément selectionné si elle
n'est pas présente et inversement.
Exemple
$('#a').click(function(){
$('#b').toggleClass('bg-success');
15/23
 Module - jQuery

});
Méthode .css()
La méthode .css() affecte les styles CSS à l'élément sélectionné.
Elle agit aussi comme un getter et permet donc d'obtenir la chaîne de caractères de la
valeur CSS demandée.
Exemple
<div class="box">…</div>
$('.box').css('background-color','red');
Résultat
<div class="box" style="background-color: red;">…

Nous pouvons bien sûr ajouter plusieurs styles CSS en même temps sous forme d'un
objet avec des paramètres.
$('.box').css({
'background-color':'red',
'font-size':'20px',
'color':'yellow'
});
Résultat
<div class="box" style="font-size:20px;color:yellow;background-
color:red;">…</div>

Méthodes les plus utilisées :

• .attr(); Créer un attribut HTML (setter) ou récupérer la valeur d’un attribut
(getter)
• .removeAttr() ; Supprimer un attribut
• .css(); Ajouter une (plusieurs) propriété CSS
• .addClass(); Ajouter une class
• .removeClass(); Supprimer une class
• .toggleClass(); Ajouter ou supprimer une class
• .append(); Insère du contenu a la fin de la sélection
• prepend(); au début de la sélection
• .after() ; Insère du contenu après la sélection
• before() ; Avant la selection
• .hide(); Cacher un éléments
• .show(); Afficher un élément
16/23
 Module - jQuery

• .toogle(); Cacher ou afficher un élément

• .animate(); Animer des éléments (transitions)
• val(); Récupérer la valeur saisie dans un <input>
• .parent(); Accéder à l’élément parent de la sélection
• .next() ; élément suivant (frère)
• alert(); Affiche en pop-up le message écrit en argument

DOC : Toutes les méthodes listées en page d'accueil de l'API :

http://api.jquery.com/

Les arguments
Indiqué entre parenthèses de la méthode= selon quels paramètres va s’exécuter
l'action ?

Ils sont séparés entre eux par une virgule. Une méthode peut être écrite sans
paramètres, dans ce cas on écrit quand même les parenthèses.

Change le titre en titre modifié (paramètre de .html) de couleur rouge (2 paramètres

de .css) et insère un paragraphe après (.after).
$('#titre-site').html('Titre modifié').css('color','red').after('<p>Paragraphe
introductif</p>');

Voici la syntaxe pour passer plusieurs couples clé/valeur à un argument. Par exemple
ici plusieurs propriétés CSS :
$('#titre-site').css({
'color':'red',
'font-size':'2rem'
});

Les événements
Méthode permettent de déclencher une action (lancer d'autres méthodes) : au click sur
un bouton, au survol d'une image, lorsque la molette de la souris est tournée, au clic
droit, au chargement de la page...

Effectuer une tâche au chargement d'une page.

// Quand le DOM est prêt, nous appelons tous nos scripts
17/23
 Module - jQuery

$(document).ready(function() {
// Ici le DOM est prêt, appelons nos scripts
});
Cette fonction utilise avec la méthode .ready() qui écoute le chargement de la page.
L'écoute d'événements consiste à attacher une action à remplir à un élément pour
déclencher une fonction que nous appellerons écouteur d'événement.

Méthode .on()

La méthode .on() attache un ou plusieurs gestionnaires d'événements sur les éléments

sélectionnés et les éléments enfants. Elle permet d'écouter les éléments créés
dynamiquement.
La méthode.on() prend comme événement:
blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclic ,mousedown,
mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change,
select, submit, keydown, keypress, keyup, error
Exemple 1
HTML
<div id="demo">
<p>Afficher une bordure dans le block
conteneur</p> </div>
<button class="voir">Voir le block</button>

JQuery
$('.voir').click(function () {
$('#demo').css('border', '1px solid #ccc'); });
Au .click sur le bouton ayant la class=''voir'', je lance une fonction (événement) qui
va ajouter (en css) à la div ayant l'id=''demo2'' une bordure grise.

Une autre façon d’écrire l’instruction ci-dessus (à privilégier car plus moderne et
optimisée) :
$('.voir').on('click', function () {
$('#demo').css('border', '1px solid #ccc'); });

Note : Utilisation du sélecteur $(this)

Exemple 2
18/23
 Module - jQuery

Dans les exemples ci-dessus il y a 2 éléments : le bouton qui est cliqué et la div sur
laquelle s’effectue l’action (ajout d’une bordure en css). Dans le cas ou l’action
s’effectue sur l’élément cliqué, la syntaxe sera la suivante :

$('#demo').click(function () {
$(this).css('border', '1px solid #ccc'); });
Il n’y a pas de bouton dans ce cas. Au clic sur l’élément #demo, celui-ci prend une
bordure.

Les méthodes d'événements

DOC : Liste de événements jQuery : http://api.jquery.com/category/events/

Les événements de la souris

19/23
 Module - jQuery

Événement Description

.click() Lors du clic sur l'élément

.dblclick() Au double- clic sur l'élément

.scroll() Lors du scroll sur l'élément

.mousedown() Lorsque le bouton de la souris est enfoncé sur l'élément

.mouseup() Lorsque le bouton de la souris est relâché au dessus de

l'élément

.mousemove() Le pointeur se déplace dans l'élément

.mouseover() Lorsque le curseur entre dans l'élément

.mouseout() Lorsque le curseur sort de l'élément

.mouseenter() Lorsque le curseur entre dans l'élément, le bouillonnement

n'a pas d'effet

.mouseleave() Lorsque le curseur sort de l'élément, le bouillonnement n'a

pas d'effet

Les événements du clavier

Événement Description

.keydown() Lorsqu'une touche du clavier est enfoncée

.keypress() Lorsqu'une touche du clavier vient d'être enfoncée

.keyup() Lorsqu'une touche vient d'être relachée

Les autres événements

20/23
 Module - jQuery

Événement Description
.blur() Lorsque l'élément perd son focus
.focus() Lorsque l'élément a le focus
.load() Lorsque l'élément est chargé
.resize() Lorsque l'élément est redimensionné
.change() Lorsque l'élément subit un changement .select() Lorsque le texte
est sélectionné dans un formulaire
.submit() Lorsque le formulaire est soumis

La propagation d'événements

Lorsque que vous déclarez un événement, il se propage à travers le DOM suivant le

principe de bouillonnement jusqu'à rencontrer le ou les élément(s) ciblé(s).
HTML
<ul>
<li>Niveau 1</li>
<li>Niveau 1</li>
<li>
<ul>
<li>Niveau 2</li>
<li>Niveau 2</li>
</ul>
</li>
<li>Niveau 1</li>
<li>Niveau 1</li>
</ul>

JQuery
$("li").click(function(){
alert($(this).html());
});

L'événement se propagera à travers tous les li du document suivant le principe de

bouillonnement. Le script sera exécuté à chaque élément li rencontré, peu importe son
niveau dans le DOM. C'est ce qu'on appelle la propagation d'événements.

Éviter la propagation
21/23
 Module - jQuery

Dans certains cas, la propagation est problématique. Heureusement jQuery propose

deux moyens de les éviter.
event.stopPropagation()
event.stopPropagation() empêche l'évènement de se propager dans l'arbre DOM en
évitant le bouillonnement. Dans l'exemple ci-dessous, le message d'alerte n'apparaît
qu'une fois.

jQuery
$("li").click(function(e){
event.stopPropagation();
alert($(this).html());
});
return false

return false empêche-lui aussi l'évènement de se propager dans l'arbre DOM en

évitant le bouillonnement comme event.stopPropagation() . Il annule également
l'action en cours.
Dans l'exemple suivant, nous affichons un message d'alerte et nous empêchons la
modification de l'URL au clic sur l'ancre.
HTML
<a id="totop" href="#">Haut de page</a>

Jquery
$("#totop").click(function(){
alert($(this).html());
return false ;
});

-Plugins
Intégrer des fonctionnalités
On va ainsi pouvoir, avec de bonnes bases en HTML et CSS adapter rapidement des
scripts réalisés par d'autres et mis en ligne gratuitement sur le WEB.

Ressources
Quelques exemples :

22/23
 Module - jQuery

• Mediabox
http://fancyapps.com/fancybox/3/

• Slides
https://kenwheeler.github.io/slick/

• Parallax
https://freefrontend.com/jquery-parallax/

• Effets au scroll
https://freefrontend.com/jquery-scroll-effects/

• Divers
https://1stwebdesigner.com/the-best-jquery-plugins

• Divers
https://speckyboy.com/free-jquery-plugins/

23/23