.prop() VS .val().使用 jQuery 设置输入文本值

2023-11-24

读完后(有趣的).prop() 与 .attr() and jQuery 性能:属性我心中出现了关于哪个更好使用的疑问: .prop() 还是 .val() ?我想设置一个输入文本值。

The jQuery .prop() 页面说道:

属性通常会影响 DOM 元素的动态状态,而不更改序列化的 HTML 属性。示例包括输入元素的值属性、输入和按钮的禁用属性或复选框的选中属性。应该使用 .prop() 方法来设置禁用和检查,而不是 .attr() 方法。.val() 方法应用于获取和设置值.

But regarding to performance .prop() seems to be better than .val() setting values: .prop() vs .attr() vs .val()

所以我没有答案。 我该做什么?

$('#element').prop('value', 'Example');

or

$('#element').val('Example');

EDIT1: .prop() is always better than .val() enter image description here enter image description here enter image description here

EDIT2: I've tried now getting a value, also .prop() is faster enter image description here

EDIT3:正如 @BeatAlex 所说,如果我们想要性能原生 js 就是速度极快

var x = document.getElementById('element').value;

enter image description here

正如你们中的一些人所说,它可能会更快,但如果 .val() 存在,我们会使用它。

PS:当我写这篇文章时,当前的 jQuery 版本是 1.11 或 2.1


你想使用val()。这就是该函数的用途,特别是val输入的ue。

编写起来也更快,更容易理解和使用val,如果需要,您可以多次更改该值。

你的图表说

越高越好

and val() higher.

另外,就像你已经引用过的那样,

.val() 方法应用于获取和设置值。

这意味着除非您正在处理禁用的属性,否则请使用:

$('input').val();

另外作为旁注,你发布的链接,运行测试后表明val()prop().

既然你喜欢展示一些图表和图片,我将添加一些:

取自这个链接

Pure JS is better

如果你争论速度问题,纯 JS 更好。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

.prop() VS .val().使用 jQuery 设置输入文本值 的相关文章

  • 在 TypeScript 中迭代对象的键和值

    在纯 JavaScript 中 我们可以迭代对象属性和值 如下所示 const values Object keys obj map key gt obj key 在 TypeScript 中 此语法是错误的 因为 TS 编译器显示以下消息
  • 与保留模式 GUI 相比,使用立即模式 GUI 对性能有何影响?

    我目前正在开发一个标准的 Windows 桌面应用程序 标准意味着没有花哨的东西 只是按钮 文本 滑块等 在研究了一些 GUI 框架并被拒绝后 我决定自己编写一个 GUI 框架他们全部 由于这是一个业余爱好项目 我也愿意尝试 并决定将 GU
  • 在 PHP 中合并文件块

    出于教育目的 我想创建文件块上传 你们怎么知道所有块何时上传 我试图从temp并重命名它们 使它们按正确的顺序排列 然后与最后一个块将它们合并在一起 然而 我猜最后发送的并不是最后收到的 所以fopen on chunks 失败 因为它们尚
  • 如何在 React 组件中使用 CDN

    我正在尝试使用基于 D3 构建的库 称为 Greuler 来动态渲染图形 它的 npm 包似乎已损坏 当我改用 Greuler CDN 时 index html 中的测试图终于起作用了 但是 我正在开发一个 React 应用程序 并且我希望
  • 在 JavaScript 中对数组进行排序

    我正在尝试对内部包含整数的数组进行排序 例如 var array 123 3 745 4 643 5 643 2 我如何对其进行排序才能返回类似以下内容的内容 array 745 4 643 2 643 5 123 3 您可以将自定义比较函
  • 无法获取子 DOM 元素

    注 由于问题有点复杂 为了可读性对代码进行了抽象 We ve a
  • 更新 Bootstrap 缩略图网格 - ajax 请求

    设想 我有一个带有显示国家 地区的 Twitter Bootstrap 缩略图网格的视图 当用户单击一张图像时 它应该在同一网格 屏幕 中显示与该国家 地区相关的城市 技术的 首先 我用国家 地区填充 dataProvider 然后我应该将
  • 将焦点和光标设置到文本输入字段/字符串 w 的末尾。 Jquery [重复]

    这个问题在这里已经有答案了 我有以下函数 将选择器添加到搜索输入作为高级选项 就像堆栈溢出高级搜索一样 当您单击要搜索的内容时 它会添加一个前缀 请参阅下面的 Jquery
  • 如何对基于 HTML5-JavaScript 的视频播放器进行快照?

    实际上 我有一个带有 JavaScript 函数的 HTML5 页面 可以让我播放 wmv 视频文件 我需要在视频播放时 有暂停或没有暂停 拍摄快照并以任何图像格式 JPG 或 BMP 保存 任何帮助将不胜感激 谢谢
  • 如何使用 jQuery 或 php 从 Instagram 令牌获取访问令牌

    我是 Instagram API 的新手 发现一些与了解如何获取访问令牌相关的问题 我所做的是在 Instagram 上注册 创建了一个应用程序 并使用了客户端 id 和重定向 url 当我将以下内容发布到浏览器中时 它会给我一个 code
  • 返回不在函数中

    Firebug 报告 返回不在函数中 错误 没有位置 好吧 第 1 行什么都没有 我怎样才能找到这个错误的根源 return not in function Break on this error return 0 javascript r
  • try-catch 块是否会降低性能[重复]

    这个问题在这里已经有答案了 This link http www cplusplus com doc tutorial exceptions states 为了捕获异常 我们必须将一部分代码放在异常下 检查 这是通过将这部分代码包含在 tr
  • 如何减少 jQuery 函数中使用的子级数量?

    我觉得我必须使用太多 children 在我的一些 jQuery 函数中 这是我的 HTML div class goal small container div class goal content div class goal row
  • JSON.stringify 对于大型对象来说非常慢

    我在 javascript 中有一个非常大的对象 大约 10MB 当我对其进行字符串化时 需要很长时间 因此我将其发送到后端并将其解析为一个对象 实际上是带有数组的嵌套对象 这也需要很长时间 但这不是我们在这个问题中的问题 问题 我怎样才能
  • HighCharts - 两个 Y 轴,一个具有最大值

    我在使用 Highcharts 时遇到问题 我已将右 Y 轴设置为 min 0 和 max 100 它是 但它不起作用并生成 125 百分比 怎么了 http jsfiddle net SdTcU http jsfiddle net SdT
  • ajaxStart 和 ajaxStop 与 fetch API 等效

    我正在尝试将 API 调用从使用 jQuery ajax 迁移到使用 Fetch API 我使用 jQuery ajaxStart 和 ajaxStop 在服务器调用期间显示加载旋转器 我正在运行多个并行服务器请求 我希望旋转器在第一个请求
  • 是否可以对 Flexbox 插入、删除和项目位置进行动画处理?

    这个问题最初是在 2012 年提出的 https stackoverflow com questions 11106876 is it possible to animate flexbox inserts removes但是提供的答案并未
  • 何时使用node.js、sinatra、rails? [关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 这 3 种语言 框架的最佳用途是什么 混合所有 或 2 个 有用吗 如果您正在构建一个完整的 Web 应用程序 您可能应该使用 Rails 因为
  • 嵌套对象的 setState

    我有一个嵌套对象作为状态 并且在组件中有一个表单 我正在考虑每次用户在表单中输入某些内容时更新状态 并且为了避免为每个输入创建许多函数 我正在考虑使用 switch 创建单个函数 使用 switch 创建单一函数是个好主意吗 如何更新对象的
  • 如何从 fetch API 返回 json 响应

    我有一个像这样的函数 check auth fetch Urls check auth credentials include method GET then response gt if response ok return respon

随机推荐