jQuery - définition du contenu et des propriétés
Définir le contenu - text(), html() et val()
Utilisez les trois mêmes méthodes du chapitre précédent pour définir le contenu :
text() - Définit ou renvoie 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éfinit ou renvoie la valeur du champ du formulaire
<!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>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("php");
});
});
</script>
</head>
<body>
<p id="test1">段落1</p>
<p id="test2">段落2</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>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'indice de l'élément actuel dans la liste des éléments sélectionnés et la valeur d'origine (ancienne).
Ensuite, la fonction renvoie la chaîne que vous souhaitez utiliser comme nouvelle valeur.
<!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>attr()Définir les attributs
la méthode attr() permet Vous définissez plusieurs propriétés en même temps. La fonction de rappel de
<!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" : "//m.sbmmt.com/jquery",
"title" : "jQuery 教程"
});
});
});
</script>
</head>
<body>
<p><a href="//m.sbmmt.com" id="php">php中文网</a></p>
<button>修改 href 和 title</button>
<p>点击按钮修改后，可以查看 href 和 title 是否变化。</p>
</body>
</html>attr()
la fonction de rappel prend deux paramètres :
L'indice de l'élément actuel dans la liste des éléments sélectionnés et l'original (ancien) valeur .
Ensuite, la fonction renvoie la chaîne que vous souhaitez utiliser comme nouvelle valeur.
<!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 + "/jquery";
});
});
});
</script>
</head>
<body>
<p><a href="//m.sbmmt.com" id="php">php中文网</a></p>
<button>修改 href 值</button>
<p>点击按钮修改后，可以点击链接查看 href 属性是否变化。</p>
</body>
</html>
![Projet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Cours frontal base zéro [Vue apprentissage avancé et application pratique]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutoriel WEB front-end [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Application pratique Apipost [api, interface, tests automatisés, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
