JQuery text()
JQuery text()方法用于设置或返回所选元素的文本内容。
要返回内容: 使用此方法返回内容时，它将返回所有匹配元素的组合文本内容，而不包含HTML标记。
设置内容: 此方法用于设置内容，它将覆盖所有匹配元素的内容。
JQuery text()方法和JQuery html()方法之间的区别
有时，因为两个方法都用于设置或返回html内容，所以发生了这种混乱。但是，JQuery text()方法不同于html()方法。
以下是主要区别:
JQuery text()方法用于设置或返回没有HTML标记的html内容，而html()方法用于设置或返回innerHtml(文本+ HTML标记).
在XML和HTML文档中都可以使用JQuery text()方法，而在JQuery html()方法中则不能。
语法:
返回文本内容:
设置文本内容:
$(selector).text(content)
使用功能设置文本内容:
$(selector).text(function(index,currentcontent))
JQuery text()方法的参数
| 参数 |
说明 |
| Content |
这是强制性参数。它为所选元素指定新的文本内容。特殊字符将在此参数中编码。 |
| Function (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="/JQuery-1.10.2.js"></script>
</head>
<body>
<p><b>Hello! </b>lidihuo.com</p>
<p></p>
<script>
var str = $("p:first").text();
$("p:last").html( str );
</script>
</body>
</html>
输出:
Hello! lidihuo.com
Hello! lidihuo.com
JQuery text()方法的另一个示例
设置内容的示例:
<!DOCTYPE html>
<html>
<head>
<script src="/ajax/libs/JQuery/1.11.3/JQuery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").text("Welcome to lidihuo.com!");
});
});
</script>
</head>
<body>
<button>点击此处为所有p元素设置文本内容</button>
<p>大家好!</p>
<p>查找用于在线培训....</p>
</body>
</html>
输出:
大家好!
查找在线培训....
