質問

さて、これは単なる 何が違うのでしょうか？ という質問ではなく、私が持っている はいくつかのテストを行いました(http://jsfiddle.net/ZC3Lf/) を修正しました。 prop と attr の <form action="/test/"></form>​ と出力されます。

1) プロップ修正テスト

プロップ http://fiddle.jshell.net/test/1

Attr: http://fiddle.jshell.net/test/1

2) Attrの変更テスト

プロップ http://fiddle.jshell.net/test/1

Attr: /test/1

3) Attr then Prop Modificationテスト

プロップ http://fiddle.jshell.net/test/11

Attr: http://fiddle.jshell.net/test/11

4) Prop then Attr Modificationテスト

プロップ http://fiddle.jshell.net/test/11

Attr: http://fiddle.jshell.net/test/11

今、私の知識の範囲では、いくつかのことで混乱しています。

Prop: JavaScriptで変更した後の現在の状態での値です。

Attr: ページロード時にhtmlで定義された値。

さて、これが正しいかどうか。

• を修正することは、なぜ prop を修正すると action は完全修飾されるように見えますが、逆になぜ属性を変更するとそうならないのでしょうか？
• なぜ prop で 1) は属性を変更する、それは私には意味がありません？
• を修正することは、なぜ attr で 2) はプロパティを変更しますが、そのようにリンクされることを意味するのでしょうか？

テストコード

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 はプロパティのためのものです。

古いバージョンのjQuery(<1.6)では、単に attr . のようなDOMプロパティを取得するために nodeName , selectedIndex または defaultValue のようにする必要がありました。

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

それは最悪でした、だから prop が追加されました。

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

これは素晴らしいことでしたが、困ったことにこれは後方互換性がありませんでした、として。

<input type="checkbox" checked>

の属性はありません。 checked という属性はありませんが checked .

というわけで、1.6の最終ビルドでは attr はまた prop を行うことで、物事が壊れないようにしました。これをきれいに壊してほしいという人もいましたが、あちこちで壊れないので、正しい判断だったと思います

についてですが。

提案 JavaScriptで変更された後の現在の状態での値

Attr: ページロード時にhtmlで定義された値。

実際に属性が変更されることも多いので、これが正しいとは限りませんが、checkedなどのプロパティは変更する属性がないので、propを使う必要があります。

参考文献です。

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

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