ATTRと比較して、PROPは1.6.1で新しいです。どちらも中国の意味から理解されており、属性（属性とプロパティ）を取得/設定する方法です。ウィンドウまたはドキュメントで.attr（）メソッドを使用することは、jquery 1.6の前に正常に実行できないということです。ウィンドウやドキュメントに属性がないためです。小道具が生まれました。
私たちはそれらの違いを知りたいので、彼らのソースコードを見るのが最善であり、コードの長さに怖がることはありません。重要な文章のみを見てみましょう。
attr：function（elem、name、value、pass）{var ret、hooks、notxml、ntype = elem.nodetype; //テキスト、コメント、属性ノードで属性を取得/設定しないでください（！elem || ntype === 3 || ntype === 8 || ntype === 2）{return; } if（pass && jquery.isfunction（jquery.fn [name]））{return jquery（elem）[name]（value）; } //属性がサポートされていない場合のプロップへのフォールバック} notxml = ntype！== 1 || ！jquery.isxmldoc（elem）; //すべての属性は小文字です//（notxml）{name = name.tolowercase（）; hooks = jquery.attrhooks [name] || （rboolean.test（name）？boolhook：nodehook）; } if（value！== undefined）{if（value === null）{jQuery.Removeattr（Elem、name）;戻る; } else if（hooks && "set" in hooks && notxml &&（ret = hooks.set（elem、value、name））！== undefined）{return return; } else {elem.setattribute（name、value + ""）;返品値。 }} else if（hooks && "get" in fooks && notxml &&（ret = hooks.get（elem、name）！== null）{return ret; } else {ret = elem.getattribute（name）; //存在しない属性はnullを返し、未定義のreturn ret === nullに正規化しますか？未定義：ret; }}プロップメソッドコード（jQueryバージョン1.8.3）
プロップ：function（elem、name、value）{var ret、hooks、notxml、ntype = elem.nodetype; //テキスト、コメント、属性ノードでプロパティを取得/設定しないでください（！elem || ntype === 3 || ntype === 8 || ntype === 2）{return; } notxml = ntype！== 1 || ！jquery.isxmldoc（elem）; if（notxml）{//名前と添付フックname = jquery.propfix [name] ||名前; hooks = jquery.prophooks [name]; } if（value！== undefined）{if（hooks && "set" in fooks &&（ret = hooks.set（elem、value、name））！== undefined）{return ret; } else {return（elem [name] = value）; }} else {if（hooks && "get" in hooks &&（ret = hooks.get（elem、name））！== null）{return ret; } else {return elem [name]; }}}ATTRメソッド、2つの最も重要なコードライン、ELEM.SETATTRIBUTE（name、value + ""）とret = elem.getattribute（name）では、属性要素ノードによって動作するDOM API SetAttributeとGetattributeメソッドが明らかです。
Propメソッドでは、コードの最も重要な2つの行、return（elem [name] = value）およびreturn elem [name]で、document.getelementbyid（el）[name] = valueとして理解できます。これはJSオブジェクトに変換されます。
原則を理解しているので、例を見てみましょう。
<入力型= "チェックボックス" id = "test" abc = "111" />
$（function（）{el = $（ "＃test"）; console.log（el.attr（ "style"））; // undefined console.log（el.prop（ "style"））; // cssstyledeclaration object console.log（document.getelementbyid（ "test"）。スタイル）;el.attr（ "style"）は、attrが取得したオブジェクト属性ノードの値であるため、定義されていません。明らかに、現時点では属性ノードはないため、自然出力は未定義です。
El.Prop（ "Style"）CSSTYLELEDECLARATIONオブジェクトを出力します。 DOMオブジェクトの場合、ネイティブスタイルオブジェクト属性があるため、スタイルオブジェクトは出力です。
document.getElementById（ "test"）。スタイルは上記と同じです
次の外観：
el.attr（ "abc"、 "111"）console.log（el.attr（ "abc"））; // 111 Console.log（el.Prop（ "ABC"））; //未定義
まず、ATTRメソッドを使用して、このオブジェクトにABCノード属性を追加します。111の値で、HTMLの構造も変更されていることがわかります。
el.attr（ "ABC"）出力は111で、これは正常です
el.prop（ "ABC"）出力は未定義です。ABCはこのプロパティノードにあるため、Propを介して取得することはできません。
el.Prop（ "ABC"、 "222"）; console.log（el.attr（ "abc"））; // 111 Console.log（el.Prop（ "ABC"））; // 222
次に、値222のProPメソッドを使用してこのオブジェクトのABC属性を設定します。HTMLの構造が変更されていないことがわかります。出力の結果は説明されません。
上記は原則を明確に説明しており、自分で使用しているものを把握できます。
Checked、Selected、Readonly、Disabledなどのプロパティに遭遇した場合、次のようなPROPメソッドを使用する方が明らかに良いことがあります。
<入力型= "チェックボックス" id = "test" checked = "checked" />
console.log（el.attr（ "checked"））; // Checked Console.log（el.prop（ "checked"））; // true Console.log（el.attr（ "disabled"））; // undefined console.log（el.prop（ "disabled"））; //間違い
明らかに、ブール値は、次の処理を文字列値よりも妥当とします。
詩JSパフォーマンスの清潔さがある場合、属性がDOM属性ノードにアクセスする必要があるため、明らかにPROPパフォーマンスが高くなります。DOMへのアクセスは最も時間がかかります。この状況は、複数のオプションと選択されていないシナリオに適用されます。
一部のブラウザは無効にしてチェックされるだけで、他のブラウザは無効= "disabled"、checked = "checked"を記述する必要があることを誰もが知っています。たとえば、attr（ "checked"）を使用してチェックボックスのチェック済みプロパティを取得する場合、選択すると値を取得できます。値は「チェック」されますが、選択しない場合、未定義です。
JQは、これらのプロパティを取得するための新しい方法「Prop」を提供します。これは、この問題を解決するためです。過去には、ATTRを使用してチェックされたプロパティを取得し、「チェック」と「」を返しましたが、Propメソッドを使用してプロパティを取得し、trueとfalseを返します。
それで、attr（）を使用するのはいつ、そしてProp（）を使用するのはいつですか？
1.属性名を追加します。この属性は有効になります。 prop（）を使用する必要があります。
2。真および偽の使用prop（）を持つ2つのプロパティがあります。
3。他の人にattr（）を使用します。
プロジェクトでJQueryをアップグレードするときは、誰もがこれに注意を払う必要があります！
以下は、attr（）とprop（）の使用に関する公式の提案です。
以下は、attr（）とprop（）の使用に関する公式の提案です。