Définit balises de niveau des titres HTML
jQuery contient des méthodes(fonctions) puissantes pour changer et manipuler des attributs et des éléments HTML
jQuery contient des méthodes( c'est à dire des fonctions) puissantes pour changer et manipuler les attributs et le contenu des éléments HTML.
Certaines méthodes jQuery peuvent être utilisées pour assigner ou lire une valeur sur une sélection. Parmi ces méthodes, citons text(), html(), attr() et val().
Lorsque ces méthodes sont appelées sans argument, on parle de getters, car elles obtiennent (ou lisent) la valeur de l'élément.
Lorsque ces méthodes sont appelées avec une valeur en argument, on parle de setter, car elles définissent (ou assignent) cette valeur.
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))
L'exemple suivant vous montre comment modifier le contenu HTML des éléments p :
Exemple : 📝 Copier le code
<!doctype html>
<html lang="fr">
<head>
<meta charset="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 par tutoriel" );
});
});
</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>
L'exemple suivant vous montre comment récupérer le contenu HTML des éléments de paragraphe ainsi que d'un élément conteneur <div> :
Code
Exemple : 📝 Copier le code
<!doctype html>
<html lang="fr">
<head>
<meta charset="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(){
$(".btn-one").click(function(){
var str = $("p").html();
alert("Voici le contenu du paragraphe:\n"+str);
});
$(".btn-two").click(function(){
var str = $("#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>
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)
Exemple : 📝 Copier le code
<!doctype html>
<html lang="fr">
<head>
<meta charset="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.
Exemple : 📝 Copier le code
<!doctype html>
<html lang="fr">
<head>
<meta charset="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>
</div>
</body>
</html>
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)
Le code suivant ajoute un paragraphe aprés chaque paragraphe trouvé en utilisant la méthode after().
Exemple : 📝 Copier le code
<!doctype html>
<html lang="fr">
<head>
<meta charset="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>
<p>C'est un autre paragraphe </p>
</div>
</body>
</html>
Le code suivant ajoute un titre de niveau h3 avant chaque paragraphe trouvé en utilisant la méthode before())
Exemple : 📝 Copier le code
<!doctype html>
<html lang="fr">
<head>
<meta charset="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>
Pour une référence complète jQuery HTML, veuillez vous rendre à nos référence méthodes de jQuery HTML .
|
Cours precedent: jQuery fonctions callback |
Sommaire de : JQuery |
Cours suivant: jQuery manipulation css |