jQuery: attr() と prop() の違い

attr()

一致した要素のセット内の最初の要素の属性の値を取得するか、一致した要素ごとに 1 つ以上の属性を設定します。
一致した要素のセット内の最初の要素の属性を取得するか、設定します一致した要素ごとに 1 つ以上の属性を追加します

prop()

一致した要素のセット内の最初の要素のプロパティの値を取得するか、一致したすべての要素に対して 1 つ以上のプロパティを設定します。 element.
一致した要素のセットを取得します。要素内の最初の要素のプロパティを取得するか、選択した各要素に 1 つ以上のプロパティを追加します。

この 2 つの機能は非常に似ていることがわかりますが、それらが操作するオブジェクトは異なります上は異なります。

このようにして、問題を属性とプロパティの違いに還元します。

属性とプロパティは両方とも属性を意味します。これらを区別するために、属性を属性、プロパティをプロパティと呼びます。JavaScript では、属性を取得するために特別に使用される getAttribute() について説明します。ノードの値。

ノードの属性値。

<img  src="/static/imghwm/default1.png"  data-src="https://img.php.cn//upload/image/700/563/134/1479446005532065.png?x-oss-process=image/resize,p_40"  class="lazy"  id=&#39;test&#39; src=&#39;test.jpg&#39; alt="jQuery: attr() と prop() の違い" >
    <script type=&#39;text/javascript&#39;>
        var image = document.getElementById(&#39;test&#39;);
        console.log(image.getAttribute(&#39;src&#39;));
    </script>

のsrcの値と、ノードの属性値を設定するsetAttribute()を参照します。 。

<img  src="/static/imghwm/default1.png"  data-src="https://img.php.cn//upload/image/700/563/134/1479446005532065.png?x-oss-process=image/resize,p_40"  class="lazy"  id=&#39;test&#39; src=&#39;test.jpg&#39; alt="jQuery: attr() と prop() の違い" >
    <script type=&#39;text/javascript&#39;>
        var image = document.getElementById(&#39;test&#39;);
        image.setAttribute(&#39;src&#39;, &#39;another.jpg&#39;);
    </script>

ノードの属性値が変化しているのがわかります。 setAttributeで設定した属性値により、ノードの属性値が変更されます。

attr() の機能は、JavaScript の getAttribute() と setAttribut() を組み合わせたもので、操作の対象はノードの属性値です。

プロパティについて話しましょう

プロパティはDOM要素のプロパティであり、object.propertyを通じてオブジェクトのプロパティ値を取得することができ、プロパティを設定することもできます。 object.property=property value のメソッドを通じてオブジェクトの値を取得します。

<img  src="/static/imghwm/default1.png"  data-src="https://img.php.cn//upload/image/700/563/134/1479446005532065.png?x-oss-process=image/resize,p_40"  class="lazy"  id=&#39;test&#39; src=&#39;test.jpg&#39; alt="jQuery: attr() と prop() の違い" >
    <script type=&#39;text/javascript&#39;>
        var image = document.getElementById(&#39;test&#39;);
        console.log(image.src);
    </script>

DOM要素の特性値が取得できていることがわかります。ノードの属性値と同じ内容を指しますが、形式的には違いがあります。

DOM 要素の属性値の設定をもう一度見てみましょう:

<img  src="/static/imghwm/default1.png"  data-src="https://img.php.cn//upload/image/700/563/134/1479446005532065.png?x-oss-process=image/resize,p_40"  class="lazy"  id=&#39;test&#39; src=&#39;test.jpg&#39; alt="jQuery: attr() と prop() の違い" >
    <script type=&#39;text/javascript&#39;>
        var image = document.getElementById(&#39;test&#39;);
        image.src=&#39;another.jpg&#39;;
    </script>

は、DOM 要素の属性値を変更すると、node 要素の属性値も変更されることがわかりました。次に、getAttribute() メソッドを使用して、設定した属性値を取得できるかどうかを確認します。

<img  src="/static/imghwm/default1.png"  data-src="https://img.php.cn//upload/image/700/563/134/1479446005532065.png?x-oss-process=image/resize,p_40"  class="lazy"  id=&#39;test&#39; src=&#39;test.jpg&#39; alt="jQuery: attr() と prop() の違い" >
    <script type=&#39;text/javascript&#39;>
        var image = document.getElementById(&#39;test&#39;);
        image.src=&#39;another.jpg&#39;;
        console.log(img.getAttribute(&#39;src&#39;));
    </script>

DOMのプロパティ値を変更すると要素の属性値も変更されることを確認しました。

属性とプロパティは同じであると言えるでしょうか?

実際には、これは必ずしも当てはまりません。実際の状況では、属性とプロパティは同じデータ ソースを参照します。

1. 組み込み属性については、属性とプロパティはデータを共有しますが、属性が変更されるとプロパティに影響します。ただし、名前が異なっていても、2 つのカスタム属性は独立したデータです。以下の図のようになりますが、IE6 と 7 は区別されず、カスタム属性データを共有します。

2. すべての属性が対応するプロパティ名と一致するわけではありません。たとえば、属性のクラスのプロパティの対応する名前は className です。

3.inputのcheckedなどと同様に値がtrue/falseのプロパティは、属性で取得した値がHTML文書内の値(checked)となり、プロパティは計算結果(true/false)を取得します。 false) プロパティの変更は属性リテラル値には影響しませんが、属性の変更はプロパティの計算に影響します。

4. 一部のパス関連の属性は両者で取得される値が異なりますが、同様に取得される属性はリテラル値であり、取得されるプロパティはsrcの戻り値と同様に計算された完全なパスになります。上の例では。

選び方

一般的に、組み込み属性には prop() を使用し、カスタム属性には attr() を使用します。その他のパラメーターについては、以下の表を参照してください。