jQuery-text()方法总结——获取/设置文本

素颜马尾好姑娘i 2021-06-22 15:35 605阅读 0赞

**总结一下jQuery中获取和设置文本的特性。**

首先在页面上放置两个div，两个按钮。内容如下：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>设置/获取文本内容</title>
    	</head>
    	<body>
    		<input type="button" value="获取" id="getBtn" />
    		<input type="button" value="设置" id="setBtn" />
    
    		<div id="div1"> 我是一个div标签 <p> 我是一个p标签 <span>span1</span> </p> </div>
    		<div> 我是一个div2标签 <p> 我是一个p2标签 <span>span2</span> </p> </div>
    	</body>
    </html>

#### 获取文本 ####

##### 1. 获取指定id的div标签的text #####

$('#getBtn').click(function() { 
    	// 获取id为div1标签的文本
    	console.log($('#div1').text());
    });

这样会获取到这个标签中的所有文本，包括后代元素的文本：  
![在这里插入图片描述][20191115103637942.png]

##### 2. 获取所有div标签的text #####

$('#getBtn').click(function() { 
    	//获取所有div标签的文本
    	console.log($('div').text());
    });

这样会获取到包括了多个dom对象的jQuery对象，通过text()方法会把所有的dom元素的文本获取到。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ1NjUxMjc_size_16_color_FFFFFF_t_70]

#### 设置文本 ####

text()方法加上参数，就是给对象设置文本。

##### 1. 给指定id的div设置文本 #####

$('#setBtn').click(function() { 
    	$('#div1').text("我喜欢唱跳rap篮球！");
    });

这样会覆盖掉原来标签内所有的内容：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ1NjUxMjc_size_16_color_FFFFFF_t_70 1]  
如果设置的文本内包含标签，例如：

$('#div1').text('我喜欢唱跳rap篮球!<a>这是一个超链接！</a>');

这样设置的内容中包含标签，是不会解析出来的，会以文本的形式呈现出来：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ1NjUxMjc_size_16_color_FFFFFF_t_70 2]

##### 2. 给所有标签设置文本 #####

$('#setBtn').click(function() { 
    	$('div').text('我喜欢唱跳rap篮球!');
    });

包含了多个dom元素的jQuery对象，通过text()方法设置文本，会把所有的dom对象都给设置上文本。（隐式遍历）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ1NjUxMjc_size_16_color_FFFFFF_t_70 3]

--------------------

END.

如果你不沉下心来认真练习，所有的阅读都是白费的。

[20191115103637942.png]: /images/20210615/4ff3578834aa4cebae3132ec634e4781.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ1NjUxMjc_size_16_color_FFFFFF_t_70]: /images/20210615/9f4f8fc043d245ba9aa9622789fd4a7d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ1NjUxMjc_size_16_color_FFFFFF_t_70 1]: /images/20210615/78e062d971cc48178af4c54ff9f1afe5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ1NjUxMjc_size_16_color_FFFFFF_t_70 2]: /images/20210615/fc7a2937bbcc4916ae1fa409f5e26f41.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ1NjUxMjc_size_16_color_FFFFFF_t_70 3]: /images/20210615/238ebe1518594977914883d6d64960b8.png