Der Unterschied zwischen attr- und prop-Attributen in JS und eine Einführung in Beispiele für die Prioritätsauswahl_Grundkenntnisse

Im Vergleich zu attr ist prop in 1.6.1 neu. Beide werden aus der chinesischen Bedeutung verstanden und sind beide Methoden zum Abrufen/Festlegen von Attributen (Attribute und Eigenschaften). Allerdings kann die in Fenstern oder Dokumenten verwendete Methode .attr() vor jQuery 1.6 nicht ordnungsgemäß ausgeführt werden, da in Fenstern oder Dokumenten keine Attribute vorhanden sein können. prop entstand.

Da wir den Unterschied zwischen ihnen wissen möchten, schauen wir uns am besten ihren Quellcode an. Lassen Sie sich nicht von der Länge des Codes abschrecken:

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 ) ? 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 ? 
undefined : 
ret; 
} 
}

Prop-Methodencode (jQuery-Version 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 ]; 
} 
} 
}

In der attr-Methode sind die beiden kritischsten Codezeilen elem.setAttribute(name, value „“) und ret = elem.getAttribute(name). Es ist offensichtlich, dass die Methodenoperationen setAttribute und getAttribute der DOM-API verwendet werden . Attributelementknoten.
In der Prop-Methode sind die beiden kritischsten Codezeilen return (elem[name] = value) und return elem[name]. Sie können es so verstehen: document.getElementById(el)[name] = value in JS umgewandelt Eine Eigenschaft des Objekts.

Da wir nun das Prinzip verstanden haben, werfen wir einen Blick auf ein Beispiel:

<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") gibt undefiniert aus, da attr der Wert des Attributknotens dieses erhaltenen Objekts ist. Offensichtlich gibt es zu diesem Zeitpunkt keinen solchen Attributknoten, daher wird natürlich undefiniert ausgegeben
el.prop("style") gibt ein CSSStyleDeclaration-Objekt aus. Für ein DOM-Objekt verfügt es über native Stilobjektattribute, daher wird das Stilobjekt
ausgegeben Was document.getElementById("test") betrifft, ist der Stil derselbe wie oben

Weiterlesen:

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

Verwenden Sie zunächst die Methode attr, um diesem Objekt das Knotenattribut abc mit dem Wert 111 hinzuzufügen. Sie können sehen, dass sich auch die Struktur des HTML geändert hat

Das Ausgabeergebnis von el.attr("abc") ist 111, was normal ist
el.prop("abc") gibt undefiniert aus, da sich abc in diesem Attributknoten befindet und daher nicht über prop

abgerufen werden kann

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

Wir verwenden dann die Prop-Methode, um das abc-Attribut für dieses Objekt mit einem Wert von 222 festzulegen. Sie können sehen, dass sich die Struktur des HTML nicht geändert hat. Die Ausgabeergebnisse werden nicht erklärt.

Das Prinzip wurde oben klar erklärt, Sie können selbst entscheiden, wann Sie es verwenden.

Erwähnen Sie, dass es natürlich besser ist, die Prop-Methode zu verwenden, wenn Sie Eigenschaften wie aktiviert, ausgewählt, schreibgeschützt und deaktiviert abrufen oder festlegen möchten, z. B. die folgende:

<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

Offensichtlich machen boolesche Werte die folgende Verarbeitung sinnvoller als Zeichenfolgenwerte.

PS: Wenn Sie von der JS-Leistung besessen sind, ist die Leistung von prop offensichtlich höher, da attr auf den DOM-Attributknoten zugreifen muss und der Zugriff auf das DOM am zeitaufwändigsten ist. Diese Situation gilt für Multi-Option-All-Select- und Inverse-Select-Situationen.

Jeder weiß, dass einige Browser nur „disabled“ und „checked“ schreiben müssen, während andere „disabled“ = „disabled“, „checked“ = „checked“ schreiben müssen, beispielsweise wenn attr („checked“) verwendet wird, um das geprüfte Attribut des Kontrollkästchens zu erhalten Der Wert kann abgerufen werden, wenn er ausgewählt ist. Der Wert ist „überprüft“, aber der Wert, der erhalten wird, wenn er nicht ausgewählt ist, ist undefiniert.

jq bietet eine neue Methode „prop“, um diese Attribute abzurufen, um dieses Problem zu lösen. Wenn wir in der Vergangenheit attr zum Abrufen des geprüften Attributs verwendet haben, haben wir jetzt „checked“ und „“ zurückgegeben Methode, um das Attribut abzurufen, geben wir einheitlich wahr und falsch zurück.

Also, wann sollte man attr() und wann prop() verwenden?
1. Fügen Sie den Attributnamen hinzu und das Attribut wird wirksam. Sie sollten prop();
verwenden 2. Es gibt zwei Attribute, wahr und falsch, die prop();
verwenden 3. Für andere verwenden Sie attr();
Darauf sollte jeder achten, wenn er jquery im Projekt aktualisiert!

Im Folgenden finden Sie offizielle Empfehlungen für die Verwendung von attr() und prop():

Im Folgenden finden Sie offizielle Empfehlungen für die Verwendung von attr() und prop():