val和attr和prop获取数据中的区别

var vals = $('#id').val();

var attrs = $('#id').attr('value');

var props = $('#id').prop('value');

代码如上所示，为输入框设定了初始值：123，此时点击按钮，控制台输出为：

?

1

2

3

123

123

123

改变输入框的值，此时控制台输出： 　　　

?

1

2

3

123

123thgf

123thgf

如果我们没有为文本框设定初始值，即删除value=”123”后，依旧使用如上js代码，则相应输出如下：

undefined

attr()输出为undefined，而prop()和val()输出为“空”。

输入value值后：控制台输出为：

?

1

2

3

undefined

asdasd

asdasd

attr()输出依然为undefined，而prop()和val()则输出实际值。

可见，prop()和val()都能获取到文本框的实际value值，而attr()获取的则始终为文档结构中的value的属性值，与文本框实际值无关，并不会变化。