jQuery .attr() .prop() .data()の違い

まず、3つの方法の説明を見てみましょう.
.attr()このメソッドはjq 1からなる.0はずっと存在していて、公式ドキュメントの書く役割はDOMのattribute値を読む/書くことで、実は1.6以前はattributeだったり、propertyだったりしていました.
.prop()このメソッドjq 1.6 DOMのpropertyを導入する.
.data()このメソッドはjq 1.2.3導入は,DOM要素に対応するjqオブジェクトに任意の値を読み出し/格納する役割を果たす.
先に言ってください.attr()と.prop()、jq 1.6版まで、ありません.prop()メソッドattr()はattributeとpropertyの概念を混同し(彼らの違いが分からないので、昨日の話題を参考にしてください)、使用中にうっかりバグが発生し、jqソースコードを読まなければ、本当にはっきり言えません.attr()はattributeかpropertyかを設定します.
jqがなぜこのように設計されたのかについては、諸説ある.jq開発チーム自身もattributeとpropertyの違いを明らかにしていないという人もいれば、これは過剰設計だという人もいますが、jqはユーザーがattributeとpropertyの違いを理解する必要がないと考え、いっそパッケージ化しました.原因が何であれ、jqというデザインは確かによくありません.
2011年5月、jqは新しいバージョン1.6版に新しいAPIを導入した.prop()の方法ですが、アップグレードの過程はとても苦痛で、1.6版は1.5.2版と比較しています.attr()の導入には下向きの互換性がなく,jqを1.6にアップグレードした後,自分のコードが切れていることに気づいた人もいる.続いてjqリリース1.6.1で互換性の問題が解決しました.
加入についてprop()メソッド、jqの解釈は、まず、nodeName、selectedIndexなどのDOMオブジェクト属性propertyの取得により、前後の比較をより簡潔にするスキームを提供することである.

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

//用.prop()
index = $("#foo").prop("selectedIndex");
もう一つの原因はprop()の効率は.attr().
次にお話しします.data()は、HTML 5のDOMタグにdata-xxxの属性を加えることができることを知っています.data()はdata−xxxのようなDOM付加情報にアクセスする方法と見なす.もちろんです.data()アクセスの内容は文字列だけでなく,配列やオブジェクトも含むことができる.jq 1から.4.3から、HTML 5のdata-xxx属性はjqのdataオブジェクトに自動的に追加されます.例えば、次のコードがあります.

<div data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"noahlu"}'></div>

次の式はすべて成立します.

$("div").data("role") === "page";
$("div").data("lastValue") === 43;
$("div").data("hidden") === true;
$("div").data("options").name === "noahlu";

にもかかわらずdata()はデータを保存するのに便利で、振り返るにたえない過去もあります.見てください.

<button id="foo" data-key="1.4000">Click me</button>

<script>
typeof $('#foo').data('key');
</script>

jQuery 1.8より前のバージョンではnumber'が出力され、1.8より後にはstring'が出力されます.1.8版の前にdataは値を基本タイプに変換しますが、実は私たちがここで望んでいるのは「1.4000」で1.4ではありません.
からdata()の実際の用途から見ると、Prop()は似ているようで、DOMオブジェクトにカスタム値を付けることができます.私はただ、彼らの位置づけが違うと言って、彼らのそれぞれの方法名を見て、どんなシーンがどんな方法を使うか考えてみましょう.
最後に、性能の比較から、prop() > .data() > .attr()は、ブラウザによって異なるバージョンです.data()と.attr()の性能関係には違いがあるが.prop()は常に最適です.