本文详解如何使用 jQuery 快速、可靠地提取网页中具有特定 ID 的元素文本内容，以 #r2 为例，涵盖选择器语法、.text() 方法用法、DOM 就绪处理及常见注意事项。
本文详解如何使用 jquery 快速、可靠地提取网页中具有特定 id 的元素文本内容，以 `#r2` 为例，涵盖选择器语法、`.text()` 方法用法、dom 就绪处理及常见注意事项。
在前端开发中，动态读取页面中某个 DOM 元素的内容是高频需求。当目标元素拥有唯一 ID（如 0,7102）时，jQuery 提供了简洁高效的解决方案：通过 ID 选择器定位元素，并调用 .text() 方法获取其纯文本内容。
✅ 基础实现步骤
- 确保 jQuery 已加载：推荐使用 CDN 引入稳定版本（如 3.3.1 或更高）；
- 等待 DOM 就绪：使用 $(function() { ... }) 或 $(document).ready(...) 避免因脚本执行过早导致元素未加载；
- 绑定交互事件（如按钮点击）：触发数据读取逻辑；
- 使用 $("#r2").text() 获取文本：该方法返回匹配元素内所有子文本节点的合并字符串（不含 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="r2 的值将显示在此">
<script>
$(function() {
$("#button").click(function(e) {
e.preventDefault(); // 可选：防止表单默认行为（如页面跳转）
const r2Value = $("#r2").text(); // ✅ 获取 #r2 元素的纯文本内容
$("#r3").val(r2Value); // 将值写入输入框
});
});
</script>? 注意：示例中将原问题里的 改为 ，是为了避免与页面中已存在的 冲突（ID 在文档中必须唯一）。若 ID 重复，$("#r1") 行为不可预测，务必确保 ID 唯一性。
⚠️ 关键注意事项
-
.text() vs .html()：
- 使用 .text() 获取纯文本（安全，防 XSS）；
- 若需获取含 HTML 标签的内容，请改用 .html() —— 但需自行做转义处理以防安全风险。
-
空值/不存在元素处理：
$("#nonexistent").text() 返回空字符串 ""，不会报错。如需健壮性校验，建议：const $el = $("#r2"); if ($el.length) { console.log("找到元素，值为：", $el.text()); } else { console.warn("#r2 元素未找到"); } -
数字格式兼容性：
示例中 0,7102 使用英文逗号作为小数点（常见于部分欧洲本地化格式），jQuery 不会自动转换类型。如需数值计算，请手动替换并解析：const num = parseFloat($("#r2").text().replace(',', '.'));
✅ 总结
获取 ID 为 r2 的元素文本，核心仅需一行代码：$("#r2").text()。配合 DOM 就绪监听与事件驱动，即可实现响应式数据提取。牢记 ID 唯一性原则、方法语义差异（.text() ≠ .val()）、以及空元素防御性检查，就能在各类项目中稳定复用这一基础能力。
