jQuery中text(),html()和val()区别

在开发中，text(),html()和val()都是常用的jQuery 方法。
本文比较了这三种方法的区别。

开始比较

Step1：text()。

方法解释：text()用来设置或返回被选元素的文本内容。代码如下：

console 打印的结果：

可以看出 text()只输出标签内的文本内容，和 js 的 innerText 方法一样。

Step2：html()。

方法解释：html()方法返回或设置被选元素的内容 (inner HTML)， 包括标签。

如果该方法未设置参数，则返回被选元素的当前内容。代码如下：

console 打印的结果：

打印当前标签内的文本内容，如果有子标签，则把子标签本身和子标签内的文本一起打印，这个和 js 的 innerHTML 差不多。

Step3：val()。

方法解释：val()方法返回或设置被选元素的值。

元素的值是通过 value 属性设置的。该方法大多用于 input 元素， 主要用于获取表单元素的值，如果该方法未设置参数，则返回被选元素 的当前值。代码如下：

console 打印的结果：

val()是用来输出表单内的数据，可以看出 div 和 span 标签内的文本并没有被输出， 我还测试了 H5 新标签 placeholder，同样也没有被输出，所以这个 val()应该是只针对标签的 value 属性的。