jQuery之.text()与.text(textString)与.text(function(index,text))函数详解+练习

叁歲伎倆 2022-05-29 05:14 132阅读 0赞

<!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>