现在这不仅仅是另一个What's the difference question,我有done some tests(http://jsfiddle.net/ZC3Lf/)个修改<form action="/test/"></form>​propattr,输出是:

1) prop Modification test
props :http://fiddle.jshell.net/test/1
属性:http://fiddle.jshell.net/test/1

2) Attr Modification test

3) Attr then Prop Modification test
props :http://fiddle.jshell.net/test/11
属性:http://fiddle.jshell.net/test/11

4) Prop then Attr Modification test
Prop: http://fiddle.jshell.net/test/11
Attr: http://fiddle.jshell.net/test/11

Now I am confused about a couple of things, as far as my knowledge goes:
Prop: The value in its current state after any modifications via JavaScript
Attr: The value as it was defined in the html on page load.

Now if this is correct,

  • Why does modifying the prop seem to make the action fully qualified, and conversely why does modifying the attribute not?
  • 为什么修改1)中的prop会修改属性,这对我来说毫无意义?
  • 为什么修改2)中的attr会修改属性,它们是否应该以这种方式链接?


Test Code

HTML

JavaScript

var element = $('form');
var property = 'action';

/*You should not need to modify below this line */

var body = $('body');
var original = element.attr(property);

body.append('<h1>Prop Modification test</h1>');
element.prop(property, element.prop(property) + 1);

body.append('Prop: '+element.prop(property)+'<br />');
body.append('Attr: '+element.attr(property)+'<hr />');

//reset
element.prop(property, original);
element.attr(property, original);

body.append('<h1>Attr Modification test</h1>');
element.attr(property, element.attr(property) + 1);

body.append('Prop: '+element.prop(property)+'<br />');
body.append('Attr: '+element.attr(property)+'<hr />');

//reset
element.prop(property, original);
element.attr(property, original);

body.append('<h1>Attr then Prop Modification test</h1>');
element.attr(property, element.attr(property) + 1);
element.prop(property, element.prop(property) + 1);

body.append('Prop: '+element.prop(property)+'<br />');
body.append('Attr: '+element.attr(property)+'<hr />');

//reset
element.prop(property, original);
element.attr(property, original);

body.append('<h1>Prop then Attr Modification test</h1>');
element.prop(property, element.prop(property) + 1);
element.attr(property, element.attr(property) + 1);

body.append('Prop: '+element.prop(property)+'<br />');
body.append('Attr: '+element.attr(property)+'<hr />');

推荐答案

不幸的是,你的链接都不起作用:(

不过,有些洞察力,attr表示所有属性.prop是关于属性的.

In older jQuery versions (<1.6), we just had attr. To get to DOM properties such as nodeName, selectedIndex, or defaultValue you had to do something like:

var elem = $("#foo")[0];
if ( elem ) {
  index = elem.selectedIndex;
}

太糟糕了,所以加了prop:

index = $("#foo").prop("selectedIndex");

This was great, but annoyingly this wasn't backward compatible, as:

<input type="checkbox" checked>

has no attribute of checked, but it does have a property called checked.

所以,在1.6的最终版本中,attr也可以做prop,这样就不会出现问题.有些人希望这是一次彻底的决裂,但我认为这是一个正确的决定,因为事情并没有彻底决裂!

关于:

Prop:通过JavaScript进行任何修改后处于当前状态的值

Attr:页面加载时在html中定义的值.

这并不总是正确的,因为属性实际上更改了很多次,但对于诸如checked之类的属性,没有要更改的属性,因此需要使用prop.

参考文献:

http://blog.jquery.com/2011/05/03/jquery-16-released/

http://ejohn.org/blog/jquery-16-and-attr

Jquery相关问答推荐

如何根据另一个 radio Select 并切换?

通过 jQuery 提取 application/json 数据

如何使用 jQuery 的 drop 事件上传从桌面拖动的文件?

在 div 中找到第一次出现的类

提醒未保存的表单更改

何时执行 $(document).ready 回调?

[本机代码]是什么意思?

如何制作 AngularJS 指令来停止传播?

数据表警告(表 id = 'example'):无法重新初始化数据表

jQuery 的 ajax 默认超时值是多少?

如何在单击时 Select 多选 Select 框的所有选项?

调用 jquery ajax - .fail vs. :error

如何使div全屏?

在完成前一个请求之前中止新的 AJAX 请求

CORS POST 请求可以使用纯 JavaScript,但为什么不使用 jQuery?

获取没有在css中设置高度的div的高度

如果一个元素正在被动画,我如何用 jQuery 找出?

Ajax 处理中的无效 JSON 原语

为什么我应该创建异步 WebAPI 操作而不是同步操作?

jQuery append() 与 appendChild()