val 不是函数 jQuery 错误 [已解决]

作者

val 不是函数 jQuery 错误[已解决]

val is not a function jQuery Error [Solved]

“val is not a function”jQuery 错误发生在尝试对
val()不是 jQuery 对象的值调用函数时。该val()函数只能用于 jQuery 对象。要解决该错误，您可以将 DOM 元素转换为 jQuery 对象，例如$(yourDomElement).val().

jquery val is not a function 错误

索引.js
$(document).ready(function () {
  const items = $('#example input');
  console.log(items);

  // ⛔️ ERROR: calling val() on DOM element
  const bad = items[0].val();

  // ✅ using .value on DOM element
  const result1 = items[0].value;
  console.log(result1);

  // ✅ using eq() to get jQuery object
  const result2 = items.eq(0).val();
  console.log(result2);

  // ✅ convert to jQuery object
  const result3 = $(items[0]).val();
  console.log(result3);
});

我们使用括号表示法来访问类数组对象的第一个元素。该操作的返回值是 DOM 元素，而不是 jQuery 对象，因此我们不能对其使用val()函数。

这是示例的 HTML。

索引.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <form id="example">
      <input type="text" value="first input" />
      <input type="text" value="second input" />
      <input type="text" value="third input" />
    </form>

    <!-- ✅ load jQuery ✅ -->
    <script
      src="https://code.jquery.com/jquery-3.6.0.min.js"
      integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
      crossorigin="anonymous"
    ></script>

    <script src="index.js"></script>
  </body>
</html>

如果您正在访问特定索引处的元素并希望得到一个 jQuery 对象作为结果，您可以将特定索引传递给
eq()函数。

索引.js
const items = $('#example input');

// ✅ using eq()
const result2 = items.eq(0).val();
console.log(result2);

如果您有一个有效的 DOM 元素并且想直接获取它的值，而不将其转换为 jQuery 对象，则可以使用该value属性。

索引.js
const items = $('#example input');

// ✅ using .value on DOM element
const result1 = items[0].value;
console.log(result1);

最后，如果您有一个有效的 DOM 元素并想将其转换为 jQuery 对象并val()在其上使用该方法，您可以将其传递给
jQuery(element)函数。

索引.js
const items = $('#example input');

// ✅ convert DOM element to jQuery object
const result3 = $(items[0]).val();
console.log(result3);

jQuery 函数接受一个 DOM 元素，将其转换为 jQuery 对象并返回结果。

–

发表评论