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

jQuery Data vs Attr

Beim Arbeiten mit Datenattributen gibt es zwei primäre jQuery-Methoden, die Sie verwenden können: $.data und $. attr. Das Verständnis ihrer Unterschiede ist für eine effektive Datenspeicherung und -abfrage von entscheidender Bedeutung.

$.attr für HTML5-Datenattribute

Wenn Sie es mit HTML5-Datenattributen zu tun haben, z als <a> ist die geeignete Methode $.attr. Dadurch können Sie Datenattribute direkt aus dem HTML des Elements lesen und schreiben. Zum Beispiel:

$('#foo').attr('data-foo'); // Outputs: "bar"
$('#foo').attr('data-foo', 'baz'); // Updates the attribute to "baz"

$.data für beliebige Datenspeicherung

Im Gegensatz dazu können Sie mit $.data beliebige Daten auf einem Element speichern, unabhängig von bestimmten Daten Attribute. Der Zugriff auf diese Daten erfolgt nicht über HTML, sondern über den jQuery-Cache. Es wird häufig zur Widget-Instanziierung und zum Speichern komplexer Objekte verwendet. Zum Beispiel:

$('#foo').data('myData', {key: 'value'});
$('#foo').data('myData').key; // Outputs: "value"

Bindestriche und CamelCase in $.data

Bei Verwendung von $.data werden Datenattributnamen mit Bindestrich automatisch in CamelCase konvertiert, während das Original Das Format mit Bindestrich bleibt in HTML verfügbar. Allerdings wird die Verwendung von Bindestrichen in JavaScript für den Zugriff über $.data() nicht empfohlen.

Auto-Casting in $.data

Eine weitere nützliche Funktion von $.data () ist seine Fähigkeit, Werte automatisch umzuwandeln. Wenn der Wert einem erkannten Muster entspricht, wird er in den entsprechenden Datentyp konvertiert. Dieses vereinfachte Muster:

<a>

Kann wie folgt aufgerufen werden:

$('#foo').data('num'); // Outputs: 15
$('#foo').data('bool'); // Outputs: true
$('#foo').data('json'); // Outputs: {fizz: ['buzz']}

Wann $.attr vs. $.data verwendet werden sollte

Im Allgemeinen , verwenden Sie $.attr für den Zugriff auf HTML5-Datenattribute, die eine direkte Interaktion mit HTML erfordern. Verwenden Sie $.data zum Speichern beliebiger Daten, auf die über HTML nicht zugegriffen werden kann, insbesondere bei der Arbeit mit komplexen Objekten.

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