本文详解为何使用 .text() 读取 元素内容会返回旧值，并指出正确做法是改用 .val() 方法获取实时输入值，同时说明 DOM 属性与 jQuery 方法的本质区别。

本文详解为何使用 `.text()` 读取 `` 元素内容会返回旧值，并指出正确做法是改用 `.val()` 方法获取实时输入值，同时说明 dom 属性与 jquery 方法的本质区别。

在 jQuery 开发中，一个高频误区是：对 、、<select> 等表单控件误用 .text() 或 .html() 方法读取用户输入值</select>。如以下典型代码：

$('#spnFiberLeadLITActual').keyup(function (evt) {
    var completeValue = $('#spnFiberLeadLITAccepted').text(); // ❌ 错误！
    alert(completeValue);
});

该代码始终弹出初始渲染时的文本内容（甚至可能是空字符串），而非用户当前输入的最新值——根本原因在于：
? .text() 读取的是元素的 textContent（即标签内纯文本内容），而 的用户输入不会写入其标签内部文本节点，而是存储在 DOM 元素的 value 属性中；
? 是自闭合元素，其 HTML 结构为 ，内部无子文本节点，因此 .text() 始终返回空或初始 value 的静态快照（取决于浏览器解析行为），无法响应动态输入。

✅ 正确解法：使用 .val() 方法
.val() 是 jQuery 专为表单元素设计的方法，它直接读取/设置元素的 value DOM 属性，能实时反映用户输入：

jQuery 1.12.4

jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。

下载

$('#spnFiberLeadLITActual').keyup(function (evt) {
    var neValue = parseFloat($('#spnFiberLeadSpanLength').text());
    var completeValue = $('#spnFiberLeadLITAccepted').val(); // ✅ 正确：获取实时输入值

    alert(completeValue); // 现在将准确显示用户刚输入的内容
});

⚠️ 补充注意事项：

• 若目标元素是 、
  等非表单元素（用于显示值），则应使用 .text() 或 .html()；但若它是 、 等可编辑控件，<strong>必须用 .val()</strong>； <li>避免混用原生 JS 与 jQuery：document.getElementById('id').value 等价于 $('#id').val()，但不要写成 $('#id')[0].textContent（仍错误）； </li> <li>对于实时性要求高的场景（如防抖校验），建议改用 input 事件替代 keyup，以覆盖粘贴、拖拽等所有输入方式：<pre class="brush:php;toolbar:false;">$('#spnFiberLeadLITActual').on('input', function() { console.log($(this).val()); // 更健壮的实时监听 });</pre></li> <p>总结：理解 HTML 表单元素的数据模型是 jQuery 表单操作的基础——.val() 操作 value 属性（动态输入），.text() 操作文本节点（静态内容）。一次正确的 API 选择，即可避免 90% 的“值未更新”类问题。</p>