.text()

Contents:

.text() 返回: String

描述: 得到匹配元素集合中每个元素的文本内容结合,包括他们的后代。

  • version added: 1.0.text()

.html() 方法不同, .text() 在XML 和 HTML 文档中都能使用。 .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 元素上。 输入的文本需要使用 .val() 方法。

在 jQuery 1.4中, .text() 方法返回值是文本和 CDATA 节点,以及元素节点。

举例:

在一个段落中查找文本(去除了HTML),然后设置最后一个段落的HTML为刚才的那段文本(红色粗体消失)。

<!DOCTYPE html>
<html>
<head>
  <style>
  p { color:blue; margin:8px; }
  b { color:red; }
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.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>

Demo:

.text( textString ) 返回: jQuery

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

  • version added: 1.0.text( textString )

    textString用于设置匹配元素内容的文本

  • version added: 1.4.text( function(index, text) )

    function(index, text)用来返回设置文本内容的一个函数。接收元素的索引位置和元素旧的文本值作为参数。

.html() 方法不同, .text() 在XML 和 HTML 文档中都能使用。

我们必须意识到这种方法提供了必要的字符串从提供的正确的HTML中脱离出来。这样做, 他调用DOM 方法 .createTextNode(), 一种替代的特殊字符与HTML对应(比如< 替换为 &lt; )方法。考虑下面的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() 方法不能使用在 input 元素上。 输入的文本需要使用 .val() 方法。

在 jQuery 1.4中, .text()方法允许我们通过函数来传递文本内容。

$('ul li').text(function(index) {
  return 'item number ' + (index + 1);
});

给定一个拥有3个<li>元素,在这个例子中将输出下面的DOM:

<ul>
  <li>item number 1</li>
  <li>item number 2</li>
  <li>item number 3</li>
</ul>

举例:

在段落中添加文本。注意这个<b>标签将从HTML中脱离出来。

<!DOCTYPE html>
<html>
<head>
  <style>

  p { color:blue; margin:8px; }
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
	<p>Test Paragraph.</p>
<script>$("p").text("<b>Some</b> new text.");</script>
</body>
</html>

Demo:

jQuery 1.6 API 中文版Clove整理、修订