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: "//m.sbmmt.com/" };
</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.

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!