jQuery 捕获

jQuery 的 DOM 捕获（获取）指读取选中元素的内容或属性：段落里的文字、输入框里的值、图片的 src 等。捕获是一切 DOM 操作的前提——只有先"读"到旧值，才能判断要不要"写"新值。

学习本节前，请先确认页面已引入 jQuery 库（如 <script src="https://example.com/jquery.min.js"></script>，实际项目中请换成真实可用的 CDN 地址），示例均假设已存在下面的 HTML：

<p id="p1">你好，<b>世界</b></p>
<input id="ipt" value="原始值">
<a id="a1" href="https://example.com">链接</a>

text() 获取文本

text() 不带参数时，返回匹配元素的合并文本，会剔除所有内部标签：

var t = $("#p1").text();
console.log(t); // 输出：你好，世界

效果：<b> 标签被忽略，只留下纯文本，常用于读取不需要样式的文字。

html() 获取 HTML 内容

html() 不带参数时，返回第一个匹配元素内部完整的 HTML，标签原样保留：

var h = $("#p1").html();
console.log(h); // 输出：你好，<b>世界</b>

效果：能看到加粗标签本身，适合需要保留格式或拼接新内容再写回的场景。

text() 与 html() 的区别

方法	返回内容	适合场景
text()	纯文本，忽略标签	读文字做判断、存入变量
html()	含标签的完整 HTML	需要保留格式、嵌套结构

注意：html() 只取第一个匹配元素，text() 则合并所有匹配元素的内容。

val() 获取表单值

val() 读取表单元素的当前值，用于 input、select、textarea：

var v = $("#ipt").val();
console.log(v); // 输出：原始值

效果：输入框内容被用户修改后，可用 val() 拿到最新输入，是表单校验的常用手段。

attr() 获取属性值

attr() 返回第一个匹配元素的指定属性；属性不存在时返回 undefined：

console.log($("#a1").attr("href"));  // 输出：https://example.com
console.log($("#a1").attr("title")); // 输出：undefined

效果：能读取 href、src、alt、自定义 data-* 等任意属性。

综合示例

点击按钮把标题文字、说明内容和链接地址一次读出来：

<button id="btn">读取</button>
<div id="out"></div>

$("#btn").click(function () {
    var msg = $("#p1").text() + " | " + $("#ipt").val() + " | " + $("#a1").attr("href");
    $("#out").text(msg);
    // 效果：div 中显示：你好，世界 | 原始值 | https://example.com
});

小结

捕获就是"读"：text() 读纯文本、html() 读 HTML、val() 读表单值、attr() 读属性。掌握这四兄弟，下一节就能用同样的方法向页面"写入"内容了。