web-dev-qa-db-ja.com

jQueryのprop（）とattr（）の違い、およびattr（）とprop（）を使用するタイミング

私はいくつかの場所で.attr（）がjQueryで使用されているのを見ました。いくつかの場所で.prop（）が使用されます。しかし、私はSOで検索し、googleそれらをいつ使用するか。

私は次のリンクを見ました jQuery attr vs prop、props of list of props？jQuery attr vs prop？

しかし、私は答えを得られませんでした。助けてください。事前に感謝します。

Downvoteを与える前に、理由を説明してください、それから私は私の次の投稿で修正します。

jqueryattrprop
73
PSR

from docs

特定の状況では、属性とプロパティの違いが重要になる場合があります。 jQuery 1.6より前では、.attr（）メソッドは、一部の属性を取得するときにプロパティ値を考慮に入れることがあり、一貫性のない動作を引き起こす可能性がありました。 jQuery 1.6では、.prop（）メソッドはプロパティ値を明示的に取得する方法を提供しますが、.attr（）は属性を取得します。

例

たとえば、selectedIndex、tagName、nodeName、nodeType、ownerDocument、defaultChecked、defaultSelectedは、.prop（）メソッドで取得および設定する必要があります。 jQuery 1.6より前は、これらのプロパティは.attr（）メソッドで取得できましたが、これはattrの範囲内ではありませんでした。これらには対応する属性はなく、プロパティにすぎません。

コメントの後に更新

HTML要素の属性を設定できます。ソースコードの記述中に定義します。ブラウザがコードを解析すると、対応するDOMノードが作成されます。これはオブジェクトであり、プロパティを持ちます。

簡単な例は...

<input type="test" value="test" id="test" />

ここで、type、value、idは属性です。ブラウザがレンダリングすると、align、altなどの他のプロパティを取得します、オートフォーカス、baseURI、checkedなど。

リンク これについてさらに読みたい場合

79
bipen

.attr()は、そのHTMLタグの属性を変更します。

.prop()は、DOMツリーに従ってそのHTMLタグのプロパティを変更します。

このリンクの例が示すように。入力フィールドには、属性「値」を設定できます。これは、入力したデフォルト値と等しくなります。ユーザーが入力フィールドの値を変更すると、DOMツリーのプロパティ「値」は変更されますが、元の属性は残ります。

基本的に、HTMLタグの属性にデフォルト値を設定したい場合は、.attr()関数を使用します。ユーザーがその値を変更できる場合（入力、チェックボックス、ラジオなど）、.prop()関数を使用して最新の値を取得します。

リファレンス：HTML：属性とプロパティの違い

スニペットの例

$(document).ready(function() {
  console.log($('#test').attr('value') + " - With .attr()");

  $('#answer').click(function() {
    console.log($('#test').attr('value') + " - With .attr()");
    console.log($('#test').prop('value') + " - With .prop()");
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>Change the input value and check the console...</div>
<input type="text" id="test" value="Sample">
<button id="answer">Click Me</button>
54
CP510

JQueryは変化するライブラリであり、定期的に改善されることもあります。 .attr（）はHTMLタグから属性を取得するために使用されますが、完全に機能しますが、後でセマンティックにするために.prop（）が追加されました。

JQueryの新しいバージョンを使用している場合は、可能な限り.prop（）を使用することをお勧めします。

7
Cyril Gupta