本章将介绍 jQuery 的 html()、text()、val() 三个方法，每个方法的作用如下表：
| 方法 | 核心作用 | 底层依赖 | 关键特性 |
|---|---|---|---|
html() | 操作元素的 HTML 内容（含标签） | DOM 的 innerHTML |
|
text() | 操作元素的纯文本内容（无标签） | DOM 的 textContent |
|
val() | 操作表单元素的 value 属性 / 选中态 | 表单元素 value 属性 |
|
该方法用来操作 HTML 内容。用法如下：
（1）无参 html() 方法：用于获取 HTML 内容，但是仅返回第一个匹配元素的完整 HTML 结构（含标签）。例如：
<form lang="zh-CN">
<p>
<label>姓名：</label>
<input id="myName" type="text" value="张三" placeholder="你的姓名" />
</p>
<p>
<label>我的特长：</label>
</p>
<select id="specialty" title="我的特长" multiple>
<option value="val1">擅长编写代码</option>
<option value="val2">擅长户外生存</option>
<option value="val3">擅长下厨</option>
<option value="val4">擅长打篮球</option>
<option value="val5">擅长唱歌，歌声悦耳动听</option>
</select>
</form>运行如下 jQuery 代码：
var html = $('p').html();
log.info(html);输出的结果为：
<label>姓名：</label> <input id="myName" type="text" value="张三" placeholder="你的姓名">（2）传字符串：用来设置 HTML 内容，给所有匹配元素设置相同的 HTML 内容（标签会被浏览器解析）。例如：
<form lang="zh-CN">
<p>
<label>姓名：</label>
<input id="myName" type="text" value="张三" placeholder="你的姓名" />
</p>
<p>
<label>我的特长：</label>
</p>
<select id="specialty" title="我的特长" multiple>
<option value="val1">擅长编写代码</option>
<option value="val2">擅长户外生存</option>
<option value="val3">擅长下厨</option>
<option value="val4">擅长打篮球</option>
<option value="val5">擅长唱歌，歌声悦耳动听</option>
</select>
</form>运行如下 jQuery 代码：
$('p').html('<b>新增的内容</b>')修改后的 HTML 如下：
<form lang="zh-CN">
<p><b>新增的内容</b></p>
<p><b>新增的内容</b></p>
<select id="specialty" title="我的特长" multiple>
<option value="val1">擅长编写代码</option>
<option value="val2">擅长户外生存</option>
<option value="val3">擅长下厨</option>
<option value="val4">擅长打篮球</option>
<option value="val5">擅长唱歌，歌声悦耳动听</option>
</select>
</form>（3）传递函数：用来动态设置 HTML 内容，函数接收两个参数：index（元素索引）、oldHtml（原 HTML 内容），返回值作为新内容。例如：
<form lang="zh-CN">
<p>
<label>姓名：</label>
<input id="myName" type="text" value="张三" placeholder="你的姓名" />
</p>
<p>
<label>我的特长：</label>
</p>
<select id="specialty" title="我的特长" multiple>
<option value="val1">擅长编写代码</option>
<option value="val2">擅长户外生存</option>
<option value="val3">擅长下厨</option>
<option value="val4">擅长打篮球</option>
<option value="val5">擅长唱歌，歌声悦耳动听</option>
</select>
</form>运行如下 jQuery 代码：
$('p').html(function(index, oldHtml){
return oldHtml + '<i>' + index + '</i>-增加了内容';
})修改后的 HTML 如下：
<form lang="zh-CN">
<p>
<label>姓名：</label>
<input id="myName" type="text" value="张三" placeholder="你的姓名">
<i>0</i>-增加了内容</p>
<p>
<label>我的特长：</label>
<i>1</i>-增加了内容</p>
<select id="specialty" title="我的特长" multiple>
<option value="val1">擅长编写代码</option>
<option value="val2">擅长户外生存</option>
<option value="val3">擅长下厨</option>
<option value="val4">擅长打篮球</option>
<option value="val5">擅长唱歌，歌声悦耳动听</option>
</select>
</form>该方法用来操作纯文本内容。用法如下：
（1）无参 text()：用于获取纯文本内容，将返回所有匹配元素的纯文本（忽略所有 HTML 标签）。例如：
<form lang="zh-CN">
<p>
<label>姓名：</label>
<input id="myName" type="text" value="张三" placeholder="你的姓名" />
</p>
<p>
<label>我的特长：</label>
</p>
<select id="specialty" title="我的特长" multiple>
<option value="val1">擅长编写代码</option>
<option value="val2">擅长户外生存</option>
<option value="val3">擅长下厨</option>
<option value="val4">擅长打篮球</option>
<option value="val5">擅长唱歌，歌声悦耳动听</option>
</select>
</form>运行如下 jQuery 代码：
var text = $('p').text();
log.info(text);输出的结果为：
姓名： 我的特长：（2）传字符串：用于设置纯文本内容，将给所有匹配元素设置纯文本（HTML 标签会被转义为实体，如 < → <）。例如：
<form lang="zh-CN">
<p>
<label>姓名：</label>
<input id="myName" type="text" value="张三" placeholder="你的姓名" />
</p>
<p>
<label>我的特长：</label>
</p>
<select id="specialty" title="我的特长" multiple>
<option value="val1">擅长编写代码</option>
<option value="val2">擅长户外生存</option>
<option value="val3">擅长下厨</option>
<option value="val4">擅长打篮球</option>
<option value="val5">擅长唱歌，歌声悦耳动听</option>
</select>
</form>运行如下 jQuery 代码：
$('p').text('新增的内容');修改后的 HTML 如下：
<form lang="zh-CN">
<p>新增的<strong>内容</strong></p>
<p>新增的<strong>内容</strong></p>
<select id="specialty" title="我的特长" multiple>
<option value="val1">擅长编写代码</option>
<option value="val2">擅长户外生存</option>
<option value="val3">擅长下厨</option>
<option value="val4">擅长打篮球</option>
<option value="val5">擅长唱歌，歌声悦耳动听</option>
</select>
</form>（3）传函数：用来动态设置纯文本内容，该函数接收两个参数：index（元素索引）、oldHtml（原 HTML 内容），返回值作为新内容。例如：
<form lang="zh-CN">
<p>
<label>姓名：</label>
<input id="myName" type="text" value="张三" placeholder="你的姓名" />
</p>
<p>
<label>我的特长：</label>
</p>
<select id="specialty" title="我的特长" multiple>
<option value="val1">擅长编写代码</option>
<option value="val2">擅长户外生存</option>
<option value="val3">擅长下厨</option>
<option value="val4">擅长打篮球</option>
<option value="val5">擅长唱歌，歌声悦耳动听</option>
</select>
</form>运行如下 jQuery 代码：
$('p').text(function(index, oldText){
return oldText + '<i>' + index + '</i>-增加了内容';
});修改后的 HTML 如下：
<form lang="zh-CN">
<p>
姓名：
<i>0</i>-增加了内容</p>
<p>
我的特长：
<i>1</i>-增加了内容</p>
<select id="specialty" title="我的特长" multiple>
<option value="val1">擅长编写代码</option>
<option value="val2">擅长户外生存</option>
<option value="val3">擅长下厨</option>
<option value="val4">擅长打篮球</option>
<option value="val5">擅长唱歌，歌声悦耳动听</option>
</select>
</form>操作表单值 / 选中表单状态。该方法专门针对表单元素，是表单交互的核心方法，支持额外的“数组参数” 设置多选。用法如下：
（1）无参：获取表单值，用于返回第一个匹配表单元素的 value 属性值（或选中值）。例如
<form lang="zh-CN">
<p>
<label>姓名：</label>
<input id="myName" type="text" value="张三" placeholder="你的姓名" />
</p>
<p>
<label>我的特长：</label>
</p>
<select id="specialty" title="我的特长" multiple>
<option value="val1">擅长编写代码</option>
<option value="val2">擅长户外生存</option>
<option value="val3">擅长下厨</option>
<option value="val4">擅长打篮球</option>
<option value="val5">擅长唱歌，歌声悦耳动听</option>
</select>
</form>运行如下 jQuery 代码：
var val = $('#myName').val();
log.info('我的姓名：' + val);输出内容如下：
我的姓名：张三（2）传字符串：设置表单值，用于给所有匹配表单元素设置 value 属性。例如：
<input id="myName" type="text" value="张三" placeholder="你的姓名" />运行如下 jQuery 代码：
$('#myName').val('李四');将设置输入框的值为“李四”。
（3）传函数：动态设置表单值，其中函数的参数为 index（索引）、oldVal（原值），注意原值是字符串，需手动转类型。例如：
<input id="myName" type="text" value="张三" placeholder="你的姓名" />运行如下 jQuery 代码：
$('#myName').val(function(index, oldVal){
return oldVal + ' - 改名了';
});将设置输入框的值为“张三 - 改名了”。
（4）传数组：设置多选控件选中状态，这仅针对复选框、多选下拉框（multiple），数组元素为要选中的 value 值。例如：
<form lang="zh-CN">
<p>
<label>姓名：</label>
<input id="myName" type="text" value="张三" placeholder="你的姓名" />
</p>
<p>
<label>我的特长：</label>
</p>
<select id="specialty" title="我的特长" multiple>
<option value="val1">擅长编写代码</option>
<option value="val2">擅长户外生存</option>
<option value="val3">擅长下厨</option>
<option value="val4">擅长打篮球</option>
<option value="val5">擅长唱歌，歌声悦耳动听</option>
</select>
</form>运行如下 jQuery 代码：
$('#specialty').val(['val1', 'val3']);将选中 <select> 中的多个选项。
下面示例通过“点击自己动手试一试”可以尝试各种方法的效果：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JQeury 教程</title>
<!-- 引入 jQuery 库 -->
<script type="text/javascript" src="https://www.hxstrive.com/cdn/libs/jquery/3.7.1/jquery.min.js"></script>
<!-- 引入 loglevel 库，方便在 DOM 中打印日志 -->
<script src="https://www.hxstrive.com/preview_code/libs/custom_loglevel.js"></script>
<style>
button { background: #EEE !important; border: 1px solid #ccc !important;
min-width: 40px; padding: 5px; margin: 5px; cursor: pointer; }
sup {color: red; font-size: 12px; background: transparent !important;}
/* 效果样式 */
.myClass { box-shadow: inset 0 0 3px red; }
p[name="myName"] { color: blue; }
</style>
</head>
<body>
<div class="app">
<h3>HTML代码/文本/值</h3>
<form lang="zh-CN">
<p>
<label>姓名：</label>
<input id="myName" type="text" value="张三" placeholder="你的姓名" />
</p>
<p>
<label>我的特长：</label>
</p>
<select id="specialty" title="我的特长" multiple>
<option value="val1">擅长编写代码</option>
<option value="val2">擅长户外生存</option>
<option value="val3">擅长下厨</option>
<option value="val4">擅长打篮球</option>
<option value="val5">擅长唱歌，歌声悦耳动听</option>
</select>
</form>
</div>
<div>
<!-- html([val|fn]) 取得第一个匹配元素的html内容 -->
<button type="button" onclick="
var html = $('p').html();
log.info(html);
">html()</button>
<button type="button" onclick="
$('p').html('<b>新增的内容</b>')
">html(str)</button>
<button type="button" onclick="
$('p').html(function(index, oldHtml){
return oldHtml + '<i>' + index + '</i>-增加了内容';
})
">html(function(){})</button>
<!-- text([val|fn]) 取得所有匹配元素的内容 -->
<button type="button" onclick="
var text = $('p').text();
log.info(text);
">text()</button>
<button type="button" onclick="
$('p').text('新增的<strong>内容</strong>');
">text(str)</button>
<button type="button" onclick="
$('p').text(function(index, oldText){
return oldText + '<i>' + index + '</i>-增加了内容';
});
">text(function(){})</button>
<!-- val([val|fn|arr]) 获得匹配元素的当前值 -->
<button type="button" onclick="
var val = $('#myName').val();
log.info('我的姓名：' + val);
">val()</button>
<button type="button" onclick="
$('#myName').val('李四');
">val(str)</button>
<button type="button" onclick="
$('#myName').val(function(index, oldVal){
return oldVal + ' - 改名了';
});
">val(function(){})</button>
<button type="button" onclick="
$('#specialty').val(['val1', 'val3']);
">val(array)</button>
</div>
</body>
</html>更多关于 jQuery 的知识请阅读后续教程。
川公网安备51010802032098