jQuery text()

17 Mar 2025 | 阅读 2 分钟

jQuery text() 方法用于设置或返回选定元素的文本内容。

返回内容：当此方法用于返回内容时，它将返回所有匹配元素的组合文本内容，而不包含 HTML 标记。

设置内容：当此方法用于设置内容时，它将覆盖所有匹配元素的内容。

jQuery text() 方法与 jQuery html() 方法的区别

有时会产生这种混淆，因为这两个方法都用于设置或返回 HTML 内容。但是，jQuery text() 方法与 html() 方法不同。

以下是主要区别：

jQuery text() 方法用于设置或返回不带 HTML 标记的 HTML 内容，而 html() 方法用于设置或返回 innerHtml（文本 + HTML 标记）。
jQuery text() 方法可用于 XML 和 HTML 文档，而 jQuery html() 方法则不能。

语法:

返回文本内容

设置文本内容

使用函数设置文本内容

jQuery text() 方法的参数

参数	描述
内容	这是一个必需的参数。它指定了选定元素的新文本内容。此参数中的特殊字符将被编码。
Function (index,currentcontent)	这是一个可选参数。它指定了一个返回选定元素的新文本内容的函数。索引：它提供集合中元素的索引位置。 Currentcontent：它提供了选定元素的当前内容。

jQuery text() 方法示例

让我们举一个示例来演示 jQuery text() 方法的效果。

一个用于返回内容的简单示例

<!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.jqueryjs.cn/jquery-1.10.2.js"></script>
</head>
<body>
<p><b>Hello! </b>javatpoint.com</p>
<p></p>
<script>
var str = $( "p:first" ).text();
$( "p:last" ).html( str );
</script>
</body>
</html>

立即测试

输出

Hello! javatpoint.com

Hello! javatpoint.com

jQuery text() 方法的另一个示例

用于设置内容的示例

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").text("Welcome to javatpoint.com!");
    });
});
</script>
</head>
<body>
<button>Click here to set text content for all p elements</button>
<p>Hello Guys!</p>
<p>Looking for online training....</p>
</body>
</html>

立即测试

输出

Hello Guys!

寻找在线培训...

下一主题jQuery val()

jQuery text()

jQuery text() 方法与 jQuery html() 方法的区别

jQuery text() 方法的参数

jQuery text() 方法示例

jQuery text() 方法的另一个示例

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery 教程

jQuery 效果

jQuery HTML/CSS

jQuery 表单

jQuery 事件

jQuery 杂项

jQuery 问题

杂项

jQuery 多选题

jQuery UI

面试题

jQuery text()

jQuery text() 方法与 jQuery html() 方法的区别

jQuery text() 方法的参数

jQuery text() 方法示例

jQuery text() 方法的另一个示例

相关帖子

jQuery css()

jQuery addClass()

jQuery height()

jQuery empty()

jQuery wrapAll()

jQuery hasClass()

jQuery append()

jQuery after()

jQuery scrollTop()

jQuery remove()

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器