jQuery - Définir le contenu et les attributs
Définir le contenu - text(), html() et val()
Nous utiliserons les trois mêmes méthodes du chapitre précédent pour définir le contenu :
text() - Définit ou renvoie le texte de l'élément sélectionné Contenu
html() - Définit ou renvoie le contenu de l'élément sélectionné (y compris les balises HTML)
val() - Définit ou renvoie le formulaire Valeur du champ
L'exemple suivant montre comment définir le contenu via les méthodes text(), html() et val() :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#test1").text("你好!");
});
$("#btn2").click(function(){
$("#test2").html("<b>你好!</b>");
});
$("#btn3").click(function(){
$("#test3").val("php.cn");
});
});
</script>
</head>
<body>
<p id="test1">这是一个段落。</p>
<p id="test2">这是另外一个段落。</p>
<p>输入框: <input type="text" id="test3" value="php中文网"></p>
<button id="btn1">设置文本</button>
<button id="btn2">设置 HTML</button>
<button id="btn3">设置值</button>
</body>
</html>Exécutez le programme pour essayer it out
Fonctions de rappel de 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 prend 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). Renvoyez ensuite 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 :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#test1").text(function(i,origText){
return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")";
});
});
$("#btn2").click(function(){
$("#test2").html(function(i,origText){
return "旧 html: " + origText + " 新 html: Hello <b>world!</b> (index: " + i + ")";
});
});
});
</script>
</head>
<body>
<p id="test1">这是一个有 <b>粗体</b> 字的段落。</p>
<p id="test2">这是另外一个有 <b>粗体</b> 字的段落。</p>
<button id="btn1">显示 新/旧 文本</button>
<button id="btn2">显示 新/旧 HTML</button>
</body>
</html>Exécutez le programme pour l'essayer
Paramètres Attributs - attr()
La méthode jQuery attr() 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#php").attr("href","http://www.baidu.com/");
});
});
</script>
</head>
<body>
<p><a href="http://www.php.cn" id="php">php中文网</a></p>
<button>修改 href 值</button>
<p>点击按钮修改后，可以点击链接查看链接地址是否变化。</p>
</body>
</html>Exécutez le programme Essayez-le
La méthode attr() 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 :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#php").attr({
"href" : "http://www.baidu.com",
"title" : "baidu"
});
});
});
</script>
</head>
<body>
<p><a href="http://www.php.cn" id="php">php中文网</a></p>
<button>修改 href 和 title</button>
<p>点击按钮修改后，可以查看 href 和 title 是否变化。</p>
</body>
</html>Exécutez le programme pour l'essayer
La fonction de rappel de attr()
La méthode jQuery attr() fournit également une fonction de rappel. La fonction de rappel prend 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). Renvoyez ensuite la chaîne que vous souhaitez utiliser comme nouvelle valeur de la fonction.
L'exemple suivant montre la méthode attr() avec une fonction de rappel :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#php").attr("href", function(i, origValue){
return origValue + "/course.html";
});
});
});
</script>
</head>
<body>
<p><a href="http://www.php.cn" id="php">php中文网</a></p>
<button>修改 href 值</button>
<p>点击按钮修改后，可以点击链接查看 href 属性是否变化。</p>
</body>
</html>Exécutez le programme pour l'essayer
section suivante