attributes vs properties --记于jquery attr不能正确更新input的value值后

  最近做的前端页面是个单页面应用,需要经常给个input赋值什么的。

  我常用的方式是$('#id').attr('value','XXXX'),一直可以正常使用。今天突然发现一个问题,某个要赋值的input标签死活不展示value,查看html代码,神奇的发现value还是有值的。

也就是说,这个input标签的value属性有值,但是不能展示。

  折腾一番后,发现如果使用$('#id').val('XXXX')后,则不出现此问题。

       网上查找一番后,发现了attributes与properties的区别。

       简单的讲,当你写html源码时,你可以为你的html标签赋值attribute。而当浏览器解析html生成dom节点时,这个节点就有了properties。用户看到的是浏览器解析并渲染后的页面,也就是说,我们看到的是dom节点的properties值。

       通常来讲,properties和attribute其中之一发生改变时,另一个值也会相应的改变。但是唯独Input 标签的 value 值特殊。properties值不会跟随attribute值发生改变。

参考资料:http://stackoverflow.com/questions/6003819/properties-and-attributes-in-html

                  http://stackoverflow.com/questions/5874652/prop-vs-attr

原文地址:https://www.cnblogs.com/qiuyeyaozhuai/p/3542422.html