jQuery - Définir le contenu et les attributs

Définir le contenu - text(), html() et val()

Nous allons utiliser les trois mêmes méthodes du chapitre précédent pour définir le contenu :

  • text() - Définir ou renvoyer le contenu texte des éléments sélectionnés
  • html() - Définir ou renvoyer le contenu des éléments sélectionnés (y compris le balisage HTML)
  • val() - Définir ou renvoyer la valeur des champs de formulaire

L'exemple suivant montre comment définir le contenu à l'aide des méthodes text(), html() et val() :

Exemple

$("#btn1").click(function(){ $("#test1").text("Bonjour le monde !"); }); $("#btn2").click(function(){ $("#test2").html("<b>Bonjour le monde !</b>"); }); $("#btn3").click(function(){ $("#test3").val("EXEMPLE"); });

Essayez-le vous-même »

Fonctions de rappel pour text(), html() et val()

Les trois méthodes jQuery ci-dessus : text(), html() et val(), ont également des fonctions de rappel. La fonction de rappel a deux paramètres : l'index de l'élément actuel dans la liste des éléments sélectionnés, et la valeur d'origine (ancienne). Ensuite, vous renvoyez la chaîne que vous souhaitez utiliser comme nouvelle valeur de la fonction.

L'exemple suivant montre text() et html() avec des fonctions de rappel :

Exemple

$("#btn1").click(function(){ $("#test1").text(function(i,origText){ return "Ancien texte :" + origText + "Nouveau texte : Hello world! (index :" + i + ")"; }); }); $("#btn2").click(function(){ $("#test2").html(function(i,origText){ return "Ancien html :" + origText + "Nouveau html : Hello <b>world!</b> (index :" + i + ")"; }); });

Essayez-le vous-même »

Définir les attributs - attr()

La méthode attr() de jQuery est également utilisée pour définir/modifier les valeurs d'attribut.

L'exemple suivant montre comment modifier (définir) la valeur de l'attribut href dans un lien :

Exemple

$("button").click(function(){ $("#example").attr("href","http://www.example.com/jquery"); });

Essayez-le vous-même »

La méthode attr() 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(){ $("#example").attr({ "href" : "http://www.example.com/jquery", "title" : "Tutoriel jQuery" }); });

Essayez-le vous-même »

Fonction de rappel pour attr()

La méthode jQuery attr() fournit également une fonction de rappel. La fonction de rappel a deux paramètres : l'indice de l'élément actuel dans la liste des éléments sélectionnés, et la valeur d'origine (ancienne). Retournez ensuite la chaîne que vous souhaitez utiliser comme nouvelle valeur de la fonction.

L'exemple suivant illustre la méthode attr() avec une fonction de rappel :

Exemple

$("button").click(function(){ $("#example").attr("href", function(i,origValue){ return origValue + "/jquery"; }); });

Essayez-le vous-même »
Autres extensions