从重置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的值。

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

赞 (0)

相关推荐

  • jQuery学习之prop和attr的区别示例介绍

    jQuery学习之prop和attr的区别示例介绍

    1..prop( propertyName ) 获取匹配集合中第一个元素的Property的值 2. .prop( propertyName, value ) .prop( map ) .prop( propertyName, function(index, oldPropertyValue) ) 给匹配元素集合设定一个或多个属性 .prop()和 .attr()区别 下面是关于jQuery1.6和1.6.1中Attributes模块变化的描述,以及.attr()方法和.prop()方法的首选使

  • 详谈jQuery中使用attr(), prop(), val()获取value的异同

    jQuery中有3个获取元素value值的函数比较相似:attr(), prop(), val():拿来比较一下. 示例代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script src="jquery-2.1.4.js"></scrip

  • jquery 获取自定义属性(attr和prop)的实现代码

    jquery 获取自定义属性(attr和prop)的实现代码

    1. attr(属性名) //获取属性的值(取得第一个匹配元素的属性值.通过这个方法可以方便地从第一个匹配元素中获取一个属性的值.如果元素没有相应属性,则返回 undefined ) 2. attr(属性名, 属性值) //设置属性的值 (为所有匹配的元素设置一个属性值.) 3. attr(属性名,函数值) //设置属性的函数值 (为所有匹配的元素设置一个计算的属性值.不提供值,而是提供一个函数,由这个函数计算的值作为属性值.) 4.attr(properties) //给指定元素设置多个属性值

  • jQuery获取attr()与prop()属性值的方法及区别介绍

    今天在项目中使用<select></select>下拉菜单时,使用juery操作,使页面加载完菜单默认选中的值为2,我一开始的操作如下: <!--html部分--> <select> <option value="1">1</option> <option value="2">2</option> <option value="3">3&l

  • jQuery中attr()与prop()函数用法实例详解(附用法区别)

    jQuery中attr()与prop()函数用法实例详解(附用法区别)

    本文实例讲述了jQuery中attr()与prop()函数用法.分享给大家供大家参考,具体如下: 一.jQuery的attr()方法 jquery中用attr()方法来获取和设置元素属性,attr是attribute(属性)的缩写,在jQuery DOM操作中会经常用到attr(),attr()有4个表达式. 1. attr(属性名) //获取属性的值(取得第一个匹配元素的属性值.通过这个方法可以方便地从第一个匹配元素中获取一个属性的值.如果元素没有相应属性,则返回 undefined ) 2.

  • jquery获取自定义属性(attr和prop)实例介绍

    jquery获取自定义属性(attr和prop)实例介绍

    $("form").attr("check"); $("form").prop("check"); 两种都可以,不过新版jquery推荐第二种,两个在其他方面都差不多,我发现的唯一不同就是在checkbox上的时候,需要用prop,不然IE浏览器会不兼容 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat=&

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

    背景: 在清空input file标签选中值时,分别用了以下方法,发现有的对有的错: [√]$("#file")[0].value = ""; [√]$("#file")[0].value = null; [×]$("#file").attr("value",""); [×]$("#file").attr("value",null); [√]$(&

  • Angular2里获取（input file）上传文件的内容的方法

    最近在用Angular2,需要有一个上传文件的功能,但是又不想用库,所以直接用原生的input file 标签. <input type="file" id="newUpload" > 然后想获取上传的内容,于是先想了个愚蠢的方法,先通过id获取到这个input标签,然后再获取其中上传的内容 const uploadsFile = document.getElementById(name).files[0]; 结果就报错了.然后看提示说HTMLEleme

  • input file样式修改以及图片预览删除功能详细概括（推荐）

    input file样式修改以及图片预览删除功能详细概括（推荐）

    本篇对input file进行了修改,改成自己需要的样式,类似验证身份上传身份证图片的功能. 效果图如下: 这里主要展示上传预览图片功能,对于删除功能的html及css写的比较粗糙,对于想要精细表现这块儿的可以在自己添加修改. <!--点击预览图片--> <div class="picDiv"> <div class="addImages"> <!--multiple属性可选择多个图片上传--> <input t

  • 如何用input标签和jquery实现多图片的上传和回显功能

    本文主要记录如何用input标签和jquery实现多图片的上传和回显,不会涉及后端的交互,大概的效果看图 效果图 我们从零来做一个这样的demo 第一步: 我们先完善一下我们的页面,默认的input-file标签非常丑,我们美化一下它,不会的可以百度一下,就是外面套个盒子,设置input的opacity为0,然后外面的盒子设计成我们喜欢的样式即可,我就随便做了一下. 大概的样式 还是放一下源码,只谈效果,不放源码的都是耍流氓 这是body <body> <div class="

  • input file上传 图片预览功能实例代码

    input file上传图片预览其实很简单,只是没做过的感觉很神奇,今天我就扒下她神秘的面纱,其实原理真的很简单,下面通过一段代码大家都明白了. 具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="jquery.js"></script>

  • chrome下判断点击input上标签还是其余标签的实现方法

    chrome下判断点击input上标签还是其余标签的实现方法

    想要实现的功能:当input框失焦且点击的不是清除键时,执行reset方法重置input样式,当点击清除键时,执行clear方法,清除input内容. 如图 本想通过如下代码来实现 $(".search-input").focusout(function () { if (document.activeElement.className !== 'close-t') {//close-t为清除键类名 $('.search-input').addClass('search-before'

  • css美化input file按钮的代码方法

    css美化input file按钮的代码方法

    input file在系统默认下的外观: 我们最多通过定义input的border来改变系统默认的外观:如果要让浏览按钮更漂亮一点,我们想定义它的背景颜色,甚至想用背景图片来代替,通过css定义input flie还真是办不到的.偶然看到一篇文章:input file 文件选择框美化 作者是把系统默认的按钮设置透明度为0,再定义一个label标签样式,来覆盖透明掉的按钮.按照作者的方法,我也试验了一下,代码如下: input file的另类做法 上传文件: 浏览... [Ctrl+A 全选 注:

  • vue给input file绑定函数获取当前上传的对象完美实现方法

    HTML <input type="file" @change="tirggerFile($event)"> JS(vue-methods) tirggerFile : function (event) { var file = event.target.files; // (利用console.log输出看结构就知道如何处理档案资料) // do something... } 如果直接在绑定的函数中传入this,则不能正确获取,且不能获取到相关的inp

  • vue项目input标签checkbox,change和click绑定事件的区别说明

    vue项目input标签checkbox,change和click绑定事件的区别说明

    目录 input标签checkbox,change和click绑定事件的区别 input标签中checkbox类型的相关操作总结 一.checked属性 二.操作 三.关于checkbox的其他操作 input标签checkbox,change和click绑定事件的区别 我们经常在vue开发项目的过程中,遇到需要对input框使用v-modal的这种情况,在有的时候,不光需要双向数据绑定,还需要在改变数据之后绑定其它的操作,那么问题来了,你是使用@change绑定事件还是使用@click绑定事件

  • ionic cordova一次上传多张图片（类似input file提交表单)的实现方法

    我们可以通过cordova提供的插件调用摄像头或图库选择需要的图片上传,按cordova官方的方法,每次选择完后就直接上传,这并不符合用户的习惯,最好的用户习惯是用户选择完需要的图片,并可在本地预览,接着用户再次打开摄像头或图库再次选择图片,接着预览,对于不需要的图片删除,最后确定可以后,再一次性上传所有图片.显然这种方式,cordova是不支持,那要如何实现呢,以下是我的方法: 通过调用$cordovaImagePicker.getPictures该方法打开图库,获得图片的URL地址,ps:相

随机推荐