本文概述
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元素的文本内容
大家好!
寻找在线培训。
评论前必须登录!
注册