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

最新推荐文章于 2021-12-14 10:01:48 发布

转载最新推荐文章于 2021-12-14 10:01:48 发布 · 4.8k 阅读

收录于

前端内容专栏收录该内容

12 篇文章

订阅专栏

本文探讨了在jQuery中使用.val()和.attr('value')来修改input元素的值时的区别。通过实际案例，解释了这两种方法在操作input元素时的不同行为，以及为何对于inputfile类型元素，某些方法有效而某些则无效。

这篇文章主要介绍了从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下
背景：
在清空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的值。