jQuery 中获取指定 ID 元素的文本内容（如 #r2 的值）

本文详解如何使用 jquery 快速、可靠地提取网页中具有特定 ID 的元素文本内容，以 #r2 为例，涵盖选择器语法、.text() 方法用法、dom 就绪处理及常见注意事项。

本文详解如何使用 jquery 快速、可靠地提取网页中具有特定 id 的元素文本内容，以 `#r2` 为例，涵盖选择器语法、`.text()` 方法用法、dom 就绪处理及常见注意事项。

在前端开发中，动态读取页面中某个 DOM 元素的内容是高频需求。当目标元素拥有唯一 ID（如 0,7102）时，jQuery 提供了简洁高效的解决方案：通过 ID 选择器定位元素，并调用 .text() 方法获取其纯文本内容。

✅ 基础实现步骤

1. 确保 jQuery 已加载：推荐使用 CDN 引入稳定版本（如 3.3.1 或更高）；
2. 等待 DOM 就绪：使用 $(function() { … }) 或 $(document).ready(…) 避免因脚本执行过早导致元素未加载；
3. 绑定交互事件（如按钮点击）：触发数据读取逻辑；
4. 使用 $(“#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()）、以及空元素防御性检查，就能在各类项目中稳定复用这一基础能力。