jQuery .val() 与 .attr("值")

Posted 2023-05-09

技术标签:

【中文标题】jQuery .val() 与 .attr("值")【英文标题】：jQuery .val() vs .attr("value") 【发布时间】：2012-01-08 21:56:30 【问题描述】：

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

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

什么可以解释$obj.attr("value") 在一种情况下按预期工作，但在另一种情况下却不行？

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

【问题讨论】：

jQuery .val() 与 .attr()：***.com/questions/4837133/… 真正的原因是val() 只能从特定类型的标签中获取值，例如您可以使用val() 获取输入的值，但是如果您将value 属性添加到a 标签或 div 标签，它不会工作。你必须使用.attr("value") 【参考方案1】：

对象属性和对象属性

之间存在很大的区别

请参阅此问题（及其答案）了解其中的一些差异：.prop() vs .attr()

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

【讨论】：

@Neal ：我猜你的意思是 val() 获取/设置properties vs attr() 获取/设置attributes，只是添加该评论，因为我第一次没有得到它我读了你的回答。也许您可以添加此信息以澄清？顺便说一句，答案很好。【参考方案2】：

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

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

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

【讨论】：

关于处理<select> 元素时遇到的差异的重要说明。这就是吸引我的原因。【参考方案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代码sn-ps一一看输出。

带有 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 代码的输出将是“未定义”，因为最初没有选择文件，因此该值未定义。使用 val() 更好，因为它获取当前值。

为了查看返回未定义值的原因，请尝试在您的 HTML 中使用此代码，您会看到现在 attr.('value') 总是返回 'test'，因为该值是 'test' 而之前是未定义。

<input id ="myfile" type="file" value='test'/>

希望对你有用。

【讨论】：

【参考方案4】：

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

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

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

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

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

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

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

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

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

希望对你有帮助。

【讨论】：

【参考方案5】：

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

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

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

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

【讨论】：

【参考方案6】：

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

【讨论】：

【参考方案7】：

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

【讨论】：

【参考方案8】：

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

你也可以使用 .attr() 获取 id 的值

【讨论】：

【参考方案9】：

这个例子可能有用：

<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 或更高版本。

【讨论】：

【参考方案10】：

更多示例... attr() 是多种多样的，val() 只是其中之一！ Prop 是 boolean 是不同的。

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

【讨论】：

【参考方案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>

【讨论】：

【参考方案12】：

如果您为属性和属性获得相同的值，但在 HTML 上仍然看到不同的值，请尝试以下方法获取 HTML 值：