jQuery-Paramètres
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() - Set or Returns le contenu textuel de l'élément sélectionné
html() - Définit ou renvoie le contenu de l'élément sélectionné (y compris les balises HTML)
val ( ) - Définir ou renvoyer la valeur d'un champ de formulaire
L'exemple suivant montre comment définir le contenu via les méthodes text(), html() et val() :
Instance
<!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("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("RUNOOB");
});
});
</script>
</head>
<body>
<p id="test1">这是一个段落。</p>
<p id="test2">这是另外一个段落。</p>
<p>输入框: <input type="text" id="test3" value="菜鸟教程"></p>
<button id="btn1">设置文本</button>
<button id="btn2">设置 HTML</button>
<button id="btn3">设置值</button>
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
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 :
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(){
$("#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écuter l'instance»
Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne
Définir les 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(){
$("#runoob").attr("href","http://www.php.cn/jquery");
});
});
</script>
</head>
<body>
<p><a href="http://www.runoob.com" id="runoob">php中文网</a></p>
<button>修改 href 值</button>
<p>点击按钮修改后，可以点击链接查看链接地址是否变化。</p>
</body>
</html>Exécuter l'exemple »
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Méthode attr() Vous permet également de définir plusieurs propriétés en même temps.
L'exemple suivant montre comment définir les attributs href et title :
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(){
$("#runoob").attr({
"href" : "http://www.runoob.com/jquery",
"title" : "jQuery 教程"
});
});
});
</script>
</head>
<body>
<p><a href="http://www.php.cn" id="runoob">php中文网</a></p>
<button>修改 href 和 title</button>
<p>点击按钮修改后，可以查看 href 和 title 是否变化。</p>
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
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 illustre la méthode attr() avec une fonction de rappel :
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#runoob").attr("href", function(i, origValue){
return origValue + "/jquery";
});
});
});
</script>
</head>
<body>
<p><a href="http://www.php.cn" id="runoob">php中文网</a></p>
<button>修改 href 值</button>
<p>点击按钮修改后，可以点击链接查看 href 属性是否变化。</p>
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
