jQuery の prop と attr の違いの紹介例 learning_jquery

1. .prop( propertyName )
一致するセットの最初の要素の Property の値を取得します
2.
.prop( propertyName, value )
.prop(map )
.prop (propertyName, function(index, oldPropertyValue))
一致する要素セットに 1 つ以上の属性を設定します

.prop() と .attr() の違い

以下は jQuery1 についてです。 .6 および 1.6.1 での Attributes モジュールへの変更点の説明、および .attr() メソッドと .prop() メソッドの推奨される使用法

Attributes モジュールへの変更点属性とプロパティの間のあいまいさを取り除くためのものですが、1.6 より前のすべてのバージョンでは属性とプロパティの処理に単一のメソッド (.attr()) が使用されていたため、jQuery コミュニティで混乱を引き起こしました。しかし、古い .attr() メソッドにはいくつかのバグがあり、保守が困難です。 jQuery1.6.1 は属性モジュールを更新し、いくつかのバグを修正しました。

elem.checked true (ブール値) チェックボックスの状態に応じて変化します
$(elem).prop("checked") true (ブール値) チェックボックスの状態に応じて変化します
elem.getAttribute("checked ") "checked" (String) チェックボックスの初期状態; 変更されません
$(elem).attr("checked")(1.6) "checked" (String) チェックボックスの初期状態; 変更されません
$(elem).attr("checked")(1.6.1 ) "checked" (文字列) チェックボックスの状態に応じて変化します
$(elem).attr("checked")(1.6 より前) true (ブール値) チェックボックスの状態で変更されました

if ( elem.checked )
if ( $(elem).prop("checked") )
if ( $(elem).is(":checked ") )

これら 3 つはすべてブール値を返します。

jQuery 1.6 の .attr() メソッドの変更をより明確にするために、以前のバージョンの jQuery では正常に動作していた .attr() の使用例をいくつか示します。代わりに () メソッドを使用する必要があります:

まず、ウィンドウまたはドキュメントに属性を含めることができないため、ウィンドウまたはドキュメントで .attr() メソッドを使用することは jQuery 1.6 では正しく機能しません。これらにはプロパティ (location やreadyState など) が含まれており、.prop() メソッドを使用するか、単純にネイティブ JavaScript メソッドを使用して操作する必要があります。 jQuery 1.6.1 では、ウィンドウとドキュメントで .attr() を使用すると、エラーがスローされるのではなく、.prop を使用するように自動的に変換されます。

第 2 に、checked、selected、および前述のその他のブール属性は、これらの属性と対応するプロパティの間に特別な関係があるため、特別に扱われます。基本的に、属性は次の HTML に表示されるものです。



checked などのブール属性は、デフォルト値または初期値にのみ設定されます。チェックボックス要素では、チェックボックス要素が選択されているかどうかに関係なく、ページの読み込み時にチェックされた属性が設定されます。

プロパティは、ブラウザが現在の値を記録するために使用するものです。通常、プロパティは対応する属性 (存在する場合) を反映します。しかし、これはブール属性の場合には当てはまりません。ブール値プロパティは、ユーザーがチェックボックス要素をクリックするか、select 要素のオプションを選択すると、最新の状態に保たれます。ただし、対応するブール属性は異なります。前述したように、これらはブラウザによって初期値を保存するためにのみ使用されます。

$(":checkbox").get(0).checked = true;

// $(":checkbox:first").prop("checked" と同じ) , true);

jQuery1.6 では、次のメソッドを使用して checked を設定します。 >
チェックボックス要素は設定が必要なプロパティであるためチェックされませんが、設定はすべて初期値になります。

しかし、jQuery 1.6 がリリースされると、ブラウザーがページの読み込みのみを考慮する場合、いくつかの値を設定することは特に役に立たないことを jQuery チームは理解しました。したがって、下位互換性と .attr() メソッドの有用性を維持するために、jQuery 1.6.1 では引き続き .attr() メソッドを使用してこれらのブール属性を取得および設定できます。

最も一般的な属性は、checked、selected、disabled、readOnly です。ただし、jQuery 1.6.1 がサポートする .attr() の使用によるブール属性/プロパティの動的取得と設定の完全なリストは次のとおりです:

autofocus、autoplay、async、checked、controls、defer、disabled、

hidden、loop、multiple、open、readonly、required、scoped、 selected

それでも使用することをお勧めします。 .prop() メソッド これらのブール属性/プロパティを設定するには、これらのユースケースが .prop() メソッドを使用するように変換されていなくても、コードは jQuery 1.6.1 で通常どおり実行されます。

以下は、いくつかの属性とプロパティのリストです。通常の状況では、それらを取得および設定するには、対応するメソッド (以下のリストを参照) を使用する必要があります。以下は最初の使用法ですが、.attr() メソッドはすべての属性で機能します。

注: 一部の DOM 要素プロパティも以下にリストされていますが、新しい .prop() メソッドでのみ実行されます


* 例: window.location
** 必要に応じて (必要に応じて) .width()

.attr() も .prop() も値の取得/設定に使用しないでください。代わりに .val() メソッドを使用してください (.attr("value","somevalue") を使用しても、1.6 より前と同様に実行を続けることができます)

3.推奨される使用法

.prop() メソッドは、ブール属性/プロパティ、および HTML に存在しないプロパティ (例: window.location) を処理するために使用する必要があります。他のすべての属性 (HTML に表示される属性) は、引き続き .attr() メソッドを使用して操作できます。

上記の概要は十分に明確に説明されているので、これ以上要約する必要はありません。

参考:
http://hxq0506.iteye.com/blog/1046334