jQuery获取内容与jQuery设置内容的核心方法包括html()、text()、val()，三者分别对应不同的内容操作场景，可精准实现元素内容的获取与修改，是jQuery DOM操作中最基础且常用的功能。
目录
html()方法
html()方法用于获取或设置元素的HTML内容，包含元素内部的标签和文本。当方法无参数时，执行获取操作，返回匹配元素集合中第一个元素的HTML内容；当方法传入参数时，执行设置操作，为所有匹配元素设置相同的HTML内容，参数可包含合法的HTML标签。
示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>html()方法示例</title>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>
<div id="content"><strong>jQuery教程</strong> - 基础操作</div>
<script>
// 获取div元素的HTML内容
var htmlContent = $("#content").html();
console.log(htmlContent); // 输出：<strong>jQuery教程</strong> - 基础操作
// 设置div元素的HTML内容
$("#content").html("<em>jQuery获取内容</em> - html()方法");
</script>
</body>
</html>text()方法
text()方法用于获取或设置元素的文本内容，仅提取或设置元素内部的纯文本，忽略所有HTML标签。与html()方法类似，无参数时执行获取操作，返回匹配元素集合中所有元素的文本内容拼接结果；有参数时执行设置操作，为所有匹配元素设置纯文本内容，参数中的HTML标签会被当作普通文本解析。
示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>text()方法示例</title>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>
<div id="textBox"><span>jQuery设置内容</span> - text()用法</div>
<script>
// 获取div元素的文本内容
var textContent = $("#textBox").text();
console.log(textContent); // 输出：jQuery设置内容 - text()用法
// 设置div元素的文本内容（HTML标签会被当作纯文本）
$("#textBox").text("<em>jQuery文本操作</em> - text()方法");
</script>
</body>
</html>val()方法
val()方法专门用于获取或设置表单元素的value值，适用于input、select、textarea等表单控件。无参数时，获取匹配表单元素中第一个元素的value值；有参数时，为所有匹配表单元素设置value值，可用于快速填充表单内容或获取用户输入的信息。
示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>val()方法示例</title>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>
<input type="text" id="inputBox" value="初始值">
<select id="selectBox">
<option value="1">选项1</option>
<option value="2" selected>选项2</option>
</select>
<script>
// 获取输入框的value值
var inputVal = $("#inputBox").val();
console.log(inputVal); // 输出：初始值
// 获取下拉框选中项的value值
var selectVal = $("#selectBox").val();
console.log(selectVal); // 输出：2
// 设置输入框和下拉框的value值
$("#inputBox").val("jQuery val()方法");
$("#selectBox").val("1");
</script>
</body>
</html>html()、text()、val()方法对比
| 方法 | 核心功能 | 是否解析HTML标签 | 适用元素 | 无参数（获取） | 有参数（设置） |
|---|---|---|---|---|---|
| html() | 获取/设置元素HTML内容 | 是 | 所有可包含内容的元素（div、p等） | 返回第一个匹配元素的HTML内容 | 为所有匹配元素设置HTML内容 |
| text() | 获取/设置元素纯文本内容 | 否 | 所有可包含内容的元素（div、p等） | 返回所有匹配元素的文本内容拼接值 | 为所有匹配元素设置纯文本内容 |
| val() | 获取/设置表单元素value值 | 否 | 表单控件（input、select、textarea等） | 返回第一个匹配表单元素的value值 | 为所有匹配表单元素设置value值 |
html()、text()、val()是jQuery获取内容与jQuery设置内容的核心方法，根据操作对象（普通元素/表单元素）和需求（HTML内容/纯文本/表单值）选择合适的方法，可高效完成DOM内容操作，提升开发效率。