JSのattr属性とprop属性の違いと優先度選択例の紹介

JSのattr属性とprop属性の違いと優先度選択例の紹介_基礎知識

WBOY

リリース： 2016-05-16 16:42:51

オリジナル

1334 人が閲覧しました

attr と比較して、prop は 1.6.1 で新しく追加されました。どちらも中国語の意味で理解され、どちらも属性 (属性とプロパティ) を取得/設定するメソッドです。ただし、ウィンドウまたはドキュメントで使用される .attr() メソッドは、jQuery 1.6 より前では正しく実行できません。これは、ウィンドウまたはドキュメントに属性を含めることができないためです。プロップが誕生しました。

これらの違いを知りたいので、コードの長さに怖がらずに、ソースコードを確認するのが最善です。
いくつかの重要な文を見てみましょう。

attr: function( elem, name, value, pass ) { 
var ret, hooks, notxml, 
nType = elem.nodeType; 
// don't get/set attributes on text, comment and attribute nodes 
if ( !elem || nType === 3 || nType === 8 || nType === 2 ) { 
return; 
} 
if ( pass && jQuery.isFunction( jQuery.fn[ name ] ) ) { 
return jQuery( elem )[ name ]( value ); 
} 
// Fallback to prop when attributes are not supported 
if ( typeof elem.getAttribute === "undefined" ) { 
return jQuery.prop( elem, name, value ); 
} 
notxml = nType !== 1 || !jQuery.isXMLDoc( elem ); 
// All attributes are lowercase 
// Grab necessary hook if one is defined 
if ( notxml ) { 
name = name.toLowerCase(); 
hooks = jQuery.attrHooks[ name ] || ( rboolean.test( name ) &#63; boolHook : nodeHook ); 
} 
if ( value !== undefined ) { 
if ( value === null ) { 
jQuery.removeAttr( elem, name ); 
return; 
} else if ( hooks && "set" in hooks && notxml && (ret = hooks.set( elem, value, name )) !== undefined ) { 
return ret; 
} else { 
elem.setAttribute( name, value + "" ); 
return value; 
} 
} else if ( hooks && "get" in hooks && notxml && (ret = hooks.get( elem, name )) !== null ) { 
return ret; 
} else { 
ret = elem.getAttribute( name ); 
// Non-existent attributes return null, we normalize to undefined 
return ret === null &#63; 
undefined : 
ret; 
} 
}

ログイン後にコピー

prop メソッドコード (jQuery バージョン 1.8.3)

prop: function( elem, name, value ) { 
var ret, hooks, notxml, 
nType = elem.nodeType; 
// don't get/set properties on text, comment and attribute nodes 
if ( !elem || nType === 3 || nType === 8 || nType === 2 ) { 
return; 
} 
notxml = nType !== 1 || !jQuery.isXMLDoc( elem ); 
if ( notxml ) { 
// Fix name and attach hooks 
name = jQuery.propFix[ name ] || name; 
hooks = jQuery.propHooks[ name ]; 
} 
if ( value !== undefined ) { 
if ( hooks && "set" in hooks && (ret = hooks.set( elem, value, name )) !== undefined ) { 
return ret; 
} else { 
return ( elem[ name ] = value ); 
} 
} else { 
if ( hooks && "get" in hooks && (ret = hooks.get( elem, name )) !== null ) { 
return ret; 
} else { 
return elem[ name ]; 
} 
} 
}

ログイン後にコピー

attr メソッドで、最も重要なコード行は elem.setAttribute(name, value "") と ret = elem.getAttribute(name) です。DOM API の setAttribute メソッドと getAttribute メソッドの操作が使用されていることは明らかです。 . アトリビュート要素ノード。
prop メソッドで最も重要なコード行は return (elem[ name ] = value ) と return elem[ name ] です。これは document.getElementById(el)[name] = value のように理解できます。オブジェクトのJS Aプロパティに変換されます。

原理を理解したので、例を見てみましょう:

<input type="checkbox" id="test" abc="111" />

ログイン後にコピー

$(function(){ 
el = $("#test"); 
console.log(el.attr("style")); //undefined 
console.log(el.prop("style")); //CSSStyleDeclaration对象 
console.log(document.getElementById("test").style); //CSSStyleDeclaration对象 
});

ログイン後にコピー

el.attr("style") は、attr が取得されたこのオブジェクトの属性ノードの値であるため、この時点ではそのような属性ノードが存在しないため、当然のことながら unknown を出力します
。 el.prop("style") は CSSStyleDeclaration オブジェクトを出力します。DOM オブジェクトの場合、ネイティブスタイルオブジェクト属性があるため、スタイルオブジェクト
が出力されます。 document.getElementById("test").style については上記と同じです

続きを読む:

el.attr("abc","111") 
console.log(el.attr("abc")); //111 
console.log(el.prop("abc")); //undefined

ログイン後にコピー

まず、attr メソッドを使用して、値 111 の abc ノード属性をこのオブジェクトに追加します。HTML の構造も変更されていることがわかります

el.attr("abc") の出力結果は 111 であり、これは正常です
el.prop("abc") は、abc がこの属性ノードに含まれているため、未定義を出力します。そのため、prop

を通じて取得できません。

el.prop("abc", "222"); 
console.log(el.attr("abc")); //111 
console.log(el.prop("abc")); //222

ログイン後にコピー

次に、prop メソッドを使用して、このオブジェクトの abc 属性を値 222 に設定します。HTML の構造が変わっていないことがわかります。出力結果については説明しません。

原理は上で明確に説明されています。いつ使用するかは自分で決定できます。

checked、selected、readonly、disabled などのプロパティを取得または設定する場合は、次のような prop メソッドを使用する方が明らかに良いことに注意してください。

<input type="checkbox" id="test" checked="checked" />

ログイン後にコピー

console.log(el.attr("checked")); //checked 
console.log(el.prop("checked")); //true 
console.log(el.attr("disabled")); //undefined 
console.log(el.prop("disabled")); //false

ログイン後にコピー

明らかに、ブール値を使用すると、文字列値よりも次の処理が合理的になります。

追記、JS のパフォーマンスにこだわるのであれば、明らかに prop のパフォーマンスの方が高いのは明らかです。attr は DOM 属性ノードにアクセスする必要があり、DOM へのアクセスが最も時間がかかるからです。この状況は、複数オプションの全選択および逆選択の状況に当てはまります。

一部のブラウザでは、disabled と selected のみを記述する必要がある一方、attr("checked") を使用してチェックボックスの selected 属性を取得する場合など、他のブラウザでは、disabled = "disabled"、checked="checked" と記述する必要があることは誰もが知っています。チェックが入っている場合は値が取得できますが、チェックされていない場合は値が取得されません。

jq は、この問題を解決するために、これらの属性を取得するための新しいメソッド "prop" を提供します。以前は、attr を使用して selected 属性を取得していましたが、これからは prop を使用すると "checked" と "" が返されました。メソッドで属性を取得すると、一律に true と false を返します。

それでは、いつ attr() を使用し、いつ prop() を使用するのでしょうか?
1. 属性名を追加すると、prop();
を使用する必要があります。 2. prop();
を使用する、true と false の 2 つの属性があります。 3. その他の場合は、attr();
を使用します。プロジェクトで jquery をアップグレードするときは、全員がこれに注意する必要があります。

以下は attr() と prop() の使用に関する公式の推奨事項です: