input的value,显示和代码值的改变

问题：

在两处事件监听分别使用了两种方式修改input的value：
1. $('#id').attr('value','存储的值1');
2. $('#id').val('存储的值2');

当未曾使用方式2时，通过方式1修改时能准确修改value并显示。
当使用过方式2修改value之后，通过方式1修改value时，在控制台能发现已经修改input的value，但是页面上显示的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的值。

（翻译来源：https://www.ssfiction.com/archives/90971）

 

人话：

$.attr("value"，value) 修改的是标记，就是初值
$.val(value) 修改的是值域，就是用户可交互改变的

 

问题解决：

我累了