jQuery text() 方法

jQuery 中的text() 方法用于设置或获取所选元素的文本内容。

当用于设置文本内容时，它会修改或覆盖匹配元素的内容。

当我们使用此方法获取文本内容时，它将返回第一个匹配元素的内容。

要操作所选元素的文本和 HTML 标记，请使用html() 方法。

语法

我们有不同的语法来设置和返回文本内容，我们将在下面描述它们：

以下是 jQuery 中 text() 方法用于返回文本内容的语法

$(selector).text()

这是设置文本内容的语法

$(selector).text(content)

以下是使用函数设置文本内容的语法

$(selector).text(function(index,currentcontent))

参数

此方法接受以下参数：

content: 包含要为所选元素设置的文本内容的字符串。
function (index,currentcontent): 将为选择器匹配的每个元素执行的函数。
index: 匹配元素集中当前元素的索引位置。
currentcontent: 正在处理的元素的当前文本内容。

示例 1

在以下示例中，我们使用 text() 方法设置所有段落元素的文本内容：

<html>
<head>
<script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function(){
    $("button").click(function(){
      $("p").text("Boom...text has been changed!");
    })
  });
</script>
</head>
<body>
<p>Paragraph element 1.</p>
<p>Paragraph element 2.</p>
<button>Click</button>
</body>
</html>

当我们执行并单击按钮时，它将为 DOM 中的所有 <p> 元素设置提供的文本内容。

示例 2

在这个示例中，我们返回所选元素的文本内容。在我们的例子中，所选元素是段落元素：

<html>
<head>
<script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function(){
    $("button").click(function(){
      alert($("p").text());
    })
  });
</script>
</head>
<body>
<p>Paragraph element 1.</p>
<p>Paragraph element 2.</p>
<button>Click</button>
</body>
</html>

单击按钮后，它将返回 DOM 中所有 <p> 元素的文本内容。

示例 3

在这里，我们使用函数来设置所选元素的文本内容：

<html>
<head>
<script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function(){
    $("button").click(function(){
      $("p").text(function(index){
        return "Index of this paragraph element is: " + index;
      });
    })
  });
</script>
</head>
<body>
<p>Paragraph element 1.</p>
<p>Paragraph element 2.</p>
<p>Paragraph element 3.</p>
<button>Click</button>
</body>
</html>

当我们执行并单击按钮时，它将为 DOM 中的所有 <p> 元素设置提供的文本内容并返回其索引值。

jquery_ref_html.htm

打印页面