当前位置: 首页>>编程示例 >>用法及示例精选 >>正文

JQuery .text()用法及代码示例

获取匹配元素集中每个元素的组合文本内容，包括它们的后代，或设置匹配元素的文本内容。

用法一

.text() => String

说明：获取匹配元素集中每个元素的组合文本内容，包括它们的后代。

  • 添加的版本：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 或textarea 元素的文本值，请使用 .val() 方法。要获取脚本元素的值，请使用 .html() 方法。

从 jQuery 1.4 开始，.text() 方法返回文本和 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-3.5.0.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( text ) => jQuery

说明：将匹配元素集合中的每个元素的内容设置为指定的文本。

  • 添加的版本：1.0.text( text )

    • text
      类型：String 或 Number 或 Boolean
      要设置为每个匹配元素的内容的文本。当提供 Number 或 Boolean 时，它将被转换为 String 表示形式。

  • 添加的版本：1.4.text( function )

    • function
      类型：Function(Integer 索引，String 文本)=> String
      返回要设置的文本内容的函数。接收集合中元素的索引位置和旧文本值作为参数。

与.html() 方法不同，.text() 可用于 XML 和 HTML 文档。

我们需要注意，此方法会根据需要对提供的字符串进行转义，以便在 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-3.5.0.js"></script>
</head>
<body>
 
<p>Test Paragraph.</p>
 
<script>
$( "p" ).text( "<b>Some</b> new text." );
</script>
 
</body>
</html>

演示：

相关用法


注：本文由纯净天空筛选整理自jquery.com大神的英文原创作品 .text()。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。