text方法返回或者设置匹配元素的文本内容。
特别说明:
HTML内容就是内容中可以包含HTML标签，并且能够被浏览器渲染。
文本内容是先将内容中的HTML预定义字符转换成html字符实体，这样HTML标签就不会被渲染。
text()方的使用:
用法一:
此方法不带参数时候，功能是取得所有匹配元素的文本内容，并且结果是由所有匹配元素包含的文本内容组合起来的文本。
此方法与html()方法没有参数用法类似，但是还是有很大区别：
1.html()方法取得第一个匹配元素的内容，而text()方法是取得所有匹配元素包含的内容。
2.html()方法取得内容html内容，而text()方法取得是文本内容。
实例代码如下:
关于第一条：
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>text()函数-脚本之家</title>
<style type="text/css">
div{
height:150px;
width:150px;
background-color:green;
margin-top:10px;
}
</style>
<script type="text/javascript" src="f:/测试/js/jquery3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
alert($("div").html());
})
})
</script>
</head>
<body>
<div>
<ul>
<li>第一个div</li>
</ul>
</div><div>
<ul>
<li>第二个div</li>
</ul>
</div><div>
<ul>
<li>第三个div</li>
</ul>
</div>
<button>点击查看效果</button>
</body>
</html>此时输出结果为：
当把html（）替换为text（）时结果为：
下面测试第二条：
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>text()函数-脚本之家</title>
<style type="text/css">
div{
height:150px;
width:150px;
background-color:green;
margin-top:10px;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
alert($("div").text());
})
})
</script>
</head>
<body>
<div>
<ul>
<li>html专区</li>
<li>DIV+CSS专区</li>
<li>jquery专区</li>
</ul>
</div>
<button>点击查看效果</button>
</body>
</html>
以上代码可以弹出取得div中的所有文本内容。
html专区
DIV+CSS专区
jquery专区
如果换成html（）
结果为：
<ul>
<li>html专区</li>
<li>DIV+CSS专区</li>
<li>jquery专区</li>
</ul>用法二:
带有参数的时候是设置所有匹配元素的文本内容。
此方法与html()方法带有参数的用法类似，但是还是有很大的区别：
text()方法设置的是匹配元素的文本内容，且会将HTML中的预留字符（如大于号（>））转换成html字符实体，以便于正确显示，而html()方法是设置匹配元素的html内容。
实例代码:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>text()函数-脚本之家</title>
<style type="text/css">
div{
height:150px;
width:150px;
background-color:green;
margin-top:10px;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("div").text("<span>是个内联元素");
alert($("div").html())
})
})
</script>
</head>
<body>
<div>原来的内容</div>
<button>点击查看效果</button>
</body>
</html>
结果：
实例代码三:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>text()函数-脚本之家</title>
<style type="text/css">
div{
height:150px;
width:150px;
background-color:green;
margin-top:10px;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$(".html").html("<b>好好学习</b>");
$(".text").text("<b>好好学习</b>");
})
})
</script>
</head>
<body>
<div class="html"></div>
<div class="text"></div>
<button>点击查看效果</button>
</body>
</html>
- .html()用为读取和修改元素的HTML标签
- .text()用来读取或修改元素的纯文本内容
- .val()用来读取或修改表单元素的value值。
这三个方法功能上的对比
- .html(),.text(),.val()三种方法都是用来读取选定元素的内容；只不过.html()是用来读取元素的HTML内容（包括其Html标签），.text()用来读取元素的纯文本内容，包括其后代元素，.val()是用来读取表单元素的"value"值。其中.和.text()方法不能使用在表单元素上,而.val()只能使用在表单元素上；另外.html()方法使用在多个元素上时，只读取第一个元素；.val()方法和.html()相同，如果其应用在多个元素上时，只能读取第一个表单元素的"value"值，但是.text()和他们不一样，如果.text()应用在多个元素上时，将会读取所有选中元素的文本内容。
