Chapitre4 Jquery

[COURS PRRÉPARATION À LA CERTFICATION2] 2021/2022
Chapitre4 : Les méthodes 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.
1) Méthode text() : Les caractères HTML sont convertis
$("#titre).text();=> Charge le texte
$("#titre).text("bonjour"); => Modifie le texte
2) Méthode html() :
La méthode html() définit ou renvoie le contenu (innerHTML) des éléments sélectionnés.

Lorsque cette méthode est utilisée pour renvoyer du contenu, elle renvoie le contenu du premier
élément rencontré.
Lorsque cette méthode est utilisée pour définir le contenu, elle écrire le contenu dans touts les
éléments rencontrés.
Syntaxe pour:p> Renvoyer le contenu :
$(selector).html()
Définir le contenu :
$(selector).html(content)
Définir le contenu à l’aide d’une fonction :
$(selector).html(function(index,currentcontent))
Exemple 1:
$("#titre).html();
$("#titre).html("<b>bonjour</b>");
N.NAKKAI Page 1
Exemple 2:Modifier le contenu HTML d'un élément
<!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>
Exemple 3:Récupérer le contenu HTML avec la méthode html()
<!doctype html>
<html lang="fr">
<head>
<title>Exemple jQuery:jQuery récupérer le contenu HTML d'un élément</title>
<style>
p{border:solid 1px #000;width:200px;}
div{border:solid 1px #000;width:250px;padding:20px}
button{margin:10px}
</style>
<script>
N.NAKKAI Page 2
$(".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>
<h1>Bonjour tout le monde!</h1>

<p>J'appreds le langage jQuery avec la site <b>oujood.com</b></p>
</div>
</body>
</html>
3) Méthode replaceWith() : Remplace le contenu d'une balise

4) Méthodes prepend() et append() : Ajoute avant ou après du contenu
La méthode append() ajoute le contenu à l'intérieur des éléments HTML correspondants

après la dernière ligne.
Syntaxe :
$(Selecteur).Append(Content)
La méthode prepend() « ajoute » du contenu à l'intérieur des éléments HTML correspondants

avant la première ligne.
Syntaxe :
$(Selecteur).Prepend(Content)
Exemple1 :Ajout de contenu HTML à la fin d'un élément
<!doctype html>
<html lang="fr">
<head>
N.NAKKAI Page 3
<title>Exemple jQuery: jQuery ajout de contenu HTML à élément</title>
<script>
$("p").append(" avec le site: oujood.com");
});
});
</script>
</head>
<body>
<div>
<p>J'apprend JQuery <br>
J'apprend JQuery</p>
<p>C'est un autre paragraphe</p>
</div>
</body>
</html>
Exemple 2 :jQuery ajout de contenu HTML au début d'un élément
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>
<title>Exemple jQuery: jQuery ajout de contenu HTML à élément</title>
<script>
$("p").prepend("<b>Hello world!</b> ");
});
});
</script>
</head>
<body>
<div>
<p>J'apprend JQuery</p>
<p>C'est un autre paragraphe </p>
N.NAKKAI Page 4
</div>
</body>
</html>
5) Méthodes After() et Before()
La méthode after() insère du contenu HTML après les éléments correspondants.

Syntaxe :
$(Selecteur).After(Content)
La méthode before() insère du contenu HTML avant les éléments correspondants .
Syntaxe :
$(Selecteur).before(Content)
Exemple1 :Ajouter du contenu html avec after()
Le code suivant ajoute un paragraphe aprés chaque paragraphe trouvé en utilisant la méthode
after().
<!doctype html>
<html lang="fr">
<head>
<title>Exemple jQuery: jQuery ajout de contenu HTML aprés élément</title>
<style>
</style>
<script>
$("p").after("<p>oujood.com.</p>");
});
});
</script>
</head>
<body>
<div>
<p>J'apprend JQuery avec le site </p>
N.NAKKAI Page 5

</div>
</body>
</html>
Exemple2 :Ajouter du contenu html avec before()
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>
<title>Exemple jQuery: jQuery ajout de contenu HTML avant un élément</title>
<style>
</style>
<script>
$("p").before("<h3>Bonjour je suis un nouveau titre h3</h3>");
});
});
</script>
</head>
<body>
<div>
<p>J'apprend JQuery </p>
</div>
</body>
</html>
6) Méthode wrap() :Enveloppe avec des balises.

Exemple : $("#titre").wrap("");
7) hide()
La méthode hide() est une méthode qui permet de cacher un élément s’il était visible.
$("#hide").click(function(){
$("p").hide();
N.NAKKAI Page 6
});
});
<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é.
$("#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.
$("p").toggle();
});
});
<p>Ceci est un paragraphe.</p>
<button>Afficher/masquer le paragraphe</button>
II. MANIPULER LES CSS

1) Méthode CSS()
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.
 CSS(Nom) - Retourne : valeur de la propriété CSS définie

 CSS(Nom,Valeur) - Retourne : propriété CSS définie et valeur
 CSS({Properties}) - Retourne : la valeur des propriétés CSS et des valeurs multiples
 L'atibut nom est le nom de la propriété à manipuler
N.NAKKAI Page 7
 L'atttribut valeur est la valeur de la propriété à manipuler
a) Récupérer une propriété CSS avec la méthode css(nom)
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é.
Exemple : récupérer la propriété background-color avec css(nom)
<!doctype html>
<html lang="fr">
<head>
<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>
$("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
b) Définir la propriété CSS et sa valeur
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é.
Exemple : Donner une couleur à la propriété css background-color avec css(nom,valeur)
<!doctype html>
<html lang="fr">
<head>
<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>
$("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>
c) Définir des paires de valeur de la propriété CSS
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
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>
<title>Exemple jQuery affecter une couleur à bacground-color, une taille à la police et une couleur au
titre</title>
<script>
$("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>
</body>
</html>
2) Méthodes width() et height()
jQuery possède deux méthodes importantes pour la manipulation de la taille d'un éléments.
 la fonction ou méthode height() pour manipuler la hauteur. La méthode jQuery height()

perment de changer la hauteur d'un élément.
 la fonction width() qui sert pour manipuler la largeur. La méthode jQuery width() pour
changer la largeur de l'élément selectionné.
 La méthode jQuery height() définit la hauteur de tous les éléments correspondants.

 La méthode jQuery width() définit la largeur de tous les éléments correspondants.
N.NAKKAI Page 10
Exemple
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Exemple jQuery manipulation de la hauteur et de la largeur</title>
<title></title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$("#div1").height("200px");
});
$("#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>
</body>
</html>
3) Méthode addClass() :Ajoute dynamiquement une classe à un élément

4) Méthodes removeClass() : Retire une classe
5) Méthode toggleClass() : Alterne l'utilisation d'une classe Les dimensions et position
III. Autres méthodes
Le tableau suivant répertorie toutes les méthodes utilisées pour manipuler le DOM.
Méthode Description
N.NAKKAI Page 11
addClass() Ajouter la classe spécifiée à chacun de l'ensemble des éléments sélectionnés

Insérer le contenu spécifié par le paramètre, après chaque élément dans
After()
l'ensemble des éléments sélectionnés
Append() Insère le contenu à la fin des éléments sélectionnés (toujours à l'intérieur)
appendTo() Insère le contenu à la fin des éléments sélectionnés ( toujours à l'intérieur)
attr() Définit ou renvoie un attribut et sa valeur des éléments sélectionnés
Insérer le contenu, spécifié par le paramètre, avant chaque élément dans
Before()
l'ensemble des éléments sélectionnés
Obtenir la valeur d'une propriété de style pour le premier élément dans
Css()
l'ensemble des éléments sélectionnés.
clone() Créer une copie des éléments sélectionnés
Detach() Supprime les éléments sélectionné (en conservant une copie )
Empty() Supprime tous les éléments enfants et leurs contenus des éléments sélectionnés
hasClass() Vérifie si un des éléments sélectionnés a une classe spécifiée (pour les CSS)
html() Définit ou renvoie le contenu des éléments sélectionnés
Renvoie la hauteur calculée actuelle pour le premier élément dans l'ensemble
innerHeight()
des éléments sélectionnés, y compris le padding, mais pas la frontière.
Renvoie la largeur calculée actuelle pour le premier élément dans l'ensemble
innerWidth()
des éléments sélectionnés, y compris le padding, mais pas la frontière.
insertAfter() Insère des balises HTML ou des éléments après les éléments sélectionnés
insertBefore() Insère des balises HTML ou des éléments avant les éléments sélectionnés
Renvoie les coordonnées actuelles du premier élément dans l'ensemble des
offset()
éléments sélectionnés, par rapport au document.
Obtenez les coordonnées actuelles du premier élément dans l'ensemble des
position()
éléments sélectionnés, par rapport à son parent.
Prepend() Insère le contenu au début des éléments sélectionné (toujours à l'intérieur)
prependTo() Insère le contenu au début des éléments sélectionné (toujours à l'intérieur)
prop() Obtenir ou définir une propriété de l'élément sélectionné
Remove() Supprime les éléments sélectionnés
removeAttr() Supprime un attribut des éléments sélectionnés
removeClass() Supprime une ou plusieurs classes des éléments sélectionnés (pour les CSS)
replaceAll() Remplace le contenu des éléments sélectionnés avec un nouveau contenu
replaceWith() Remplace le contenu des éléments sélectionnés avec un nouveau contenu
Renvoie la position horizontale actuelle de la barre de défilement pour le
ScrollLeft()
premier élément dans l'ensemble des éléments sélectionnés.
Obtenir la position verticale actuelle de la barre de défilement pour le premier
scrollTop()
élément dans l'ensemble des éléments assortis.
Text() Définit ou renvoie le contenu texte des éléments sélectionnés
Bascule entre Ajout et suppression d'une ou plusieurs classes (pour les CSS) des
toggleClass()
éléments sélectionnés
Unwrap() Supprime l'élément parent des éléments sélectionnés
Définit ou renvoie l'attribut value des éléments sélectionnés (pour les éléments
Val()
de formulaire)
Wrap() Envelopper d'une structure HTML chaque élément dans l'ensemble des
N.NAKKAI Page 12
éléments sélectionné
Envelopper d'une structure HTML tous les éléments dans l'ensemble des
wrapAll()
éléments sélectionnés
IV. Exercices d’applications
Exercice
En utilisant Jquery, modifier le contenu de la balise <p> par le texte suivant : « Le DOM est
chargé, notre premier test. » ?
2. Ajouter au texte précédent, la phrase « ceci est le deuxième texte »

3. Afficher l’ancre du lien <a> dans une boite de dialogue ?
4. Remplacez le texte « Salut tout le monde ! » par « salut les amis » ?
5. Remplacez le texte « Salut tout le monde ! » par le titre de la page ?
6. Afficher le texte suivant « apres le div » après la balise <div id="test"> Salut tout le monde
!</div>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<title>Mon premier test jQuery</title>
</head>
<body>
<a href="exam-lib.com">texte</a>
<div id="test"> Salut tout le monde !</div>
<h1>Premier pas avec jQuery</h1>
<p>Un peu de texte pour ne rien dire</p>
<ahref="http://artcompix.com">un lien pour tester</a>
</body>
N.NAKKAI Page 13
</html>
N.NAKKAI Page 14

Chapitre4 Jquery

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Chapitre4 Jquery

Transféré par

Droits d'auteur :

Formats disponibles

[COURS PRRÉPARATION À LA CERTFICATION2] 2021/2022

Chapitre4 : Les méthodes jQuery

1) Méthode text() : Les caractères HTML sont convertis

$("#titre).text();=> Charge le texte

$("#titre).text("bonjour"); => Modifie le texte

La méthode html() définit ou renvoie le contenu (innerHTML) des éléments sélectionnés.

Syntaxe pour:p> Renvoyer le contenu :

Définir le contenu à l’aide d’une fonction :

Exemple 2:Modifier le contenu HTML d'un élément

Exemple 3:Récupérer le contenu HTML avec la méthode html()

<h1>Bonjour tout le monde!</h1>

3) Méthode replaceWith() : Remplace le contenu d'une balise

La méthode append() ajoute le contenu à l'intérieur des éléments HTML correspondants

La méthode prepend() « ajoute » du contenu à l'intérieur des éléments HTML correspondants

Exemple1 :Ajout de contenu HTML à la fin d'un élément

Exemple 2 :jQuery ajout de contenu HTML au début d'un élément

5) Méthodes After() et Before()

La méthode after() insère du contenu HTML après les éléments correspondants.

<p>C'est un autre paragraphe </p>

Exemple2 :Ajouter du contenu html avec before()

6) Méthode wrap() :Enveloppe avec des balises.

II. MANIPULER LES CSS

 CSS(Nom) - Retourne : valeur de la propriété CSS définie

 L'atibut nom est le nom de la propriété à manipuler

 L'atttribut valeur est la valeur de la propriété à manipuler

a) Récupérer une propriété CSS avec la méthode css(nom)

Exemple : récupérer la propriété background-color avec css(nom)

b) Définir la propriété CSS et sa valeur

Exemple : Donner une couleur à la propriété css background-color avec css(nom,valeur)

c) Définir des paires de valeur de la propriété CSS

2) Méthodes width() et height()

 la fonction ou méthode height() pour manipuler la hauteur. La méthode jQuery height()

 La méthode jQuery height() définit la hauteur de tous les éléments correspondants.

3) Méthode addClass() :Ajoute dynamiquement une classe à un élément

III. Autres méthodes

addClass() Ajouter la classe spécifiée à chacun de l'ensemble des éléments sélectionnés

IV. Exercices d’applications

2. Ajouter au texte précédent, la phrase « ceci est le deuxième texte »

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

<title>Mon premier test jQuery</title>

<div id="test"> Salut tout le monde !</div>

<h1>Premier pas avec jQuery</h1>

<p>Un peu de texte pour ne rien dire</p>

<ahref="http://artcompix.com">un lien pour tester</a>

Vous aimerez peut-être aussi