jQuery text()方法

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

返回内容： 当使用该方法返回内容时，它返回所有匹配元素的组合文本内容，不包括HTML标记。

设置内容： 当使用该方法设置内容时，它会覆盖所有匹配元素的内容。

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

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

以下是主要的区别：

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

语法：

返回文本内容：

$(selector).text()

设置文本内容：

$(selector).text(content)

使用函数设置文本内容：

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

jQuery text()方法的参数

参数	描述
content	这是一个必需的参数。它指定所选元素的新文本内容。特殊字符将在此参数中进行编码。
function(index,currentcontent)	这是一个可选的参数。它指定返回所选元素的新文本内容的函数。

index： 提供元素在集合中的索引位置。
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.jquery.com/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>

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

用于设置内容的示例：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/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>点击这里以为所有p元素设置文本内容</button>
<p>Hello Guys!</p>
<p>Looking for online training....</p>
</body>
</html>