Question

我们正在使用一些非常简单的jQuery来更改文本字段的值：

<body>
  <form>       
   {{> experienceRow }}
  </form>
  <button class="addExperience">Add Experience</button>
</body>

<template name="experienceRow">
  <div id={{experienceNumber}} class='experienceRow'>
    <input type="text" placeholder="name" value="" class="name">
    <input type="text" placeholder="address" value="" class="address">
    <input type="text" placeholder="phone" value="" class="phone">
  </div>        
</template>

这会更改浏览器中显示的值，但不会更改源代码中文本字段的value属性。

现在，请考虑一下：

<input type="text" name="rabatt" id="sonderrabatt" value="">
var sonderrabatt = 10;
$('#sonderrabatt').val(sonderrabatt);

将输入类型更改为隐藏，值属性更改！

1.这是否意味着我们必须执行以下操作来更改浏览器中显示的输入字段值及其源代码中的value属性？：

<input type="hidden" name="rabatt" id="sonderrabatt" value="">
var sonderrabatt = 10;
$('#sonderrabatt').val(sonderrabatt);

2.为什么.val（）适用于type = hidden而NOT适用于type = text输入字段？

Answer 1

.val()更改元素属性值，而不是属性值。属性是html在初始渲染时显示的属性，属性包含DOM 对象中的实际值，可以多次更改但在初始渲染后可能不会以HTML格式显示。

.val(myValue)是.prop('value', myValue)

的简写

在纯JavaScript中

element.value = myValue; // set property on DOM object
element.setAttribute('value', myValue); // set attribute on HTML element

记住

DOM元素（HTML） - ＆gt;属性
DOM对象（JS） - ＆gt;特性

为什么jquery .val（）只更改隐藏输入字段的值属性？

1 个答案: