jQuery.prop()の詳しい説明

prop() 関数は、現在の jQuery オブジェクトと一致する要素の属性値を設定または返すために使用されます。

この関数はjQueryオブジェクト(インスタンス)に属します。 DOM 要素のプロパティを削除する必要がある場合は、removeProp() 関数を使用します。

文法

この関数はjQuery 1.6で追加されました。 prop() 関数には次の 2 つの用途があります:

使用法 1:

jQueryObject.prop( propertyName [, value ] )

指定されたプロパティ propertyName の値を設定または返します。 value パラメーターが指定されている場合は、プロパティ propertyName の値を value に設定することを意味し、value パラメーターが指定されていない場合は、プロパティ propertyName の値を返すことを意味します。

パラメータ値は関数にすることもできます。prop() は、一致したすべての要素に基づいて関数を実行します。関数内の this ポインターは、対応する DOM 要素を指します。 prop() は 2 つのパラメーターも関数に渡します。最初のパラメーターは一致する要素内の要素のインデックスで、2 番目のパラメーターは要素の propertyName 属性の現在の値です。関数の戻り値は、要素の propertyName 属性に設定された値です。

使用法 2:

jQueryObject.prop( オブジェクト )

オブジェクトの形式で、任意の数のプロパティの値を同時に設定します。オブジェクト object の各属性は propertyName に対応し、属性の値は value に対応します。

注: prop() 関数のすべての「属性の設定」操作は、現在の jQuery オブジェクトと一致する各要素に対して行われます。すべての「属性の読み取り」操作は、最初に一致した要素に対してのみ行われます。
パラメータ

前の構文セクションで定義されたパラメーター名に基づいて、対応するパラメーターを見つけてください。

パラメータの説明
propertyName String型で指定したプロパティ名。
value オプション/オブジェクト/関数タイプによって指定された属性値、または属性値を返す関数。
object Object タイプで指定されたオブジェクト。複数のキーと値のペアをカプセル化し、複数のプロパティを同時に設定するために使用されます。
パラメーター値は、オブジェクトや配列を含む任意のタイプにすることができます。

戻り値

prop() 関数の戻り値の型は、現在の prop() 関数が「属性の設定」操作を実行するか「属性の読み取り」操作を実行するかによって異なります。

prop() 関数が「プロパティの設定」操作を実行する場合は、現在の jQuery オブジェクト自体を返します。「プロパティの読み取り」操作を実行する場合は、読み取りプロパティの値を返します。

現在の jQuery オブジェクトが複数の要素に一致する場合、属性値を返すときに、prop() 関数はそれらの中で最初に一致した要素のみを使用します。要素が指定された属性を持たない場合は、未定義が返されます。

prop() と attr() の主な違い: prop() 関数は DOM 要素 (JS 要素オブジェクト) の属性をターゲットにし、attr() 関数は DOM に対応するドキュメント ノードの属性をターゲットとします。要素。詳細については、jQuery 関数 attr() と prop() の違いを参照してください。

メモ

1. 要素と 要素の type 属性が prop() 関数によって変更されると、この属性は通常は変更できないため、エラーがスローされます。 。

2. prop() 関数を使用して form 要素の selected、selected、disabled などの属性を操作する場合、要素が選択されている (または無効になっている) 場合は true を返し、そうでない場合は true を返します。 HTML のこのような属性)、false を返します。

3. prop() 関数は、DOM 要素の Element オブジェクトの特定の属性 (tagName、selectedIndex、nodeName、nodeType、ownerDocument、defaultChecked、defaultSelected およびその他の属性など) を設定または返すこともできます。

4. IE9 以前のバージョンでは、prop() 関数を使用して設定された属性値が単純なプリミティブ値 (文字列、数値、ブール値) ではなく、対応する DOM 要素が破棄される前は、属性に If がありません。削除すると、メモリ リークが発生する可能性があります。データを保存するだけの場合は、メモリ リークを避けるために data() 関数を使用することをお勧めします。

例と手順

次の HTML コードを例に挙げます:

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

CodePlayer

次の jQuery コードを記述します:

var $n2 = $("#n2");
// prop()操作针对的是元素(Element对象)的属性，而不是元素节点(HTML文档)的属性
document.writeln( $n2.prop("data-key") ); // undefined
document.writeln( $n2.prop("data_value") ); // undefined

document.writeln( $n2.prop("id") ); // n2
document.writeln( $n2.prop("tagName") ); // P
document.writeln( $n2.prop("className") ); // demo test
document.writeln( $n2.prop("innerHTML") ); // CodePlayer
document.writeln( typeof $n2.prop("getAttribute") ); // function

// prop()设置的属性也是针对元素(Element对象)，因此也可以通过元素本身直接访问
$n2.prop("prop_a", "CodePlayer");
document.writeln( $n2[0].prop_a ); // CodePlayer
var n2 = document.getElementById("n2");
document.writeln( n2.prop_a ); // CodePlayer

// 以对象形式同时设置多个属性，属性值可以是对象、数组等任意类型
$n2.prop( { 
  prop_b: "baike",
  prop_c: 18,
  site: { name: "CodePlayer", url: "http://www.jb51.net/" }
} );
document.writeln( $n2[0].prop_c ); // 18
document.writeln( $n2[0].site.url ); // http://www.jb51.net/

// 反选所有的复选框(没选中的改为选中，选中的改为取消选中)
$("input:checkbox").prop("checked", function(index, oldValue){
  return !oldValue;
});

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。