jQuery - setting content and properties
Set content - text(), html() and val()
Use the same three methods from the previous chapter to set content:
text() - set or Returns the text content of the selected element
html() - Sets or returns the content of the selected element (including HTML tags)
val() - Sets or returns the value of a form field
<!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>Callback functions of text(), html() and val()
The above three jQuery methods: text(), html() and val() also have callback functions.
The callback function takes two parameters:
The subscript of the current element in the selected element list, and the original (old) value.
Then return the string you wish to use as the new value of the function.
<!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()Set attributes
attr() method allows You set multiple properties at the same time.
<!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://miracleart.cn/jquery",
"title" : "jQuery 教程"
});
});
});
</script>
</head>
<body>
<p><a href="http://miracleart.cn" id="php">php中文網</a></p>
<button>修改 href 和 title</button>
<p>點擊按鈕修改后，可以查看 href 和 title 是否變化。</p>
</body>
</html>attr() callback function
The callback function takes two parameters:
The subscript of the current element in the selected element list, and the original (old) value .
Then return the string you wish to use as the new value of the function.
<!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="http://miracleart.cn" id="php">php中文網</a></p>
<button>修改 href 值</button>
<p>點擊按鈕修改后，可以點擊鏈接查看 href 屬性是否變化。</p>
</body>
</html>
