本文详细讲解如何使用 jQuery 的 .text() 方法精准提取指定 ID 元素（如 #r2）的文本值，并结合事件绑定实现点击获取、动态赋值等常见交互场景。
本文详细讲解如何使用 jquery 的 `.text()` 方法精准提取指定 id 元素（如 `#r2`）的文本值，并结合事件绑定实现点击获取、动态赋值等常见交互场景。
在前端开发中，从 DOM 中快速、可靠地读取特定元素的内容是高频需求。当目标元素具有唯一 ID（例如 0,7102）时，jQuery 提供了简洁高效的解决方案：使用选择器 $("#r2") 定位元素，再调用 .text() 方法作为getter获取其纯文本内容（不含 HTML 标签）。
以下是一个完整可运行的示例：
<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 of #r2 will appear here">
$(function() {
$("#button").click(function(e) {
e.preventDefault(); // 防止意外表单提交或页面跳转（如有父表单）
const r2Value = $("#r2").text(); // ✅ 正确获取文本：返回 "0,7102"
$("#r3").val(r2Value); // 将值写入输入框
});
});✅ 关键说明：
- $("#r2") 返回 jQuery 对象，代表页面中 id="r2" 的 元素；
- .text() 在无参数调用时为getter 模式，自动提取该元素及其所有子节点的合并纯文本内容（忽略 HTML 标签和样式），因此 $("#r2").text() 精准返回 "0,7102"，而非包含 标签的 HTML 字符串；
- 注意：示例中将目标输入框的 id 改为 r3（而非原问题中的 r1），避免与已有 冲突——ID 必须全局唯一，否则 jQuery 选择器行为不可预测；
⚠️ 注意事项：
- 若需获取含 HTML 标签的原始内容，请改用 .html()，但存在 XSS 风险，务必对不可信数据进行转义；
- 确保 jQuery 库在 DOM 加载完成前已引入，且代码置于 $(function(){...}) 或 $(document).ready() 中，防止因元素未就绪导致选择器返回空集；
- 对于数字型文本（如 "0,7102"），若后续需参与计算，注意逗号为千分位分隔符（非小数点），应先用 replace(',', '.') 转换并 parseFloat() 解析。
掌握 .text() 的 getter 用法，是 jQuery DOM 操作的基础能力之一——简洁、安全、语义明确，适用于绝大多数文本提取场景。
