80

いくつかの場所で .attr() が jQuery で使用されているのを見ました。いくつかの場所で .prop() が使用されています。しかし、SO と Google で検索しました。非常に混乱しています。これら 2 つの正確な違いと、それらをいつ使用するか教えてください。 .

次のリンク jQuery attr vs. prop を見たことがありますが、小道具のリストはありますか? jQuery属性と小道具?

しかし、答えが得られませんでした。助けてください。よろしくお願いします。

反対票を投じる前に理由を説明してください。それから次の投稿で訂正します。

4

3 に答える 3

82

ドキュメントから

特定の状況では、属性とプロパティの違いが重要になる場合があります。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、autofocus、baseURI、checkedなどの他のプロパティが取得されます。

これについてもっと読みたい場合はリンク

于 2013-04-17T04:30:30.597 に答える
59

.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>

于 2013-04-17T04:35:03.093 に答える
8

JQuery は変化し続けるライブラリーであり、定期的な改善が行われることもあります。.attr() は、HTML タグから属性を取得するために使用されます。これは完全に機能しますが、.prop() はよりセマンティックにするために後で追加され、「checked」や「selected」などの値のない属性でより適切に機能します。

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

于 2013-04-17T04:30:20.640 に答える