Im Vergleich zu Attr ist die Prop in 1,6,1 neu. Beide werden aus der chinesischen Bedeutung verstanden und sind Methoden zum Erhalten/Festlegen von Attributen (Attribute und Eigenschaften). Es ist nur so, dass die Verwendung der .attr () -Methode im Fenster oder im Dokument nicht vor JQuery 1.6 ausgeführt werden kann, da keine Attribute im Fenster und im Dokument vorhanden sind. Prop entstand.
Da wir den Unterschied zwischen ihnen kennen wollen, ist es am besten, ihren Quellcode zu betrachten und nicht Angst vor der Länge des Codes zu haben. Schauen wir uns nur die wichtigsten Sätze an:
Attr: Funktion (Elem, Name, Wert, Pass) {var ret, Hooks, Notxml, nType = elem.nodetype; // Attribute für Text-, Kommentar- und Attributknoten nicht erhalten/festlegen, wenn (! Elem || nType === 3 || nType === 8 || nType === 2) {return; } if (pass && jQuery.isfunction (jQuery.fn [name])) {return jQuery (Elem) [Name] (Wert); } // fallback zu prop, wenn Attribute nicht unterstützt werden, wenn (typeof elem.getAttribute === "undefined") {return jQuery.prop (Elem, Name, Wert); } notxml = nType! == 1 || ! jQuery.isxmldoc (Elem); // Alle Attribute sind Kleinbuchstaben // notwendigen Hook, wenn einer definiert ist, wenn (notxml) {name = name.tolowerCase (); Hooks = jQuery.attrhooks [Name] || (rBoolean.test (Name)? Boolhook: NodeHook); } if (value! zurückkehren; } else if (Hooks && "set" in Hooks && notxml && (ret = Hooks.set (Elem, Wert, Name))! == undefiniert) {return return; } ele {elem.setAttribute (Name, Wert + ""); Rückgabewert; }} else if (Hooks && "Get" in Hooks && notxml && (ret = Hooks.get (Elem, Name))! == null) {return ret; } else {ret = elem.getAttribute (name); // Nicht existierende Attribute return null, wir normalisieren uns auf undefinierte Return Ret === NULL? undefiniert: ret; }}Prop -Methodcode (JQuery Version 1.8.3)
Prop: Funktion (Elem, Name, Wert) {var ret, Hooks, Notxml, nType = elem.nodetype; // Eigenschaften für Text-, Kommentar- und Attributknoten nicht erhalten/festlegen, wenn (! Elem || nType === 3 || nType === 8 || nType === 2) {return; } notxml = nType! == 1 || ! jQuery.isxmldoc (Elem); if (notxml) {// Name und Anhängen von Hooks name = jQuery.Propfix [Name] || Name; Hooks = jQuery.Prophooks [Name]; } if (value! } 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 ATT -Methode, den beiden kritischsten Codezeilen Elem.SetatTribute (Name, Wert + "") und ret = elem.getAttribute (Name), ist es offensichtlich, dass die DOM -API -SetAttribute- und GetAttribute -Methoden, die von den Attributelementknoten betrieben werden.
In der Prop -Methode, den beiden kritischsten Codezeilen, der Rückgabe (Elem [Name] = Wert) und ELEM [Name] können Sie ihn als Dokument verstehen.
Da wir das Prinzip verstehen, schauen wir uns ein Beispiel an:
<Eingabe type = "checkBox" id = "test" abc = "111" />
$ (function () {el = $ ("#test"); console.log (el.attr ("style"); // undefined Console.log (El.Prop ("style"); // csStyledeClaration -Objektkonsole.Log (Dokument.GetElementById ("test").EL.ATTR ("Style") gibt undefiniert aus, weil ATT den Wert des erhaltenen Objektattributknotens ist. Offensichtlich gibt es zu diesem Zeitpunkt keinen Attributknoten, daher ist die natürliche Ausgabe undefiniert.
El.Prop ("style") gibt das CStyledeClaration -Objekt aus. Für ein DOM -Objekt verfügt es über das Native Style -Objekt -Objektattribut, sodass das Stilobjekt ausgegeben wird.
Wie für document.getElementById ("Test"). Stil ist der gleiche wie der oben genannte
Nächster Blick:
el.attr ("ABC", "111") console.log (El.attr ("ABC")); // 111 console.log (El.Prop ("ABC")); //undefiniertVerwenden Sie zunächst die ATT -Methode, um das ABC -Knotenattribut zu diesem Objekt mit einem Wert von 111 hinzuzufügen. Sie können feststellen, dass sich auch die Struktur des HTML geändert hat.
EL.ATTR ("ABC") Ausgang ist 111, was normal ist
EL.Prop ("ABC") Ausgabe undefiniert, da ABC in diesem Eigenschaftsknoten ist und daher nicht durch Prop abgerufen werden kann.
El.Prop ("ABC", "222"); console.log (el.attr ("ABC")); // 111 console.log (El.Prop ("ABC")); // 222Anschließend setzen wir das ABC -Attribut für dieses Objekt mit der Prop -Methode mit einem Wert von 222. Sie können sehen, dass sich die Struktur des HTML nicht geändert hat. Die Ausgangsergebnisse werden nicht erklärt.
Das obige hat das Prinzip klar erklärt, und Sie können verstehen, was Sie selbst verwenden.
Es wird erwähnt, dass es offensichtlich besser ist, die Prop -Methode zu verwenden, z.
<Eingabe type = "checkBox" id = "test" checked = "checked" />
console.log (el.attr ("geprüft")); // Checked Console.log (El.Prop ("geprüft")); // true console.log (el.attr ("deaktiviert")); // undefined Console.log (El.Prop ("deaktiviert")); //FALSCHOffensichtlich macht der Boolesche Wert die nächste Verarbeitung vernünftiger als der Zeichenfolgenwert.
Ps. Wenn Sie JS Performance Sauberkeit haben, ist die Requisitenleistung offensichtlich höher, da ATT auf DOM-Attributknoten zugreifen muss, ist der Zugriff auf DOM die zeitaufwändigste. Diese Situation gilt für mehrere Optionen und nicht ausgewählte Szenarien.
Jeder weiß, dass einige Browser nur deaktiviert und überprüft müssen, während andere deaktiviert werden müssen = "deaktiviert", checked = "geprüft". Wenn Sie beispielsweise Attr ("geprüft") verwenden, um die geprüfte Eigenschaft eines Kontrollkästchens zu erhalten, können Sie den Wert erhalten, wenn Sie ihn auswählen. Der Wert ist "überprüft", aber wenn Sie ihn nicht auswählen, ist er undefiniert.
JQ bietet eine neue Methode "Requisite", um diese Eigenschaften zu erhalten, nämlich dieses Problem. In der Vergangenheit verwendeten wir Attrig, um die geprüfte Eigenschaft zu erhalten, und kehrten "geprüft" und "" zurück, aber jetzt verwenden wir die Prop -Methode, um die Eigenschaften zu erhalten und wahr und falsch zurückzugeben.
Also, wann Sie attr () und wann prop () verwendet werden müssen?
1. Fügen Sie den Attributnamen hinzu. Dieses Attribut wird wirksam. Sie sollten prop () verwenden;
2. Es gibt zwei Eigenschaften, die wahr und falsch verwenden, prop ();
3. Verwenden Sie Attr () für andere;
Jeder sollte darauf achten, wenn JQuery im Projekt aktualisiert wird!
Im Folgenden sind die offiziellen Vorschläge für die Verwendung von Attr () und Prop () aufgeführt:
Im Folgenden sind die offiziellen Vorschläge für die Verwendung von Attr () und Prop () aufgeführt: