當前位置: 首頁>>代碼示例 >>用法及示例精選 >>正文

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()。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。