jQuery .val()vs .attr("value")

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

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

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

jQuery 1.6 中有一个新方法称为.prop().

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