Chapitre4 Jquery
Chapitre4 Jquery
Chapitre4 Jquery
I. MANIPULER LE HTML
Les méthodes jQuery manipulent le DOM d'une certaine manière.Quelques-unes d'entre elles
changent simplement un des attributs d'un élément, tandis que d'autres servent pour définir les
propriétés de style d'un élément. Alors que d'autres modifient les éléments de l'ensemble (ou
groupes d'éléments) eux-mêmes insertion, copier, supprimer et ainsi de suite.
2) Méthode html() :
$(selector).html()
Définir le contenu :
$(selector).html(content)
$(selector).html(function(index,currentcontent))
Exemple 1:
$("#titre).html();
$("#titre).html("<b>bonjour</b>");
N.NAKKAI Page 1
[COURS PRRÉPARATION À LA CERTFICATION2] 2021/2022
<!doctype html>
<html lang="fr">
<head>
<metacharset="utf-8">
<title>Exemple jQuery: jQuery modifier le contenu HTML d'un élément</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").html("Apprendre JQuery " );
});
});
</script>
</head>
<body>
<h1>Exemple jQuery: jQuery modifier le contenu HTML d'un élément</h1>
<button>Cliquez pour voir</button>
<div>
<p>C'est un paragraphe</p>
<p>C'est un autre paragraphe</p>
</div>
</body>
</html>
<!doctype html>
<html lang="fr">
<head>
<metacharset="utf-8">
<title>Exemple jQuery:jQuery récupérer le contenu HTML d'un élément</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
p{border:solid 1px #000;width:200px;}
div{border:solid 1px #000;width:250px;padding:20px}
button{margin:10px}
</style>
<script>
$(document).ready(function(){
N.NAKKAI Page 2
[COURS PRRÉPARATION À LA CERTFICATION2] 2021/2022
$(".btn-one").click(function(){
varstr = $("p").html();
alert("Voici le contenu du paragraphe:\n"+str);
});
$(".btn-two").click(function(){
varstr = $("#container").html();
alert("Voici le contenu du div conteneur:\n"+str);
});
});
</script>
</head>
<body>
<div id="container"><button type="button" class="btn-one">Obtenir le contenu HTML du
paragraphe</button>
<button type="button" class="btn-two">Obtenir le contenu HTML du conteneur</button>
Syntaxe :
$(Selecteur).Append(Content)
Syntaxe :
$(Selecteur).Prepend(Content)
<!doctype html>
<html lang="fr">
<head>
N.NAKKAI Page 3
[COURS PRRÉPARATION À LA CERTFICATION2] 2021/2022
<metacharset="utf-8">
<title>Exemple jQuery: jQuery ajout de contenu HTML à élément</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").append(" avec le site: oujood.com");
});
});
</script>
</head>
<body>
<button>Cliquez pour voir</button>
<div>
<p>J'apprend JQuery <br>
J'apprend JQuery</p>
<p>C'est un autre paragraphe</p>
</div>
</body>
</html>
La méthode prepend() « ajoute » contenu à l'intérieur des éléments HTML correspondants avant
la première ligne.
<!doctype html>
<html lang="fr">
<head>
<metacharset="utf-8">
<title>Exemple jQuery: jQuery ajout de contenu HTML à élément</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").prepend("<b>Hello world!</b> ");
});
});
</script>
</head>
<body>
<button>Cliquez pour voir</button>
<div>
<p>J'apprend JQuery</p>
<p>C'est un autre paragraphe </p>
N.NAKKAI Page 4
[COURS PRRÉPARATION À LA CERTFICATION2] 2021/2022
</div>
</body>
</html>
Le code suivant ajoute un paragraphe aprés chaque paragraphe trouvé en utilisant la méthode
after().
<!doctype html>
<html lang="fr">
<head>
<metacharset="utf-8">
<title>Exemple jQuery: jQuery ajout de contenu HTML aprés élément</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
p{border:solid 1px #000;width:200px;}
</style>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").after("<p>oujood.com.</p>");
});
});
</script>
</head>
<body>
<button>Cliquez pour voir</button>
<div>
<p>J'apprend JQuery avec le site </p>
N.NAKKAI Page 5
[COURS PRRÉPARATION À LA CERTFICATION2] 2021/2022
Le code suivant ajoute un titre de niveau h3 avant chaque paragraphe trouvé en utilisant la
méthode before())
<!doctype html>
<html lang="fr">
<head>
<metacharset="utf-8">
<title>Exemple jQuery: jQuery ajout de contenu HTML avant un élément</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
p{border:solid 1px #000;width:200px;}
</style>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").before("<h3>Bonjour je suis un nouveau titre h3</h3>");
});
});
</script>
</head>
<body>
<button>Cliquez pour voir</button>
<div>
<p>J'apprend JQuery </p>
<p>C'est un autre paragraphe </p>
</div>
</body>
</html>
7) hide()
La méthode hide() est une méthode qui permet de cacher un élément s’il était visible.
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
N.NAKKAI Page 6
[COURS PRRÉPARATION À LA CERTFICATION2] 2021/2022
});
});
<p>Ceci est un paragraphe.</p>
<button id="hide">Masquer le paragraphe</button>
8) show()
La méthode show() est une méthode qui permet d’afficher un élément s’il était caché.
$(document).ready(function(){
$("#show").click(function(){
$("p").show();
});
});
<p style="display: none;">Ceci est un paragraphe.</p>
<button id="show">Afficher le paragraphe</button>
9) toggle()
La méthode toggle() est une méthode qui permet de basculer entre les méthodes hide() et show().
Il affiche les éléments cachés et cache les éléments visibles.
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});
<p>Ceci est un paragraphe.</p>
<button>Afficher/masquer le paragraphe</button>
La méthode jQuery css() offre un moyen rapide d'appliquer les styles directement aux éléments
HTML (c'est-à-dire les styles en ligne) qui n'ont pas été définis ou ne peuvent pas être définis
dans une feuille de style.
La méthode jQuery css() a trois syntaxes différentes, pour exécuter des tâches différentes.
N.NAKKAI Page 7
[COURS PRRÉPARATION À LA CERTFICATION2] 2021/2022
Vous pouvez récupérer la valeur de la propriété CSS d'un élément en passant simplement le nom
de la propriété comme paramètre à la méthode css().
Utilisez css(nom) pour renvoyer la valeur de la propriété CSS spécifiée du premier élément
séléctionné:
La méthode jQuery css(nom) est utilisée pour récupérer la valeur d'une propriété pour un élément
sélectionné , où nom est le nom de la propriété.
<!doctype html>
<html lang="fr">
<head>
<metacharset="utf-8">
<title>Exemple jQuery récupération de la proprietébacground-color</title>
<scriptsrc="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
div{width: 200px; height: 100px; background-color: #00ffff;}
</style>
<script>
$(document).ready(function(){
$("div").click(function(){
var fond = $(this).css("background-color");
$("p").html("la propriété css de l'arriére plan est : "+fond);
});
});
</script>
</head>
<body>
<div></div>
<p>Clique sur le carré pour voir la couleur du fond.</p>
</body>
</html>
N.NAKKAI Page 8
[COURS PRRÉPARATION À LA CERTFICATION2] 2021/2022
Utilisez css(nom,valeur) pour définir la propriété CSS spécifiée pour tous les éléments
selectionnés.
Pour donner une valeur à une propriété pour un élément selectionné, on utilise la fonction
css(nom,valeur), où nom est le nom de la propriété et valeur la valeur à donner à cette propriété.
<!doctype html>
<html lang="fr">
<head>
<metacharset="utf-8">
<title>Exemple jQuery définir de la proprietébacground-color</title>
<scriptsrc="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
p{width: 200px; height: 100px; background-color: #ffff00;}
</style>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p#demo").css("background-color","#00ffff");
});
});
</script>
</head>
<body>
<h2>Donner une couleur à la propriété css background-color</h2>
<p>Ce ci est un paragraphe.</p>
<p id="demo">Ce ci est un autre paragraphe.</p>
<button>Cliquer ici</button>
</body>
</html>
La méthode jQuery css({propriété CSS, valeur}) sert pour définir une ou plusieurs paires de
{propriété CSS, valeur} des éléments sélectionnés.
N.NAKKAI Page 9
[COURS PRRÉPARATION À LA CERTFICATION2] 2021/2022
La méthode jQuery css({propriété CSS, valeur}) nous perment surtout de pouvoir définir les
valeurs de plusieurs propriété en même temps et dans une seule syntaxe comme le montre
l'éxemple ci-dessous :
Exemple : Donner une couleur à la propriété css background-color et une taille à la police
<!doctype html>
<html lang="fr">
<head>
<metacharset="utf-8">
<title>Exemple jQuery affecter une couleur à bacground-color, une taille à la police et une couleur au
titre</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").css({"background-color":"yellow","font-size":"200%"});
$("h2").css({"color":"#f00","border":"solid 1px #000"});
});
});
</script>
</head>
<body>
<h2>Manipuler plusieurs propriétés css</h2>
<p>Ce ci est un paragraphe.</p>
<p>Ce ci est un autre paragraphe.</p>
<button>Cliquer ici</button>
</body>
</html>
jQuery possède deux méthodes importantes pour la manipulation de la taille d'un éléments.
N.NAKKAI Page 10
[COURS PRRÉPARATION À LA CERTFICATION2] 2021/2022
Exemple
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Exemple jQuery manipulation de la hauteur et de la largeur</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<title></title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").height("200px");
});
$("button").click(function(){
$("#div2").width("300px");
});
});
</script>
<style>div{margin-bottom:20px;}</style>
</head>
<body>
<div id="div1" style="background:#00ffff;height:100px;width:120px">Ceciest un
élément pour le quel on va changer la hauteur</div>
<div id="div2"style="background:#ffff00;height:100px;width:120px">ceci est un
autre élément pour lequel on va changer la largeur</div>
<button>Cliquer ici</button>
</body>
</html>
Le tableau suivant répertorie toutes les méthodes utilisées pour manipuler le DOM.
Méthode Description
N.NAKKAI Page 11
[COURS PRRÉPARATION À LA CERTFICATION2] 2021/2022
N.NAKKAI Page 12
[COURS PRRÉPARATION À LA CERTFICATION2] 2021/2022
éléments sélectionné
Envelopper d'une structure HTML tous les éléments dans l'ensemble des
wrapAll()
éléments sélectionnés
Exercice
En utilisant Jquery, modifier le contenu de la balise <p> par le texte suivant : « Le DOM est
chargé, notre premier test. » ?
<html>
<head>
</head>
<body>
<a href="exam-lib.com">texte</a>
</body>
N.NAKKAI Page 13
[COURS PRRÉPARATION À LA CERTFICATION2] 2021/2022
</html>
N.NAKKAI Page 14