jQuery $.data() vs. $.attr(): Wann welche verwenden?

jQuery Data vs. Attr: Die Unterschiede verstehen

In jQuery werden sowohl $.data als auch $.attr verwendet, um Attribute im DOM zu manipulieren Elemente. Sie dienen jedoch unterschiedlichen Zwecken und unterscheiden sich in ihrer Verwendung und ihrem Verhalten.

Wann man $.data verwendet?

$.data wird hauptsächlich zum Speichern von Daten verwendet, die mit einem verknüpft sind DOM-Element im internen Cache von jQuery ($.cache). Diese Daten werden nicht als HTML-Attribute auf dem Element selbst gespeichert. Wenn Sie Daten daher für Datenbindungs- oder benutzerdefinierte Skripting-Zwecke dauerhaft speichern müssen, ist $.data die bevorzugte Wahl.

Beispiel:

<a>

$('#foo').data('myData', 'someValue');
// Gets the stored data
$('#foo').data('myData'); // outputs "someValue"

Wann man $.attr verwenden sollte

$.attr hingegen legt in erster Linie oder fest Ruft HTML5-Datenattribute ab. Diese Datenattribute werden als Attribute auf dem DOM-Element gespeichert und sollen zusätzliche Metadaten oder Inhalte bereitstellen.

Beispiel:

<a>

$('#foo').attr('data-attribute'); // outputs "myCoolValue"
$('#foo').attr('data-attribute', 'newValue'); // Sets the data-attribute to "newValue"

Zusätzliche Überlegungen

• Die Datenspeicherung mit $.data unterstützt komplexe Objekte, während HTML Datenattribute können nur Zeichenfolgen enthalten.
• $.data wandelt Werte beim Abrufen von Daten automatisch in die entsprechenden Typen um, z. B. beim Konvertieren von „true“ in einen booleschen Wert.
• $.attr behält die Werte bei Originaldatentyp beim Abrufen von Daten.
• Um Verwirrung zu vermeiden, wird empfohlen, beim Zugriff auf gespeicherte Daten die CamelCase-Syntax zu verwenden $.data.
• Sie können auch $.removeAttr verwenden, um Datenattribute zu entfernen, die kein direktes Äquivalent zu $.data haben.

Das obige ist der detaillierte Inhalt vonjQuery $.data() vs. $.attr(): Wann welche verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!