Set contenu - text(), html() , et val()
Nous allons utiliser les trois mêmes méthodes de la page précédente pourdéfinir le contenu:
- text() - Définit ou retourne le contenu du texte des éléments sélectionnés
- html() - Définit ou retourne le contenu des éléments sélectionnés (y compris le balisage HTML)
- val() - Définit ou retourne la valeur des champs de formulaire
L'exemple suivant montre comment définir le contenu avec le jQuery text(), html() , et val() méthodes:
Exemple
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");
});
Essayez - le vous - même » Une fonction de rappel pour le text(), html() , et val()
Tous les trois méthodes jQuery ci - dessus: text(), html() , et val() , viennent également 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 (vieille) valeur d'origine. Vous retournez ensuite la chaîne que vous souhaitez utiliser comme nouvelle valeur de la fonction.
L'exemple suivant illustre le 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 + ")";
});
});
Essayez - le vous - même » Set Attributs - attr()
Le jQuery attr() méthode est également utilisée pour définir / modifier les valeurs des attributs.
L'exemple suivant montre comment modifier (set) la valeur de l' href attribut dans un lien:
Exemple
$("button").click(function(){
$("#w3s").attr("href", "http://www.w3ii.com/jquery");
});
Essayez - le vous - même » Le attr() méthode permet également de définir plusieurs attributs dans le même temps.
L'exemple suivant montre comment définir à la fois le href et attributs de titre dans le même temps:
Exemple
$("button").click(function(){
$("#w3s").attr({
"href" : "http://www.w3ii.com/jquery",
"title" : "w3ii jQuery Tutorial"
});
});
Essayez - le vous - même » Une fonction de rappel pour attr()
La méthode jQuery attr() , viennent également 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 l'original (old) la valeur d'attribut. Vous retournez ensuite la chaîne que vous souhaitez utiliser comme nouvelle valeur d'attribut de la fonction.
L'exemple suivant montre attr() avec une fonction de rappel:
Exemple
$("button").click(function(){
$("#w3s").attr("href", function(i, origValue){
return origValue + "/jquery";
});
});
Essayez - le vous - même » Testez-vous avec des exercices!
Exercice 1 » Exercice 2» Exercice 3 » Exercice 4» Exercice 5 »
jQuery HTML référence
Pour un aperçu complet de toutes les méthodes jQuery HTML, s'il vous plaît visitez notre jQuery HTML / CSS Référence .