jQuery中，html、val与text的区别与联系

文章作者：Tyan
博客：noahsnail.com  |  CSDN  |  简书

本文主要介绍如何使用jQuery中的html()，text()和val()三种方法，用于读取、修改元素的html结构，元素的文本内容，以及表单元素的value值。

1. html方法

• 不带参数的html方法

在html方法不带参数的情况下，取得的是html内容。例如：

html页面代码：

<h2><span>Hello</span></h2>

jquery代码：

$('h2').html();

返回值：<span>Hello</span>（String）

• 带参数的html方法

jquery代码：

$('h2').html('Test');

结果：

<h2>Test</h2>

2. text方法

• 不带参数的text方法

html页面代码：

<h2>Hello</h2>

jquery代码：

console.log($('h2').text());

结果：Hello

• 带参数的text方法

jquery代码：

$('h2').text('Test');

结果：

<h2>Test</h2>

3. val方法

• 不带参数的val方法

html页面代码：

<input id="test" value="Hello"/>

jquery代码：

console.log($('#test').val());

结果：Hello

• 带参数的val方法

jquery代码：

$('#test').val('Test');

结果：

<input id="test" value="Test"/>

总结：html方法可以获取（修改）控件的文本，也可以获取（修改）控件内嵌套的html元素，text方法主要是用来获取控件（修改）的文本，而val方法主要是针对具有value属性的控件，可以获取（修改）控件的value值。