个性化阅读
专注于IT技术分析

jQuery text()

本文概述

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

返回内容:使用此方法返回内容时, 它将返回所有匹配元素的组合文本内容, 而没有HTML标记。

设置内容:使用此方法设置内容时, 它将覆盖所有匹配元素的内容。

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

有时, 由于这两种方法都用于设置或返回html内容, 所以会造成这种混乱。但是, jQuery text()方法不同于html()方法。

以下是主要区别:

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

句法:

要返回文本内容:

$(selector).text()

设置文本内容:

$(selector).text(content)

要使用功能设置文本内容:

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

jQuery text()方法的参数

参数 描述
Content 它是必填参数。它为所选元素指定新的文本内容。特殊字符将在此参数中编码。
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.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p><b>Hello! </b>srcmini02.com</p>
<p></p>
<script>
var str = $( "p:first" ).text();
$( "p:last" ).html( str );
</script>
</body>
</html>

立即测试

输出:

你好! srcmini02.com

你好! srcmini02.com

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 srcmini02.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>

立即测试

输出:

单击此处设置所有p元素的文本内容

大家好!

寻找在线培训。

赞(0)
未经允许不得转载:srcmini » jQuery text()

评论 抢沙发

评论前必须登录!