我曾经认为这两者是相同的，但似乎不是。通常我使用 $obj.attr("value") 来处理表单字段，但在我当前正在构建的页面上，$obj.attr("value") 不返回我输入的文本。然而，$obj.val() 可以。
在另一个我构建的页面上，$obj.attr("value") 和 $obj.val() 都会返回在表单字段中输入的文本。
是什么原因导致 $obj.attr("value") 在某些情况下按预期工作，而在另一些情况下不工作？
使用jQuery设置和检索表单字段值的正确方式是什么？
一个对象的 属性 和 特性 之间有很大的区别。
查看这个问题（以及它的答案），可以了解其中的一些差异：.prop() vs .attr()
要点在于，.attr(...) 只能在创建 html 时获取对象的值。而 val() 获取的是对象的 属性 值，该值可以多次更改。
注意：这不是一个答案，仅仅是对上面答案的一个补充。
为了以后参考，我提供了一个好的例子，可能有助于我们消除疑惑:
请尝试以下步骤。在这个例子中，我将创建一个文件选择器，可以用来选择一个文件，然后尝试检索所选文件的名称: 以下是HTML代码:
<html>
<body>
<form action="#" method="post">
<input id ="myfile" type="file"/>
</form>
<script type="text/javascript" src="jquery.js"> </script>
<script type="text/javascript" src="code.js"> </script>
</body>
</html>
$('#myfile').change(function(){
alert($(this).attr('value'));
$('#mybutton').removeAttr('disabled');
});
使用val()的jQuery代码：
$('#myfile').change(function(){
alert($(this).val());
$('#mybutton').removeAttr('disabled');
});
输出：
使用attr('value')的jQuery代码的输出将是“undefined”。 使用val()的jQuery代码将返回您选择的文件名。
说明： 现在，您可能很容易理解前面的答案想要传达什么。使用attr('value')的jQuery代码的输出将为'undefined'，因为最初没有选择文件，因此该值未定义。最好使用val()，因为它可以获取当前值。
为了查看为什么返回未定义值，请在您的HTML中尝试此代码，您将看到现在attr.('value')始终返回“test”，因为该值为“test”，之前未定义过。
<input id ="myfile" type="file" value='test'/>
让我们通过一个例子来学习。 假设有一个文本输入框，其默认值为“请输入您的姓名”。
var inp = $("input").attr("value");
var inp = $("input").val();
两者都会返回“输入您的姓名”
但是假设您在浏览器中将默认文本更改为“Jose”。
var inp = $("input").attr("value");
依旧会给出默认文本，即“输入您的名字”。
var inp = $("input").val();
.val() 方法会返回当前值，比如 "Jose"。希望这能有所帮助。$element.val()，因为jQuery会根据元素类型的浏览器来处理检索正确的值。<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
</head>
<body>
<input id="test" type="text" />
<button onclick="testF()" >click</button>
<script>
function testF(){
alert($('#test').attr('value'));
alert( $('#test').prop('value'));
alert($('#test').val());
}
</script>
</body>
</html>jQuery('.changer').change(function () {
var addressdata = jQuery('option:selected', this).attr('address');
jQuery("#showadd").text(addressdata);
});
jQuery(".morepost").live("click", function() {
var loadID = jQuery(this).attr('id'); //get the id
alert(loadID);
});
例如更多...attr() 是多样的，val() 只是其中之一！Prop 是布尔值不同。
//EXAMPLE 1 - RESULT
$('div').append($('input.idone').attr('value')).append('<br>');
$('div').append($('input[name=nametwo]').attr('family')).append('<br>');
$('div').append($('input#idtwo').attr('name')).append('<br>');
$('div').append($('input[name=nameone]').attr('value'));
$('div').append('<hr>'); //EXAMPLE 2
$('div').append($('input.idone').val()).append('<br>');
$('div').append('<hr>'); //EXAMPLE 3 - MODIFY VAL
$('div').append($('input.idone').val('idonenew')).append('<br>');
$('input.idone').attr('type','initial');
$('div').append('<hr>'); //EXAMPLE 3 - MODIFY VALUE
$('div').append($('input[name=nametwo]').attr('value', 'new-jquery-pro')).append('<br>');
$('input#idtwo').attr('type','initial');<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="hidden" class="idone" name="nameone" value="one-test" family="family-number-one">
<input type="hidden" id="idtwo" name="nametwo" value="two-test" family="family-number-two">
<br>
<div></div>
val()只能获取特定类型标签的值，例如您可以使用val()获取输入框的值，但如果您将value属性添加到a标签或div标签中，则无法使用val()。您需要使用.attr("value")。 - Seraf