さて、これはちょうど別されていない違いの質問は何、私がしているいくつかのテスト（http://jsfiddle.net/ZC3Lf/）を行って修正するpropとattrの<form action="/test/"></form>​ 出力がされた状態での：

1）プロップ変更テスト
プロップ：http://fiddle.jshell.net/test/1
属性：http://fiddle.jshell.net/test/1

2）属性変更テストの
プロップ：http://fiddle.jshell.net/test/1
属性：/test/1

3）Attr、次にProp変更テスト
Prop：http://fiddle.jshell.net/test/11
Attr：http://fiddle.jshell.net/test/11

4）小道具、次にAttr変更テスト
小道具：http://fiddle.jshell.net/test/11
属性：http://fiddle.jshell.net/test/11

：今、私は私の知識が行く限り、物事のカップルについて混乱してい
プロップを： JavaScriptを経由して任意の変更後の現在の状態で値
：Attrのそれは、ページの読み込みのHTMLで定義された通りの値です。

これが正しければ、

• なぜ属性を変更すると完全修飾になったpropように見えaction、逆に属性を変更しないのですか？
• propinを1)変更すると属性が変更されるのはなぜですか？
• attrinを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

.propと.attrの違いを確認する明確なケースがあります

以下のHTMLを検討してください。

<form name="form" action="#">
    <input type="text" name="action" value="myvalue" />
    <input type="submit" />
</form>
<pre id="return">
</pre>

そしてjQueryを使用した以下のJS：

$(document).ready(function(){
    $("#return").append("$('form').prop('action') : " + $('form').prop('action') + '\r\n');
    $("#return").append("$('form').attr('action') : " + $('form').attr('action') + '\r\n');
    $("#return").append("document.form.action : " + document.form.action);
});

次の出力を作成します。

$('form').prop('action') : [object HTMLInputElement]
$('form').attr('action') : #
document.form.action : [object HTMLInputElement]

私はこれを試しました

console.log(element.prop(property));
console.log(element.attr(property));

以下のように出力します

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

これはaction、で読み取られた場合にのみ正規化されることを示している可能性がありますprop。

jquery 1.6.1+以降、attr（）は1.6以前と同様にプロパティを返す/変更します。したがって、テストはあまり意味がありません。

戻り値の小さな変更に注意してください。

例えば

attr（ 'checked'）：1.6より前のtrue / falseは、1.6.1以降、returendです。“ checked” / undefinedが返されます。

attr（ 'selected'）：1.6より前のtrue / falseが返されます。1.6.1から「selected」/ undefinedが返されます

ドイツ語でのこのトピックの詳細な概要は、次の場所にあります。

http://mabraham.de/jquery-prop-attr-val-richtig-verwenden/