jQuery attr vs 道具? [英] jQuery attr vs prop?

问题描述

现在这不仅仅是另一个有什么不同的问题，我已经做了一些测试(http://jsfiddle.net/ZC3Lf/) 修改

的prop和attr</form> 输出为:

Now this isn't just another What's the difference question, I have done some tests(http://jsfiddle.net/ZC3Lf/) modifying the prop and attr of <form action="/test/"></form>​ with the output being:

1) prop 修改测试
道具:http://fiddle.jshell.net/test/1
属性:http://fiddle.jshell.net/test/1

2) Attr 修改测试
道具:http://fiddle.jshell.net/test/1
属性:/test/1

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

4) Prop 然后 Attr 修改测试
道具:http://fiddle.jshell.net/test/11
属性:http://fiddle.jshell.net/test/11

就我所知，现在我对一些事情感到困惑:
Prop:通过 JavaScript 进行任何修改后当前状态的值
属性:页面加载时在 html 中定义的值.

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.

现在如果这是正确的，

• 为什么修改 prop 似乎使 action 完全合格，相反为什么修改属性却没有?
• 为什么修改1)中的prop会修改属性，那个对我来说没有意义?
• 为什么修改 2) 中的 attr 会修改属性，它们是否意味着以这种方式链接?

• Why does modifying the prop seem to make the action fully qualified, and conversely why does modifying the attribute not?
• Why does modifying the prop in 1) modify the attribute, that one makes no sense to me?
• Why does modifying the attr in 2) modify the property, are they meant to be linked that way?

---

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 />');

推荐答案

很遗憾，您的链接都不起作用 :(

Unfortunately none of your links work :(

尽管有一些见解，attr 适用于所有属性.prop 用于属性.

Some insight though, attr is for all attributes. prop is for properties.

在较旧的 jQuery 版本 (<1.6) 中，我们只有 attr.要获取诸如 nodeName、selectedIndex 或 defaultValue 之类的 DOM 属性，您必须执行以下操作:

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:

That sucked, so prop was added:

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

这很棒，但令人讨厌的是这不向后兼容，因为:

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

<input type="checkbox" checked>

没有checked的属性，但它有一个叫做checked的属性.

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

所以，在 1.6 的最终版本中，attr 也做了 prop 以便事情没有中断.有些人希望这是一个彻底的休息，但我认为做出了正确的决定，因为事情并没有完全破裂！

So, in the final build of 1.6, attr does also do prop so that things didn't break. Some people wanted this to be a clean break, but I think that the right decision was made as things didn't break all over the place!

关于:

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

Prop: The value in it's current state after any modifications via JavaScript

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

Attr: The value as it was defined in the html on page load.

这并不总是正确的，因为属性实际上被更改了很多次，但是对于checked等属性，没有要更改的属性，因此您需要使用prop.

This isn't always true, as many times the attribute is actually changed, but for properties such as checked, there isn't an attribute to change, so you need to use prop.

参考文献:

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

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

这篇关于jQuery attr vs 道具?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！