Detaillierte Erläuterung der Verwendung von jQuery.prop ()_jquery

Die Funktion

prop() wird verwendet, um den Attributwert des Elements festzulegen oder zurückzugeben, das mit dem aktuellen jQuery-Objekt übereinstimmt.

Diese Funktion gehört zum jQuery-Objekt (Instanz). Wenn Sie eine Eigenschaft eines DOM-Elements entfernen müssen, verwenden Sie die Funktion „removeProp()“.

Grammatik

Diese Funktion wurde in jQuery 1.6 hinzugefügt. Die Funktion prop() hat die folgenden zwei Verwendungszwecke:

Verwendung 1:

jQueryObject.prop( propertyName [, value ] )

Legen Sie den Wert der angegebenen Eigenschaft propertyName fest oder geben Sie ihn zurück. Wenn der Wertparameter angegeben ist, bedeutet dies, dass der Wert der Eigenschaft propertyName auf value gesetzt wird. Wenn der Wertparameter nicht angegeben ist, bedeutet dies, dass der Wert der Eigenschaft propertyName zurückgegeben wird.

Der Parameterwert kann auch eine Funktion sein, die die Funktion basierend auf allen übereinstimmenden Elementen durchläuft und ausführt. Der Zeiger in der Funktion zeigt auf das entsprechende DOM-Element. prop() übergibt außerdem zwei Parameter an die Funktion: Der erste Parameter ist der Index des Elements im passenden Element und der zweite Parameter ist der aktuelle Wert des propertyName-Attributs des Elements. Der Rückgabewert der Funktion ist der für das propertyName-Attribut des Elements festgelegte Wert.

Verwendung 2:

jQueryObject.prop( object )

Legen Sie die Werte beliebig vieler Eigenschaften gleichzeitig in Form von Objekten fest. Jedes Attribut des Objektobjekts entspricht propertyName, und der Wert des Attributs entspricht value.

Hinweis: Alle Operationen zum „Setzen von Attributen“ der Funktion prop() gelten für jedes Element, das mit dem aktuellen jQuery-Objekt übereinstimmt. Alle Operationen zum „Lesen von Attributen“ gelten nur für das erste übereinstimmende Element.
Parameter

Bitte finden Sie die entsprechenden Parameter anhand der im vorherigen Syntaxabschnitt definierten Parameternamen.

Parameterbeschreibung
propertyName Der durch den String-Typ angegebene Eigenschaftsname.
Wert Der durch den optionalen/Objekt-/Funktionstyp angegebene Attributwert oder eine Funktion, die den Attributwert zurückgibt.
Objekt Ein durch den Objekttyp spezifiziertes Objekt, das zum Kapseln mehrerer Schlüssel-Wert-Paare und zum gleichzeitigen Festlegen mehrerer Eigenschaften verwendet wird.
Der Parameterwert kann von jedem Typ sein, einschließlich Objekten und Arrays.

Rückgabewert

Der Rückgabewert der Funktion prop() ist von beliebigem Typ. Der Typ des Rückgabewerts hängt davon ab, ob die aktuelle Funktion prop() eine Operation „Attribut setzen“ oder eine Operation „Attribut lesen“ ausführt.

Wenn die Funktion prop() eine Operation „Eigenschaft festlegen“ ausführt, gibt sie das aktuelle jQuery-Objekt selbst zurück. Wenn sie eine Operation „Eigenschaft lesen“ ausführt, gibt sie den gelesenen Eigenschaftswert zurück.

Wenn das aktuelle jQuery-Objekt mit mehreren Elementen übereinstimmt, verwendet die Funktion prop() bei der Rückgabe des Attributwerts nur das erste übereinstimmende Element unter ihnen. Wenn das Element nicht über das angegebene Attribut verfügt, wird undefiniert zurückgegeben.

Der Hauptunterschied zwischen prop() und attr(): Die Funktion prop() zielt auf die Attribute des DOM-Elements (JS-Elementobjekt) ab, und die Funktion attr() zielt auf die Attribute des Dokumentknotens ab, der dem DOM entspricht Element. Einzelheiten finden Sie im Unterschied zwischen den jQuery-Funktionen attr() und prop().

Notizen

1. Wenn das Typattribut der Elemente d5fd7aea971a85678ba271703566ebfd über die Funktion prop() geändert wird, wird in den meisten Browsern ein Fehler ausgegeben, da dieses Attribut im Allgemeinen nicht geändert werden darf .

2. Wenn Sie die Funktion prop() verwenden, um die aktivierten, ausgewählten, deaktivierten und anderen Attribute des Formularelements zu bedienen, wird das Element, wenn es ausgewählt (oder deaktiviert) ist, „true“ zurückgegeben, andernfalls (was bedeutet, dass es keine gibt). Wenn Sie ein solches Attribut in HTML verwenden, wird „false“ zurückgegeben.

3. Die Funktion prop() kann auch bestimmte Attribute für das Element-Objekt des DOM-Elements festlegen oder zurückgeben, wie zum Beispiel: tagName, selectedIndex, nodeName, nodeType,ownerDocument, defaultChecked, defaultSelected und andere Attribute.

4. Wenn in IE9 und früheren Versionen der mit der Funktion prop() festgelegte Attributwert kein einfacher primitiver Wert (String, Number, Boolean) ist und bevor das entsprechende DOM-Element zerstört wird, hat das Attribut kein If Wenn sie entfernt werden, kann es zu Speicherlecks kommen. Wenn Sie nur Daten speichern, wird empfohlen, die Funktion data() zu verwenden, um Speicherverluste zu vermeiden.

Beispiele & Anleitungen

Nehmen Sie den folgenden HTML-Code als Beispiel:

Code kopieren Der Code lautet wie folgt:

a90cc2847621da1ce91680be941a0b17
ab9c4d3c2baa0f9bfaebe865fb832c47CodePlayer94b3e26ee717c64999d7867364b1b4a3
f01cab756e4c0e73fb2e1bd6a2318dc9
fb7174bafad711b056936e70b571cf64
16b28748ea4df4d9c2150843fecfba68

Wir schreiben den folgenden jQuery-Code:

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;
});

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.