web-dev-qa-db-ja.com

jQuery attr vs prop？

今これは単なる別のものではありません違いの質問は何ですか、私は持っています いくつかのテストを行いました（http://jsfiddle.net/ZC3Lf/)propおよびattr of <form action="/test/"></form>​の出力は次のとおりです。

1）prop修正テスト
プロップ：http://fiddle.jshell.net/test/1
属性：http://fiddle.jshell.net/test/1

2）属性変更テスト
プロップ：http://fiddle.jshell.net/test/1
属性：/test/1

3）Attr then Prop Modification test
プロップ：http://fiddle.jshell.net/test/11
属性：http://fiddle.jshell.net/test/11

4）Prop then Attr Modification test
プロップ：http://fiddle.jshell.net/test/11
属性：http://fiddle.jshell.net/test/11

私の知る限り、いくつかのことについて混乱しています。
Prop：JavaScriptによる変更後の現在の状態の値
Attr：ページの読み込み時にhtmlで定義された値。

これが正しい場合、

  • なぜpropを変更するとactionが完全に修飾されるように見え、逆に属性を変更しないのですか？
  • 1)のpropを変更すると属性が変更されるのはなぜですか？
  • 2)のattrを変更すると、プロパティが変更されるのはなぜですか？そのようにリンクされるのですか？

テストコード

[〜＃〜] html [〜＃〜]

JavaScript

var element = $('form');
var property = 'action';

/*You should not need to modify below this line */

var body = $('body');
var original = element.attr(property);

body.append('<h1>Prop Modification test</h1>');
element.prop(property, element.prop(property) + 1);

body.append('Prop: '+element.prop(property)+'<br />');
body.append('Attr: '+element.attr(property)+'<hr />');

//reset
element.prop(property, original);
element.attr(property, original);

body.append('<h1>Attr Modification test</h1>');
element.attr(property, element.attr(property) + 1);

body.append('Prop: '+element.prop(property)+'<br />');
body.append('Attr: '+element.attr(property)+'<hr />');

//reset
element.prop(property, original);
element.attr(property, original);

body.append('<h1>Attr then Prop Modification test</h1>');
element.attr(property, element.attr(property) + 1);
element.prop(property, element.prop(property) + 1);

body.append('Prop: '+element.prop(property)+'<br />');
body.append('Attr: '+element.attr(property)+'<hr />');

//reset
element.prop(property, original);
element.attr(property, original);

body.append('<h1>Prop then Attr Modification test</h1>');
element.prop(property, element.prop(property) + 1);
element.attr(property, element.attr(property) + 1);

body.append('Prop: '+element.prop(property)+'<br />');
body.append('Attr: '+element.attr(property)+'<hr />');
javascriptjqueryattrprop
100
Hailwood

残念ながら、リンクは機能しません:(

ただし、attrはすべての属性用です。 propはプロパティ用です。

古いjQueryバージョン（<1.6）では、attrがありました。 nodeName、selectedIndex、またはdefaultValueなどのDOMプロパティを取得するには、次のようなことをしなければなりませんでした。

var elem = $("#foo")[0];
if ( elem ) {
  index = elem.selectedIndex;
}

それは残念だったので、propが追加されました：

index = $("#foo").prop("selectedIndex");

これは素晴らしかったが、次のように迷惑なことに後方互換性がなかった。

<input type="checkbox" checked>

checkedの属性はありませんが、checkedというプロパティがあります。

1.6の最終ビルドでは、attrもpropを実行するため、問題は発生しません。これをきれいな休憩にしたい人もいましたが、あちこちで物事が壊れなかったので、正しい決定が下されたと思います！

に関して：

プロップ：JavaScriptによる変更後の現在の状態の値

属性：ページの読み込み時にhtmlで定義された値。

多くの場合、属性が実際に変更されるため、これは常に当てはまるわけではありませんが、checkedなどのプロパティには変更する属性がないため、propを使用する必要があります。

参照：

http://blog.jquery.com/2011/05/03/jquery-16-released/

http://ejohn.org/blog/jquery-16-and-attr

70
Rich Bradshaw

.propと.attrの違いを確認する明確なケースがあります

以下のHTMLを検討してください。

<form name="form" action="#">
    <input type="text" name="action" value="myvalue" />
    <input type="submit" />
</form>
<pre id="return">
</pre>

およびjQueryを使用した以下のJS：

$(document).ready(function(){
    $("#return").append("$('form').prop('action') : " + $('form').prop('action') + '\r\n');
    $("#return").append("$('form').attr('action') : " + $('form').attr('action') + '\r\n');
    $("#return").append("document.form.action : " + document.form.action);
});

次の出力を作成します。

$('form').prop('action') : [object HTMLInputElement]
$('form').attr('action') : #
document.form.action : [object HTMLInputElement]
3
SmasherHell

jquery 1.6.1+ attr（）は1.6以前のようにプロパティを返す/変更するため。したがって、テストはあまり意味がありません。

戻り値の小さな変更に注意してください。

例えば.

attr（ ‘checked’）：1.6.1以降、true/falseが1.6になる前。 「checked」/ undefinedが返されます。

attr（ ‘selected’）：1.6の前にtrue/falseが返されます。1.6.1“ selected”/undefinedが返されるためです

ドイツ語でのこのトピックの詳細な概要は次の場所にあります。

http://mabraham.de/jquery-prop-attr-val-richtig-verwenden/

1
Martin Abraham

私はこれを試しました

console.log(element.prop(property));
console.log(element.attr(property));

以下のように出力します

http://fiddle.jshell.net/test/
/test/

これは、actionがreadであるときにのみpropが正規化されることを示している可能性があります。

1
Haocheng