jQuery の attr と prop_jquery の使用の概要

属性とプロパティ

attribute と property はどちらも属性と訳せますが、違いを示すために、これら 2 つの単語は通常、属性と特性と訳されます。

ここをクリック

上記の HTML ステートメントには、要素「div」、属性「id」、およびテキスト「click here」という 3 つのノードがあります。最も一般的な属性は、正式には属性タイプのノードを指します。処理には特別なメソッドがあります。 JavaScript の属性。 Function.getAttribute(name) / setAttribute(name,value)。もちろん、属性は HTML ドキュメント上に表示されるものだけではありません。属性をカスタマイズして DOM ノードに追加することもできます

コードをコピー コードは次のとおりです:

);
t.setAttribute('customizedAttr','customized');




このようにして div を
に変更できます

コードをコピー

コードは次のとおりです:

123

setAttribute メソッドを通じて設定された属性は、最終的に要素

の属性タイプ ノードに反映されます。

プロパティは、通常使用するいくつかのオブジェクトと同様に、「object.field」を通じて通常のフィールドと同じ方法で値を取得または設定できます。

属性とプロパティは関係がないように思えますが、なぜですか? 。 。多くの属性ノードには対応するプロパティ属性もあるため、属性とプロパティは混同されやすいです。たとえば、上記の div の "id" 属性は t.id を使用して取得することもできます (実際、ほとんどの人はこの方法で取得します)。プロパティを通じて ID を変更すると、getAttibute で取得した ID が更新された ID になります。

コードをコピー

コードは次のとおりです。t.id='test1';console .log(t.getAttribute('id'));//test1

同様に、プロパティをカスタマイズすることもできます

コードをコピー

コードは次のとおりです。t.customizedProp='カスタマイズされたプロパティ';

違い

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

は引き続き共有されます。

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

を使用する場合、今使用した属性のクラス属性は次のようになります。

コードをコピー

コードは次のとおりです:t.className='active2';

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

コードをコピー

コードは次のとおりです以下:

コードをコピー

コードは次のとおりです:

var t=document.getElementById('test3');
        console.log(t.getAttribute('checked'));//null
        console.log(t.checked);//false;

        t.setAttribute('checked','checked');
        console.log(t.getAttribute('checked'));//checked
        console.log(t.checked);//true

        t.checked=false;
        console.log(t.getAttribute('checked'));//checked
        console.log(t.checked);//false

4. 对于一些和路径相关的属性，两者取得值也不尽相同，但是同样attribute取得是字面量，property取得是计算后的完整路径

复制代码 代码如下:

Click

复制代码 代码如下:

var t=document.getElementById('test4');
        console.log(t.getAttribute('href'));//#
        console.log(t.href);//file:///C:/Users/bsun/Desktop/ss/anonymous.html#

关于浏览器（IE）造成的兼容性问题可以看看IE 混淆了 DOM 对象属性（property）及 HTML 标签属性（attribute），造成了对 setAttribute、getAttribute 的不正确实现

attr和prop

相信看完上面内容，大家就明白为什么jQuery要添加prop方法了，在jQuery API中也有专门解释

Attributes VS. Properties

在一些特殊的情况下，attributes和properties的区别非常大。在jQuery1.6之前，.attr()方法在获取一些attributes的时候使用了property值，这样会导致一些不一致的行为。在jQuery1.6中，.prop()方法提供了一中明确的获取property值得方式，这样.attr()方法仅返回attributes。

比如，selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 和defaultSelected应该使用.prop()方法获取/设置值。 在jQuery1.6之前这些不属于attribute的property需要用.attr()方法获取。这几个并没有相应的attibute，只有property。

关于布尔类型 attributes，比如一个这样的HTML标签，它在JavaScript中变量名为elem

复制代码 代码如下:

elem.checked	true (Boolean) Will change with checkbox state
$( elem ).prop( "checked" )	true (Boolean) Will change with checkbox state
elem.getAttribute( "checked" )	"checked" (String) Initial state of the checkbox; does not change
$( elem ).attr( "checked" ) (1.6)	"checked" (String) Initial state of the checkbox; does not change
$( elem ).attr( "checked" ) (1.6.1+)	"checked" (String) Will change with checkbox state
$( elem ).attr( "checked" ) (pre-1.6)	true (Boolean) Changed with checkbox state

W3C フォーム仕様 によれば、checked 属性はブール値です。つまり、checked 属性が HTML に表示されている限り、checked に値がない場合でも、対応するプロパティは true である必要があります。他のブール型プロパティにも同じことが当てはまります。

ただし、チェックされたプロパティについて覚えておくべき最も重要なことは、チェックされたプロパティとは同じではないということです。実際、この属性は、defaultChecked プロパティと一致しており、チェックボックスの初期値を設定するためにのみ使用する必要があります。 selected 属性はチェックボックスのステータスによって変化しませんが、checked プロパティは変化します。したがって、チェックボックスが選択されているかどうかを判断するには、ブラウザーの互換性を使用する必要があります。プロパティ

コードをコピーします。 : if ( elem.checked )

if ( $( elem ).prop( "checked" ) )

if ( $( elem ).is( ":checked" ) )



これは、selected や value などの他の動的属性にも適用されます。

IE9 より前のバージョンでは、DOM 要素が削除される前にプロパティが削除されなかった場合、.prop() メソッドを使用して DOM 要素のプロパティの値を設定します (単純な型を除く: 数値、文字列、ブール値) ) メモリが道を譲ってしまいます。 DOM オブジェクトの値を安全に設定し、メモリ リークを回避するために、.data() メソッドを使用できます。

使用シナリオ

実際、上で述べたことは理解しています。いつ .attr() を使用する必要がありますか?また、いつ .prop() を使用する必要がありますか?

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。