本文详细讲解如何使用 jquery 的 .text() 方法精准提取指定 ID 元素（如 #r2）的文本值，并通过按钮触发实现动态读取与赋值，涵盖语法要点、常见误区及实用示例。
本文详细讲解如何使用 jquery 的 `.text()` 方法精准提取指定 id 元素（如 `#r2`）的文本值，并通过按钮触发实现动态读取与赋值，涵盖语法要点、常见误区及实用示例。
在 Web 前端开发中，动态读取页面中特定 dom 元素的内容是高频需求。当目标元素具有唯一 ID（例如 0,7102），jQuery 提供了简洁高效的解决方案：使用 .text() 方法作为 getter 获取其纯文本内容。
✅ 正确用法：.text() 读取文本节点
.text() 在不传参时为只读获取操作，返回所选元素及其所有子元素的合并文本内容（不含 HTML 标签）。对于本例中的 0,7102，执行 $(“#r2”).text() 将精确返回字符串 “0,7102”。
以下是一个完整可运行的示例：
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul> <li><span id="r2">0,7102</span><b style="color: #00B000; font-weight: bold;">lorem ipsus</b></li> <li><span id="r1">0,6999</span>macche</li> <li><span id="s1">0,6896</span>addoca</li> <li><span id="s2">0,6828</span><b style="color: #B00000; font-weight: bold;">te ne frica</b></li> </ul> <br> <button id="button" type="button">Click Me!</button> <input type="text" id="r3" placeholder="Value from #r2 will appear here"> <script> $(function() { $("#button").click(function(e) { e.preventDefault(); // 防止意外表单提交等默认行为 const r2Value = $("#r2").text(); // ✅ 安全读取文本内容 $("#r3").val(r2Value); // 将结果写入输入框 }); }); </script>? 关键说明：
- 使用 $(“#r2”) 精准定位 ID 为 r2 的元素（注意 jQuery 中 ID 选择器需加 #）；
- .text() 自动忽略内部 等标签，仅提取可见文本 “0,7102”；
- 示例中将 id=”r3″ 的 作为输出容器（原问题中误写为 id=”r1″，易造成覆盖冲突，已修正）。
⚠️ 注意事项与常见陷阱
- ID 唯一性必须保证：HTML 规范要求同一页面内 ID 不可重复。若存在多个 id=”r2″，$(“#r2”) 仅匹配第一个，行为不可靠。
- 避免混淆 .text() 与 .html()：
- .text() → 返回纯文本（推荐用于安全读取用户可见内容）；
- .html() → 返回含 HTML 标签的字符串（如 $(“#r2”).html() 将返回 “0,7102” ——本例中无子标签，结果相同；但若 0,7102extra，则 .html() 会返回 “0,7102extra“，存在 xss 风险）。
- 确保 DOM 加载完成：示例中使用 $(function(){…})（即 $(document).ready() 的简写），确保 jQuery 代码在 DOM 构建完毕后执行，防止因元素未加载导致 $(“#r2”) 返回空集合。
- 输入框 ID 冲突预警：原始问题中 与 ID 重复，将导致 jQuery 选择器行为异常或覆盖数据 —— 实际开发中务必严格检查并规避 ID 冲突。
✅ 总结
要从网页中提取 id=”r2″ 元素的文本值（如 “0,7102”），只需三步：
- 引入 jQuery 库；
- 使用 $(“#r2”).text() 获取文本；
- 在事件（如点击按钮）中执行该逻辑，并将结果赋值给目标元素（如 $(“#r3”).val(…)）。
此方法简洁、安全、兼容性好（支持 jQuery 1.0+），是前端数据提取的基础技能之一。