jQuery之.text()与.text(textString)与.text(function(index,text))函数详解+练习
李联
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script>
</head>
<style>
p { color:blue; margin:8px; }
b { color:red; }
span{color:navy}
</style>
<body>
<div class="demo-container">
<div class="demo-box">Demonstration Box</div>
<ul>
<li>list item 1</li>
<li>list <strong>item</strong> 2</li>
</ul>
</div>
<hr />
<p><b>Test</b> Paragraph.</p>
<p></p>
<hr />
<span id="jkm"></span><br/>
<span id="sky"></span><br/>
<span id="water"></span><br/>
<hr />
<div class="demo-container">
<div class="demo-box">Demonstration Box</div>
<ul class="fish">
<li>原来的值01</li>
<li>原值02</strong> 2</li>
</ul>
</div>
<hr />
<script type="text/javascript">
/**
* 1. text()方法 返回String
* 该方法不接受任何参数
* 描述：得到匹配元素中每个元素的合并文本，包括他们的后代
*
* 和.html()方法不同，.text()在XML和HTML文档中都能使用。.text()方法返回一个字符串，
* 包含所有匹配元素的合并文本，（由于在不同浏览器中的HTML解析器的变化，返回的文本中
* 换行和其他空白可能会有所不同），
* */
//注意：.text()方法不能使用在input和scripts元素上，input或textarea需要使用.val()方法
//获取或设置文本值，得到scripts元素的值，使用.html()方法
//从jQuery1.4开始，.text()方法返回文本内容和作为元素节点的CDATA节点
var test01 = $(".demo-container").text();
document.write(test01+"<br />");//Demonstration Box list item 1 list item 2
$("span#jkm").html("<strong>hello</strong>"+ " world");//hello world
$("span#sky").text("<strong>i</strong> will be back");//<strong>i</strong> will be back
/**
* 2. .text(textString) 返回jQuery
* 描述：设置匹配元素集合中每个元素的文本内容为指定的文本内容
* 类型 ：String Number 或 Boolean
* 当提供的是一个数值或布尔值的时候，那么将会被转换成一个字符串表现形式
* 然后提供给这个方法
*
* */
$("span#water").text(true);//true
/**
* .text(function(index,textString))
* function(index,textString)
* 类型：Function()
* 用来返回设置文本内容的一个函数，接受元素的索引位置和文本值作为参数
* */
//从jQuery1.4开始，.text()方法允许我们通过函数来传递文本内容
//显示内容：index number : 1 - 原来的值01
// index number : 2 - 原值02 2
$("ul.fish li").text(function(index,textStr){
return "index number : " + (index + 1) +" - " + textStr;//逐个替换了原来的内容
});
</script>
</body>
</html>
类似资料：