前端——搞懂jQuery中的text()、val()和html()

前言

今天在学表单验证的时候突然被jQuery中的text()和html()搞混了，于是为了彻底记住就写篇博客来加深印象吧！

text()、val()和html()

为了便于理解，通过代码来说明。
在html文件中定义一个div盒子，在盒子里放上span和input元素。

<div>
	div里面的文字
	<span>span里面的文字</span>
	<input type="text" name="" value="input的value值">
	<input type="text" name="" value="input的value值2">
</div>

然后通过alert()来观察text()、val()和html()三个函数作用后的弹出结果，如下。

alert($('div').text());
alert($('div').html());
alert($('input').val());

直接看结果就明白了，结果如下。
alert($(‘div’).text())弹出的结果：

alert($(‘div’).html())弹出的结果:

alert($(‘input’).val())弹出的结果：

通过上面三个弹出结果我们可以知道：

1. text()提取的是目标元素中的纯文本信息，不会提取元素标签，更不会提取属性中的值，如value()中的值，同时还会去掉空格和换行；
2. html()则提取范围更大，只要是目标元素中含有的，不管是标签、文本、属性值、甚至属性名，在它看来都是要提取的目标，同时会保留空格和换行；
3. val()功能则更为专一，它只提取目标元素中value属性中的值，并且只提取相同目标元素中第一个出现的目标元素的value属性中的值。

结语

积少成多，多多益善，善有善报，报上名来，来日再分享！