迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 >

解决 jQuery 错误 val is not a function

作者:迹忆客 最近更新:2022/11/09 浏览次数:

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

jquery val is not a function

$(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。

<!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() 函数。

const items = $('#example input');

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

如果你有一个有效的 DOM 元素并想直接获取它的值,而不是将它转换为 jQuery 对象,你可以使用 value 属性来代替。

const items = $('#example input');

// ✅ 在 DOM 元素上使用 .value
const result1 = items[0].value;
console.log(result1);

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

const items = $('#example input');

// ✅ 将 DOM 元素转换为 jQuery 对象
const result3 = $(items[0]).val();
console.log(result3);

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

转载请发邮件至 1244347461@qq.com 进行申请,经作者同意之后,转载请以链接形式注明出处

本文地址:

相关文章

在 Angular 2 中使用 jQuery

发布时间:2023/04/14 浏览次数:105 分类:Angular

本教程演示了如何在 Angular 2 中使用 jQuery。jQuery 是一个轻量级的 JavaScript 库,可以更轻松地在网站上使用 JavaScript。

PHP 中使用 JQuery

发布时间:2023/03/28 浏览次数:116 分类:PHP

本篇文章介绍如何在 PHP 代码中使用 jQuery 来增加功能。

在 Vue 中正确使用 jQuery

发布时间:2023/03/24 浏览次数:130 分类:Vue

在Vue中使用jQuery已经成为了一种趋势,因为它可以让我们更加方便地操作DOM元素,以及提供了一些实用的工具函数。在本文中,我们将详细介绍如何在Vue中使用jQuery,并提供一些实例来

jQuery AJAX 数据

发布时间:2023/03/13 浏览次数:151 分类:WEB前端

本教程演示了如何在 jQuery AJAX 中使用数据。

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便