.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>
演示结果