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

77

我以为这两个是相同的，但似乎不一样。我通常一直在使用$obj.attr("value")表单字段，但是在我当前正在构建的页面上，$obj.attr("value")不会返回我在字段中输入的文本。但是，$obj.val()确实如此。

在不同的页面我已经建立，双方$obj.attr("value")并$obj.val()返回在表单字段中输入的文本。

$obj.attr("value")在一种情况下，但又在另一种情况下，为什么可以按预期工作呢？

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

jquery  forms 
— 摩根码
source
3
jQuery的.VAL（）VS .attr（）：stackoverflow.com/questions/4837133/...
— 阿德里安成为
1
真正的原因是val()只能从某些类型的标签中获取值，例如，可以使用来获取输入的值，val()但是如果将value属性添加到a标签或div标签中，它将无法正常工作。您将不得不使用.attr("value")
— Seraf

Answers:

90

对象属性之间有很大的不同和对象属性

请参阅以下问题（及其答案）以了解一些差异： .prop（）与.attr（）

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

— 纳夫塔利又名尼尔
source
1
@Neal：我想你的意思是val（）获取/设置propertiesvs attr（）获取/设置attributes，只是添加该注释，因为我第一次阅读您的答案时没有得到它。也许您可以添加此信息以进行澄清？好答案顺便说一句。
— Adrien Be
26

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

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

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

— 弗雷德里克·哈米迪（FrédéricHamidi）
source
注意处理<select>元素时遇到的差异。那就是我的意思。
— Canuk 2015年
4

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

希望对您有用。

— s
source
2

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

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

在jQuery 1.6中，有一个名为的新方法.prop()。

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

— 埃姆雷·埃尔坎（Emre Erkan）
source
2

让我们从一个例子中学习。让文本输入字段的默认值为“输入您的姓名”

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

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

两者都将返回“输入您的姓名”

但是，假设您在浏览器中将默认文本更改为“ Jose”。

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

仍会提供默认文本，即“输入您的姓名”。

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

但 .val()会返回“ Jose”，即当前值。

希望能帮助到你。

— 萨罗尼·卡拉（Saloni Kalra）
source
2

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

— 香卡·桑格里
source
1 
jQuery('.changer').change(function () {
    var addressdata = jQuery('option:selected', this).attr('address');
    jQuery("#showadd").text(addressdata);
});
— 哈西默
source
1 
jQuery(".morepost").live("click", function() { 
var loadID = jQuery(this).attr('id'); //get the id 
alert(loadID);    
});

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

— 哈西默
source
1

这个例子可能有用：

<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'）不适用于1.9.1或更高版本的jquery。

— 莫西扎
source
0

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

//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>
展开摘要

— 劲霸
source
0

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>
— 阿萨尔·扎法尔（Ashar Zafar）
source
-2

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

— 戴维·赫德伦德
source
-4

我一直以来都使用过.val()，老实说，我什至不知道您可以使用获得价值.attr("value")。我也使用.val（）设置表单字段的值。$('#myfield').val('New Value');

— 迈萨姆·穆拉（Meisam Mulla）
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.