从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别


Posted in Javascript onJune 12, 2016

背景:

在清空input file标签选中值时,分别用了以下方法,发现有的对有的错:

【√】$("#file")[0].value = "";
【√】$("#file")[0].value = null;

【×】$("#file").attr("value","");
【×】$("#file").attr("value",null);
【√】$("#file").val("");
【√】$("#file").val(null);

为什么同样是改变value值,得到的结果却不同呢?

释疑:

查阅stackoverflow《jQuery .val() vs .attr(“value”)》Question,里面解答如下:

The gist is that .attr(...) is only getting the objects value at the start (when the html is created). val() is getting the object's property value which can change many times.

翻译过来就是:

.val()设置的是input的value属性,input是HTMLInputElement的实例,value是通过setter方法定义的,当被赋值时,就会把值写到input里面;而改变value属性的方法,实际上操作的是dom的value属性,会触发浏览器的repaint,更新input的值。

以上所述是小编给大家介绍的从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery的初始化与对象构建之浅析
Apr 12 Javascript
疯狂Jquery第一天(Jquery学习笔记)
May 11 Javascript
判断多个input type=file是否有已经选择好文件的代码
May 23 Javascript
将HTML格式的String转化为HTMLElement的实现方法
Aug 07 Javascript
Bootstrap自定义文件上传下载样式
May 26 Javascript
详解Angular中$cacheFactory缓存的使用
Aug 19 Javascript
自学实现angularjs依赖注入
Dec 20 Javascript
微信小程序 this和that详解及简单实例
Feb 13 Javascript
VUE实现移动端列表筛选功能
Aug 23 Javascript
详解微信小程序开发之formId使用(模板消息)
Aug 27 Javascript
JS中比Switch...Case更优雅的多条件判断写法
Sep 05 Javascript
vue(2.x,3.0)配置跨域代理
Nov 27 Javascript
Java框架SSH结合Easyui控件实现省市县三级联动示例解析
Jun 12 #Javascript
jQuery基于toggle实现click触发DIV的显示与隐藏问题分析
Jun 12 #Javascript
javascript jquery对form元素的常见操作详解
Jun 12 #Javascript
js实现当鼠标移到表格上时显示这一格全部内容的代码
Jun 12 #Javascript
浅谈JS中逗号运算符的用法
Jun 12 #Javascript
Node.js Addons翻译(C/C++扩展)
Jun 12 #Javascript
基于JS代码实现当鼠标悬停表格上显示这一格的全部内容
Jun 12 #Javascript
You might like
php简单日历函数
2015/10/28 PHP
PHP mysqli事务操作常用方法分析
2017/07/22 PHP
采用CSS和JS,刚好我最近有个站点要用到下拉菜单!
2006/06/26 Javascript
IE图片缓存document.execCommand("BackgroundImageCache",false,true)
2011/03/01 Javascript
读jQuery之五(取DOM元素)
2011/06/20 Javascript
跨浏览器通用、可重用的选项卡tab切换js代码
2011/09/20 Javascript
javascript实现控制的多级下拉菜单
2015/07/05 Javascript
浅析在javascript中创建对象的各种模式
2016/05/06 Javascript
javascript+css3开发打气球小游戏完整代码
2017/11/28 Javascript
Vue中$refs的用法详解
2018/06/24 Javascript
详解react内联样式使用webpack将px转rem
2018/09/13 Javascript
基于Vue实现图片在指定区域内移动的思路详解
2018/11/11 Javascript
js微信分享接口调用详解
2019/07/23 Javascript
vue.js路由mode配置之去掉url上默认的#方法
2019/11/01 Javascript
微信小程序定义和调用全局变量globalData的实现
2019/11/01 Javascript
分享一款超好用的JavaScript 打包压缩工具
2020/04/26 Javascript
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
2021/01/05 Vue.js
在Python中利用Pandas库处理大数据的简单介绍
2015/04/07 Python
CentOS 6.5下安装Python 3.5.2(与Python2并存)
2017/06/05 Python
浅谈Scrapy框架普通反爬虫机制的应对策略
2017/12/28 Python
PyQt5每天必学之QSplitter实现窗口分隔
2018/04/19 Python
Python用5行代码写一个自定义简单二维码
2018/10/21 Python
浅谈Python在pycharm中的调试(debug)
2018/11/29 Python
Python 中的参数传递、返回值、浅拷贝、深拷贝
2019/06/25 Python
Python元组 tuple的概念与基本操作详解【定义、创建、访问、计数、推导式等】
2019/10/30 Python
详解Anconda环境下载python包的教程(图形界面+命令行+pycharm安装)
2019/11/11 Python
Python爬虫爬取博客实现可视化过程解析
2020/06/29 Python
css3实现二维码扫描特效的示例
2020/10/29 HTML / CSS
Avène雅漾美国官方网站:敏感肌肤护理专家
2016/10/24 全球购物
俄罗斯运动鞋商店:Sneakerhead
2018/05/10 全球购物
北京捷通华声语音技术有限公司Java软件工程师笔试题
2012/04/10 面试题
一名老师的自我评价
2014/02/07 职场文书
职务说明书范文
2014/05/07 职场文书
市场调研项目授权委托书范本
2014/10/04 职场文书
个人四风问题整改措施
2014/10/24 职场文书
Python docx库删除复制paragraph及行高设置图片插入示例
2022/07/23 Python