总结一下jQuery中获取和设置文本的特性。
首先在页面上放置两个div，两个按钮。内容如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>设置/获取文本内容</title>
</head>
<body>
<input type="button" value="获取" id="getBtn" />
<input type="button" value="设置" id="setBtn" />
<div id="div1"> 我是一个div标签 <p> 我是一个p标签 <span>span1</span> </p> </div>
<div> 我是一个div2标签 <p> 我是一个p2标签 <span>span2</span> </p> </div>
</body>
</html>
获取文本
1. 获取指定id的div标签的text
$('#getBtn').click(function() {
// 获取id为div1标签的文本
console.log($('#div1').text());
});
这样会获取到这个标签中的所有文本，包括后代元素的文本：
2. 获取所有div标签的text
$('#getBtn').click(function() {
//获取所有div标签的文本
console.log($('div').text());
});
这样会获取到包括了多个dom对象的jQuery对象，通过text()方法会把所有的dom元素的文本获取到。
设置文本
text()方法加上参数，就是给对象设置文本。
1. 给指定id的div设置文本
$('#setBtn').click(function() {
$('#div1').text("我喜欢唱跳rap篮球！");
});
这样会覆盖掉原来标签内所有的内容：
如果设置的文本内包含标签，例如：
$('#div1').text('我喜欢唱跳rap篮球!<a>这是一个超链接！</a>');
这样设置的内容中包含标签，是不会解析出来的，会以文本的形式呈现出来：
2. 给所有标签设置文本
$('#setBtn').click(function() {
$('div').text('我喜欢唱跳rap篮球!');
});
包含了多个dom元素的jQuery对象，通过text()方法设置文本，会把所有的dom对象都给设置上文本。（隐式遍历）
END.
如果你不沉下心来认真练习，所有的阅读都是白费的。
扫一扫
815
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
