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

Question

Pensé que estos dos eran iguales, pero parece que no. En general, he estado usando $obj.attr("value") para trabajar con campos de formulario, pero en la página que estoy construyendo actualmente, $obj.attr("value") no devuelve el texto que ingresé en mi campo. Sin embargo, $obj.val() sí lo hace.

En una página diferente que he construido, $obj.attr("value") y $obj.val() devuelven el texto ingresado en el campo del formulario.

¿Qué podría explicar $obj.attr("value") funcionando como se esperaba en un caso pero no en otro?

¿Cuál es la forma correcta de establecer y recuperar el valor de un campo de formulario mediante jQuery?

Answer 1

La forma correcta de establecer y obtener el valor de un campo de formulario es usando el método .val().

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

con jQuery 1.6 hay un nuevo método llamado .prop().

A partir de jQuery 1.6, los .attr() devuelve el método indefinido Se atributos que no han sido establecidos. Además, .attr() no se debe usar en objetos planos, matrices, la ventana o el documento. Para recuperar y cambiar las propiedades DOM, use el método .prop().

Answer 2

Dado que jQuery 1.6, attr() devolverá el valor original de un atributo (el que está en el marcado). Es necesario utilizar prop() para obtener el valor actual:

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

Sin embargo, el uso de val() no siempre es el mismo. Por ejemplo, el valor de <select> elementos es en realidad el valor de su opción seleccionada. val() tiene eso en cuenta, pero prop() no. Por esta razón, se prefiere val().