jqueryのattrとpropの違いを例と使用法とともに詳しく説明

jquery の上位バージョンで prop メソッドが導入された後、いつ prop を使用する必要がありますか? attr をいつ使用するか?両者の違いは何ですか？こうした問題が生じます。

この 2 つの違いについては、オンラインで多くの答えがあります。これは非常に簡単な体験です:

HTML 要素の固有プロパティについては、それらを処理するときに prop メソッドを使用します。

HTML 要素の独自にカスタマイズされた DOM 属性については、処理時に attr メソッドを使用します。

jQuery では、attr() 関数と prop() 関数の両方が指定された属性を設定または取得するために使用され、それらのパラメーターと使用方法はほぼ同じです。

しかし、これら 2 つの関数の用途は同じではないと言わなければなりません。これら2つの機能の違いを詳しく紹介しましょう。

1. 操作対象が異なります

当然ですが、attr と prop はそれぞれ、attribute と property という言葉の略語であり、どちらも「属性」を意味します。

ただし、jQuery では、属性とプロパティは 2 つの異なる概念です。 Attribute は HTML document ノードの属性を表し、property は JS オブジェクトの属性を表します。

<!-- 这里的id、class、data_id均是该元素文档节点的attribute -->
<p id="message" class="test" data_id="123"></p>
<script type="text/javascript">
// 这里的name、age、url均是obj的property
var obj = { name: "CodePlayer", age: 18, url: "http://www.php.cn/" };
</script>

jQuery では、prop() 関数の設計目標は、指定された DOM 要素 (JS オブジェクト、要素タイプを参照) のプロパティ (プロパティ) を設定または取得することです。attr() 関数の設計目標は、指定された DOM 要素に対応するドキュメント ノードの属性を設定または取得することです。

<!-- attr()函数针对的是该文档节点的attribute -->
<p id="message" class="test" data_id="123"></p>
<script type="text/javascript">
// prop()函数针对的是该DOM元素(msg)自身的property
var msg = document.getElementById("message");
var $msg = $(msg);
</script>

もちろん、jQuery の基礎となる実装では、関数 attr() と prop() の関数は、JS ネイティブの Element オブジェクト (上記のコードの msg など) を通じて実装されます。 attr() 関数は主に、Element オブジェクトの getAttribute() メソッドと setAttribute() メソッドに依存します。 prop() 関数は主に、JS のネイティブ オブジェクト プロパティの取得および設定メソッドに依存します。

<p id="message" class="test" data_id="123"></p>
<script type="text/javascript">
var msg = document.getElementById("message");
var $msg = $(msg);
/* *** attr()依赖的是Element对象的element.getAttribute( attribute ) 和 element.setAttribute( attribute, value ) *** */
// 相当于 msg.setAttribute("data_id", 145);
$msg.attr("data_id", 145);
// 相当于 msg.getAttribute("data_id");
var dataId = $msg.attr("data_id"); // 145
/* *** prop()依赖的是JS原生的 element[property] 和 element[property] = value; *** */
// 相当于 msg["pid"] = "pid值";
$msg.prop("pid", "pid值");
// 相当于 msg["pid"];
var testProp = $msg.prop("pid"); // pid值
</script>

もちろん、jQuery はこれらの操作をカプセル化し、操作をより便利にし (オブジェクトの形式で複数のプロパティを同時に設定するなど)、ブラウザ間の互換性を実現します。

さらに、 prop() は要素ノードの属性ではなく、DOM 要素のプロパティをターゲットとします。ただし、DOM 要素の一部の属性を変更すると、要素ノードの対応する属性にも影響します。たとえば、プロパティの ID は属性の ID に対応し、プロパティの className は属性のクラスに対応します。

<p id="message" class="test" data_id="123"></p>
<script type="text/javascript">
var msg = document.getElementById("message");
var $msg = $(msg);
document.writeln( $msg.attr("class") ); // test
$msg.prop("className", "newTest");
// 修改className(property)导致class(attitude)也随之更改
document.writeln( $msg.attr("class") ); // newTest
</script>

2. アプリケーションのバージョンの違い

attr() は jQuery バージョン 1.0 に存在する関数であり、prop() は jQuery バージョン 1.6 の新しい関数です。 1.6 より前では attr() 関数しか使用できなかったのは間違いありませんが、1.6 以降のバージョンでは、実際のニーズに応じて対応する関数を選択できます。

3. 設定に使用される属性値の型が異なります

attr() 関数はドキュメントノードの属性に対して動作するため、属性値セットは string 型のみになります。文字列型。 toString() メソッドによって文字列型に変換されます。

prop() 関数は JS オブジェクトのプロパティに対して動作するため、プロパティ値セットは配列やオブジェクトを含む任意の型にすることができます。

4. その他の詳細

jQuery 1.6 より前では、この関数は属性の設定と取得だけでなく、プロパティの設定と取得も行うことができました。たとえば、jQuery 1.6 より前では、attr() は、tagName、className、nodeName、nodeType などの DOM 要素のプロパティを設定または取得することもできました。

jQuery 1.6 で prop() 関数が追加され、プロパティの設定または取得に使用されるまでは、attr() は属性の設定と取得にのみ使用されていました。

さらに、form要素のchecked、selected、disabledなどの属性については、jQuery 1.6より前では、attr()はこれらの属性の戻り値をブール型として取得していました。選択されている(または無効になっている)場合は、trueを返します。 、それ以外の場合は false を返します。

ただし、1.6 以降では、attr() を使用してこれらの属性の戻り値を String 型として取得します。選択されている (または無効になっている) 場合は、checked、selected、または disable が返されます。それ以外の場合は、要素ノードが返します。この属性を持っていない場合は、未定義を返します。さらに、一部のバージョンでは、これらの属性値はドキュメントが読み込まれたときの初期状態の値を表し、後でこれらの要素の選択状態 (または無効化) が変更された場合でも、対応する属性値は変更されません。

jQuery は、属性の selected、selected、disabled は属性の初期状態の値を表し、プロパティの selected、selected、disabled はプロパティのリアルタイム状態の値 (値は true または false) を表すと信じているためです。

そのため、jQuery 1.6 以降のバージョンでは、check、selected、disabled などの属性を設定または取得するには、prop() 関数を使用してください。 prop() で実装できる他の操作については、prop() 関数を使用してみてください。

りー

以上がjqueryのattrとpropの違いを例と使用法とともに詳しく説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。