.text()
.text()
描述:获得匹配的元素集合中每个元素的文本内容的串联结果,包括它们的后代元素中的文本。
该方法不接受任何参数
不同于.html()方法,.text()可以用在XML document和HTML document中。.text()方法的结果是一个字符串,包含了所有匹配元素的文本文件的组合。(由于在不同的浏览器中的HTML解析器各不相同,返回的文本中换行和其他空白可能会有所不同。)设想以下的HTML:
<div class="demo-container">
<div class="demo-box">Demonstration Box</div>
<ul>
<li>list item 1</li>
<li>list <strong>item</strong> 2</li>
</ul>
</div>
代码$( "div.demo-container" ).text()将产生以下结果:
.text()方法不能用在表单唋框或脚本上。要想设置或读取<input>或<textarea>元素的文本值,请使用.val()方法。要想获得<script>元素的值,请使用.html()方法。
自从jQuery 1.4,.text()方法返回<textarea>的文本内容,以及CDATA节点的文本内容,类同于别的元素节点。
示例
找到第一个段落文本中的文本(剥离掉HTML),然后把最后的段落文本的HTML设置为显示这条文本(去掉了红色加粗)。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>text demo</title>
<style>
p {
color: blue;
margin: 8px;
}
b {
color: red;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p><b>Test</b> Paragraph.</p>
<p></p>
<script>
var str = $( "p:first" ).text();
$( "p:last" ).html( str );
</script>
</body>
</html>
演示结果
.text()
描述:把匹配的元素集合中每个元素的内容设置为指定的文本。
不同于.html()方法,.text()可以用在XML document和HTML document中。
我们需要记住,这个方法会必要地转义所提供的字符串,从而它可以在HTML中正确地呈现。要想做到这,它会调用DOM方法.createTextNode(),不会把字符串翻译成HTML。设想以下HTML:
<div class="demo-container">
<div class="demo-box">Demonstration Box</div>
<ul>
<li>list item 1</li>
<li>list <strong>item</strong> 2</li>
</ul>
</div>
代码$( "div.demo-container" ).text( "<p>This is a test.</p>" );将产生下面的DOM输出:
<div class="demo-container"> <p>This is a test.</p> </div>
它将应用到一个已呈现的网页上,而且标记是曝露的。
<p>This is a test</p>
.text()方法不能用在输入元素上。对于输入字段文本,请使用.val()方法。
自从jQuery 1.4,.text()方法允许我们通过传入一个函数来设置文本内容。
$( "ul li" ).text(function( index ) {
return "item number " + ( index + 1 );
});
给定一个带有三个<li>元素的无序列表,本示例将制作出以下的DOM输出:
<ul> <li>item number 1</li> <li>item number 2</li> <li>item number 3</li> </ul>
示例
向段落文本添加文本内容(注意粗体标记被转义了)。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>text demo</title>
<style>
p {
color: blue;
margin: 8px;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>Test Paragraph.</p>
<script>
$( "p" ).text( "<b>Some</b> new text." );
</script>
</body>
</html>
演示结果