Detaillierte Erläuterung des Unterschieds zwischen attr und prop in jquery mit Beispielen und Verwendung

Wann sollte prop verwendet werden, nachdem die Prop-Methode in höheren Versionen von JQuery eingeführt wurde? Wann sollte attr verwendet werden? Was ist der Unterschied zwischen den beiden? Diese Probleme treten auf.

Es gibt online viele Antworten auf den Unterschied zwischen den beiden. Hier ist eine sehr einfache Erfahrung:

Für die inhärenten Attribute des HTML-Elements selbst verwenden Sie bei der Verarbeitung die prop-Methode.

Für unsere eigenen benutzerdefinierten DOM-Attribute von HTML-Elementen verwenden Sie bei der Verarbeitung die Methode attr.

In jQuery werden sowohl die Funktion attr() als auch die Funktion prop() verwendet, um bestimmte Attribute festzulegen oder abzurufen, und ihre Parameter und Verwendung sind nahezu identisch.

Aber es muss gesagt werden, dass die Verwendung dieser beiden Funktionen nicht gleich ist. Lassen Sie uns den Unterschied zwischen diesen beiden Funktionen im Detail vorstellen.

1. Verschiedene Operationsobjekte

Attr und prop sind offensichtlich die Abkürzungen der Wörter attribute und property, und beide bedeuten „Attribut“.

In jQuery sind Attribut und Eigenschaft jedoch zwei verschiedene Konzepte. Das Attribut stellt das Attribut des Knotens HTML-Dokument dar, und die Eigenschaft stellt das Attribut des JS-Objekts dar.

<!-- 这里的id、class、data_id均是该元素文档节点的attribute -->
<p id="message" class="test" data_id="123"></p>
<script type="text/javascript">
// 这里的name、age、url均是obj的property
var obj = { name: "CodePlayer", age: 18, url: "http://www.php.cn/" };
</script>

In jQuery besteht das Entwurfsziel der Funktion prop() darin, das Attribut (Eigenschaft) für das angegebene DOM-Element festzulegen oder abzurufen (bezogen auf das JS-Objekt, den Elementtyp); ) Funktion Das Entwurfsziel besteht darin, das Attribut auf dem Dokumentknoten festzulegen oder abzurufen, der dem angegebenen DOM-Element entspricht.

<!-- attr()函数针对的是该文档节点的attribute -->
<p id="message" class="test" data_id="123"></p>
<script type="text/javascript">
// prop()函数针对的是该DOM元素(msg)自身的property
var msg = document.getElementById("message");
var $msg = $(msg);
</script>

Natürlich werden in der zugrunde liegenden Implementierung von jQuery die Funktionen der Funktionen attr() und prop() durch native JS-Elementobjekte implementiert (z. B. msg im obigen Code). Die Funktion attr() basiert hauptsächlich auf den Methoden getAttribute() und setAttribute() des Element-Objekts. Die Funktion prop() basiert hauptsächlich auf den nativen Methoden zum Erfassen und Festlegen von Objekteigenschaften in JS.

<p id="message" class="test" data_id="123"></p>
<script type="text/javascript">
var msg = document.getElementById("message");
var $msg = $(msg);
/* *** attr()依赖的是Element对象的element.getAttribute( attribute ) 和 element.setAttribute( attribute, value ) *** */
// 相当于 msg.setAttribute("data_id", 145);
$msg.attr("data_id", 145);
// 相当于 msg.getAttribute("data_id");
var dataId = $msg.attr("data_id"); // 145
/* *** prop()依赖的是JS原生的 element[property] 和 element[property] = value; *** */
// 相当于 msg["pid"] = "pid值";
$msg.prop("pid", "pid值");
// 相当于 msg["pid"];
var testProp = $msg.prop("pid"); // pid值
</script>

Natürlich kapselt jQuery diese Vorgänge, wodurch sie für uns bequemer zu bedienen sind (z. B. das gleichzeitige Festlegen mehrerer Eigenschaften in Form von Objekten) und eine browserübergreifende Kompatibilität erreicht wird.

Obwohl prop() auf die Eigenschaft des DOM-Elements abzielt, nicht auf das Attribut des Elementknotens. Änderungen an einigen Attributen von DOM-Elementen wirken sich jedoch auch auf die entsprechenden Attribute auf den Elementknoten aus. Beispielsweise entspricht die ID der Eigenschaft der ID des Attributs und der Klassenname der Eigenschaft entspricht der Klasse des Attributs.

<p id="message" class="test" data_id="123"></p>
<script type="text/javascript">
var msg = document.getElementById("message");
var $msg = $(msg);
document.writeln( $msg.attr("class") ); // test
$msg.prop("className", "newTest");
// 修改className(property)导致class(attitude)也随之更改
document.writeln( $msg.attr("class") ); // newTest
</script>

2. Verschiedene Anwendungsversionen

attr() ist eine Funktion, die in jQuery Version 1.0 existiert, und prop() ist eine neue Funktion in jQuery Version 1.6. Es besteht kein Zweifel, dass Sie vor 1.6 nur die Funktion attr () verwenden können. In 1.6 und späteren Versionen können Sie die entsprechende Funktion entsprechend den tatsächlichen Anforderungen auswählen.

3. Die zum Festlegen verwendeten Arten von Attributwerten sind unterschiedlich

Da die Funktion attr() auf die Attribute des Dokumentknotens wirkt, kann der Attributwertsatz nur stringTyp: Wenn es sich nicht um einen String-Typ handelt, wird auch seine toString()-Methode aufgerufen, um ihn in einen String-Typ zu konvertieren.

Die Funktion prop() bearbeitet die Eigenschaften von JS-Objekten, sodass die festgelegten Eigenschaftswerte von jedem Typ sein können, einschließlich Arrays und Objekten.

4. Weitere Details

Vor jQuery 1.6 war nur die Funktion attr() verfügbar, die sich nicht nur um das Festlegen und Abrufen von Attributen kümmert, sondern auch um das Festlegen und Abrufen von Eigenschaften. Beispiel: Vor jQuery 1.6 konnte attr() auch die Eigenschaften von DOM-Elementen wie tagName, className, nodeName, nodeType usw. festlegen oder abrufen.

Bis jQuery 1.6 die Funktion prop() hinzufügte und zum Festlegen oder Abrufen von Eigenschaften verwendet wurde, wurde attr() nur zum Festlegen und Abrufen von Attributen verwendet.

Außerdem hat attr() für die aktivierten, ausgewählten, deaktivierten und anderen Attribute des Formularelements vor jQuery 1.6 den Rückgabewert dieser Attribute als booleschen Typ erhalten: wenn es ausgewählt (oder deaktiviert) ist. , es gibt true zurück, andernfalls wird false zurückgegeben.

Aber ab 1.6 verwenden Sie attr(), um den Rückgabewert dieser Attribute als String-Typ abzurufen. Wenn es ausgewählt (oder deaktiviert) ist, wird es aktiviert, ausgewählt oder deaktiviert zurückgegeben, andernfalls (d. h. der Elementknoten hat dieses Attribut nicht). Darüber hinaus stellen diese Attributwerte in einigen Versionen den Anfangsstatuswert beim Laden des Dokuments dar. Auch wenn der ausgewählte (oder deaktivierte) Status dieser Elemente später geändert wird, ändern sich die entsprechenden Attributwerte nicht.

Weil jQuery davon ausgeht, dass: die aktivierten, ausgewählten und deaktivierten Eigenschaften des Attributs den Wert des Anfangszustands des Attributs darstellen und die aktivierten, ausgewählten und deaktivierten Eigenschaften den Wert des Echtzeitstatus der Eigenschaft darstellen (der Wert ist wahr). oder falsch).

Verwenden Sie daher in jQuery 1.6 und späteren Versionen bitte die Funktion prop(), um überprüfte, ausgewählte, deaktivierte und andere Attribute festzulegen oder abzurufen. Versuchen Sie für andere Operationen, die mit prop() implementiert werden können, die Funktion prop() zu verwenden.

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Unterschieds zwischen attr und prop in jquery mit Beispielen und Verwendung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!