(注: これは .prop() と.attr()の重複であると言いたくなるかもしれませんが、そうではないと思います。その投稿は.prop()との違いを説明する素晴らしい仕事をして.attr()いますが、いつこれが、この質問の目的です。)
.prop()との違いに関する StackOverflow に関する多くの質問/回答を読んだにもかかわらず、.attr()この問題についてはまだ多くの混乱が見られます。
あるメソッドが他のメソッドよりも好ましい場合を明確にする StackOverflow に関する決定的な参照を用意すると便利だと思います。これにより、当て推量や、何かが属性なのかプロパティなのかを判断しようとする試みを排除できます。
したがって、どの属性/プロパティを使用するのが望ましいか、どの属性/プロパティを使用するのが望ましい.prop().attr()かを尋ねます。
jQuery 1.9より前に適用可能
以下は、いくつかの属性とプロパティのリストと、それらを取得または設定するときに通常使用するメソッドです。これは推奨される使用方法ですが、この.attr()方法はすべての場合に機能します。
+------------------------------------+------------+-----------+
| Attribute/Property | .attr() | .prop() |
+------------------------------------+------------+-----------+
| accesskey | ✓ | |
| align | ✓ | |
| async | | ✓ |
| autofocus | | ✓ |
| checked | | ✓ |
| class | ✓ | |
| contenteditable | ✓ | |
| disabled | | ✓ |
| draggable | ✓ | |
| href | ✓ | |
| id | ✓ | |
| label | ✓ | |
| location (i.e., window.location) | | ✓ |
| multiple | | ✓ |
| readOnly | | ✓ |
| rel | ✓ | |
| selected | | ✓ |
| src | ✓ | |
| tabindex | ✓ | |
| title | ✓ | |
| type | ✓ | |
| width (if needed over .width()) | ✓ | |
+------------------------------------+------------+-----------+
値の取得/設定にはどちら.attr()も使用しないでください。代わり.prop()にメソッドを使用してください(ただし、使用しても機能します。.val().attr(“value”, “somevalue”)
概要:この.prop()メソッドは、ブール属性/プロパティ、および html に存在しないプロパティ ( などwindow.location) に使用する必要があります。他のすべての属性 (html で確認できるもの) は、引き続き.attr()メソッドで操作できます。
特定の状況では、属性とプロパティの違いが重要になる場合があります。jQuery 1.6 より前では、一部の属性を取得するときに .attr() メソッドがプロパティ値を考慮に入れることがあり、一貫性のない動作を引き起こす可能性がありました。jQuery 1.6 以降、.prop() メソッドはプロパティ値を明示的に取得する方法を提供し、.attr() は属性を取得します。
たとえば、selectedIndex、tagName、nodeName、nodeType、ownerDocument、defaultChecked、および defaultSelected を取得して、.prop() メソッドで設定する必要があります。jQuery 1.6 より前では、これらのプロパティは .attr() メソッドで取得できましたが、これは attr の範囲内ではありませんでした。これらには対応する属性がなく、単なるプロパティです。
ブール属性に関しては、HTML マークアップ によって定義された DOM 要素を考え、それが elem という名前の JavaScript 変数にあると仮定します。
elem.checked true (ブール値) チェックボックスの状態で変更 $(elem).prop("checked") true (ブール値) チェックボックスの状態で変更
elem.getAttribute("checked") "checked" (文字列) チェックボックスの初期状態。$(elem).attr("checked") (1.6) "checked" (文字列) チェックボックスの初期状態。変わらない
$(elem).attr("checked") (1.6.1+) "checked" (文字列) チェックボックスの状態で変更 $(elem).attr("checked") (1.6 より前) true (ブール値) で変更チェックボックスの状態