jQuery - Définir le contenu et les attributs
Définir le contenu - text(), html() et val()
Nous utiliserons les trois mêmes méthodes de la page précédente pour définir le contenu :
text()- Définit ou renvoie le contenu textuel des éléments sélectionnéshtml()- Définit ou renvoie le contenu des éléments sélectionnés (y compris le balisage HTML)val()- Définit ou renvoie la valeur des champs de formulaire
L'exemple suivant montre comment définir du contenu avec les méthodes jQuery text(), html()et val():
Exemple
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");
});
Une fonction de rappel pour text(), html() et val()
Les trois méthodes jQuery ci-dessus : text(), html()et val(), sont également fournies avec une fonction de rappel. La fonction de rappel a deux paramètres : l'indice de l'élément courant dans la liste des éléments sélectionnés et la valeur d'origine (ancienne). Vous renvoyez ensuite la chaîne que vous souhaitez utiliser comme nouvelle valeur de la fonction.
L'exemple suivant illustre text()et html()avec une fonction de rappel :
Exemple
$("#btn1").click(function(){
$("#test1").text(function(i, origText){
return "Old text: " + origText + " New text: Hello world!
(index: " + i + ")";
});
});
$("#btn2").click(function(){
$("#test2").html(function(i, origText){
return "Old html: " + origText + " New html: Hello
<b>world!</b>
(index: " + i + ")";
});
});
Définir les attributs - attr ()
La méthode jQuery attr()est également utilisée pour définir/modifier les valeurs des attributs.
L'exemple suivant montre comment modifier (définir) la valeur de l'attribut href dans un lien :
Exemple
$("button").click(function(){
$("#w3s").attr("href", "https://www.w3schools.com/jquery/");
});
La attr()méthode vous permet également de définir plusieurs attributs en même temps.
L'exemple suivant montre comment définir les attributs href et title en même temps :
Exemple
$("button").click(function(){
$("#w3s").attr({
"href" : "https://www.w3schools.com/jquery/",
"title" : "W3Schools jQuery Tutorial"
});
});
Une fonction de rappel pour attr()
La méthode jQuery attr()est également livrée avec une fonction de rappel. La fonction de rappel a deux paramètres : l'indice de l'élément courant dans la liste des éléments sélectionnés et la valeur d'attribut d'origine (ancienne). Vous renvoyez ensuite la chaîne que vous souhaitez utiliser comme nouvelle valeur d'attribut de la fonction.
L'exemple suivant illustre attr()une fonction de rappel :
Exemple
$("button").click(function(){
$("#w3s").attr("href", function(i, origValue){
return origValue + "/jquery/";
});
});
Exercices jQuery
Référence HTML jQuery
Pour un aperçu complet de toutes les méthodes jQuery HTML, veuillez consulter notre Référence jQuery HTML/CSS .