.text()| jqueryAPI 2.2 中文手册- AspRain.cn 致力于Web开发技术翻译整理

jQuery API 2.2.0

.text()

分类:操纵 > DOM内部插入

返回: String

.text()

描述:获得匹配的元素集合中每个元素的文本内容的串联结果,包括它们的后代元素中的文本。

加入于: 1.0
.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()将产生以下结果:

Demonstration Box list item 1 list item 2

.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>

演示结果

返回: jQuery

.text()

描述:把匹配的元素集合中每个元素的内容设置为指定的文本。

加入于: 1.0
.text( text )
  • text
    类型:String or Number or Boolean
    一段文本,它会被设置作为每个匹配的元素的内容。如果提供了数字或者布尔值,它会被转换成字符串表达式。
加入于: 1.4
.text( function )
  • function
    类型:FunctionInteger index, String text ) => String
    一个字符串,它返回要设置的文本内容。检索集合中元素的索引位置以及旧文本值作为参数。

不同于.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">
  &lt;p&gt;This is a test.&lt;/p&gt;
</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>

演示结果

如果网页上不能运行示例,请点击http://www.asprain.cn/jQueryAPI/text.htm查看示例。

如果你觉得本文档对你有用,欢迎给翻译作者支付宝打赏,支持翻译作者源源不断翻译更多有用的技术文档。