Question

我原以为这两个是相同的，但它们似乎不是。我一般使用$obj.attr("value")来处理表单字段，但在我正在构建的页面上，$obj.attr("value")不会返回我在字段中输入的文本。但是，$obj.val()会这样做。

在我构建的其他页面上，$obj.attr("value")和$obj.val()都会返回在表单字段中输入的文本。

什么可以说明$obj.attr("value")在一个案例中按预期工作但在另一个案例中却没有？

使用jQuery设置和检索表单字段值的正确方法是什么？

Answer 1

对象属性与对象属性

之间存在大差异

有关一些差异，请参阅此问题（及其答案）：.prop() vs .attr()

要点是.attr(...)只在开始时获取对象值（创建html时）。 val()获取对象的属性值，该值可能会多次更改。

Answer 2

从jQuery 1.6开始，attr()将返回属性的原始值（标记本身中的那个）。您需要使用prop()来获取当前值：

var currentValue = $obj.prop("value");

但是，使用val()并不总是一样的。例如，<select>元素的值实际上是其所选选项的值。 val()考虑到了这一点，但prop()没有考虑到这一点。因此，val()是首选。

Answer 3

PS：这不是答案，只是对上述答案的补充。

仅仅为了将来的参考，我提供了一个很好的例子，可以帮助我们清除疑虑：

尝试以下方法。在这个例子中，我将创建一个文件选择器，可用于选择文件，然后我将尝试检索我选择的文件的名称： 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>

code.js文件包含以下jQuery代码。尽量使用两者 jQuery代码片段逐一查看并查看输出。

带有attr（'value'）的jQuery代码：

$('#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'/>

我希望它对你有用。

Answer 4

设置和获取表单字段值的正确方法是使用.val()方法。

$('#field').val('test'); // Set
var value = $('#field').val(); // Get

使用jQuery 1.6，有一种名为.prop()的新方法。

从jQuery 1.6开始，.attr()方法返回属性的undefined 尚未设定。另外，不应该使用.attr（）普通对象，数组，窗口或文档。要检索和更改DOM属性，使用.prop（）方法。

Answer 5

为了获取任何输入字段的value，您应该始终使用$element.val()因为jQuery句柄根据元素类型的浏览器检索正确的值。

Answer 6

jQuery('.changer').change(function () {
    var addressdata = jQuery('option:selected', this).attr('address');
    jQuery("#showadd").text(addressdata);
});

Answer 7

jQuery(".morepost").live("click", function() { 
var loadID = jQuery(this).attr('id'); //get the id 
alert(loadID);    
});

您还可以使用.attr（）
获取id的值

Answer 8

这个例子可能很有用：

<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的版本更改为1.9.1或更新版本，您将在第一个警报中看到“未定义”。 attr（'value'）不适用于jquery版本1.9.1或更新版本。

Answer 9

让我们从一个例子中学习。让我们有一个文本输入字段，默认值=＆＃34;输入您的姓名＆＃34;

var inp = $("input").attr("value");

var inp = $("input").val();

两者都将返回＆＃34;输入您的姓名＆＃34;

但是假设您将默认文本更改为＆＃34; Jose＆＃34;在浏览器中。

var inp = $("input").attr("value");

仍将提供默认文字，即＆＃34;输入您的姓名＆＃34;。

var inp = $("input").val();

但.val()将返回＆＃34; Jose＆＃34;，即当前值。

希望它有所帮助。

Answer 10

示例更多... attr（）是多种多样的，val（）只是一个！ Prop是布尔值不同。

＆＃13;

//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');

＆＃13;

<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>

＆＃13;

Answer 11

jquery - 在输入文本框中获取值

<script type="text/javascript"> 

jQuery(document).ready(function(){

var classValues = jQuery(".cart tr").find("td.product-name").text();
classValues = classValues.replace(/[_\W]+/g, " ")

jQuery('input[name=your-p-name]').val(classValues);

//alert(classValues);

});

</script>

Answer 12

如果您为属性和属性获得相同的值，但仍然在HTML上看到它不同，请尝试使用HTML来获取HTML：

$('#inputID').context.defaultValue;

Answer 13

在attr('value')中，您明确表示您正在寻找名为vaule的属性的值。最好使用val()，因为这是jQuery的开箱即用功能，用于从表单元素中提取值。

Answer 14

我一直使用.val()并且说实话我甚至不知道你可以使用.attr("value")获得价值。我使用.val（）以及ex来设置表单字段的值。 $('#myfield').val('New Value');

jQuery .val（）vs .attr（“value”）

14 个答案: