jQuery - Setting content and attributes
Setting content - text(), html() and val()
We will use the same three methods from the previous chapter to set content:
text() - Sets or returns the text of the selected element Content
html() - Sets or returns the content of the selected element (including HTML tags)
val() - Sets or returns the form Field value
The following example demonstrates how to set content through text(), html() and val() methods:
<!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>Run the program to try it
Callback functions of text(), html() and val()
The three jQuery methods above: text(), html() and val() also have callback functions. The callback function takes two parameters: the index of the current element in the selected element list, and the original (old) value. Then return the string you wish to use as the function's new value.
The following example demonstrates text() and html() with callback functions:
<!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>Run the program to try it
Settings Attributes - attr()
jQuery attr() method is also used to set/change attribute values.
The following example demonstrates how to change (set) the value of the href attribute in the link:
Example
<!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="//m.sbmmt.com" id="php">php中文网</a></p>
<button>修改 href 值</button>
<p>点击按钮修改后，可以点击链接查看链接地址是否变化。</p>
</body>
</html>Run the program Try it
attr() method also allows you to set multiple attributes at the same time.
The following example demonstrates how to set the href and title attributes 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://www.baidu.com",
"title" : "baidu"
});
});
});
</script>
</head>
<body>
<p><a href="//m.sbmmt.com" id="php">php中文网</a></p>
<button>修改 href 和 title</button>
<p>点击按钮修改后，可以查看 href 和 title 是否变化。</p>
</body>
</html>Run the program to try it
The callback function of attr()
jQuery method attr() also provides a callback function. The callback function takes two parameters: the index of the current element in the selected element list, and the original (old) value. Then return the string you wish to use as the function's new value.
The following example demonstrates the attr() method with a callback 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 + "/course.html";
});
});
});
</script>
</head>
<body>
<p><a href="//m.sbmmt.com" id="php">php中文网</a></p>
<button>修改 href 值</button>
<p>点击按钮修改后，可以点击链接查看 href 属性是否变化。</p>
</body>
</html>Run the program to try it
