Daten. In der Welt von jQuery dreht sich alles um Informationen, die direkt an Elemente angehängt werden (und nicht um eine Variable, die nur sich selbst obliegt). Es gibt unzählige Möglichkeiten, Datenbits auf der "Clientseite" (im Browser und nicht auf dem Server) zu speichern. Es gibt Variablen jeglicher Art, Cookies, localStorage, indexDB und wer weiß was alles andere. Daten werden verwendet, wenn diese Daten für ein bestimmtes Element spezifisch relevant sind.
Wie viele jQuery-Methoden verfügt es über einen Setter (zwei Parameter):
$("#thing").data("name", "value");und ein Getter (ein Parameter):
$("#thing").data("name"); // "value"Sie können es für jedes jQuery-Objekt verwenden. Wenn dieses Objekt mehrere Elemente enthält, erhalten alle diesen Datenwert, wenn Sie ihn als Setter verwenden. Wenn dieses Objekt mehrere Elemente enthält, wenn Sie es als Getter verwenden, wird das erste Element verwendet.
Eine Möglichkeit, sich Daten vorzustellen, besteht darin, dass das Element wie ein Namespace aussieht. Viele Elemente können denselben Datennamen verwenden, haben jedoch unterschiedliche Werte.
In einer alten CSS-Tricks-Demo, dem Google Maps Slider, gibt es einen realen Anwendungsfall. In dieser Demo gibt es eine Liste der Standorte und eine eingebettete Google Map. Wenn Sie mit der Maus über die Orte fahren, wird die Karte verschoben, um diesen Ort zu zentrieren. Dazu benötigt die Karten-API Koordinaten. Es ist sinnvoll, diese Daten für diese Speicherorte im HTML-Code zu haben, aber wir müssen sie nicht sehen. Dies ist ein perfekter Anwendungsfall für data-*Attribute in HTML (neu in HTML5). Ein Listenelement in dieser Liste von Standorten kann dann folgendermaßen aussehen:
O'Hare Airport
Flights n' stuff
About: Info about location…
data-*ist nur eine Möglichkeit zu sagen data- anything . Sie können einfach Datenattribute erstellen. Alles was du willst. In diesem Fall haben wir einen für den Breitengrad und einen anderen für den Längengrad erstellt. Wenn ein Maus-Hover-Ereignis für dieses Listenelement .data()ausgelöst wird , verwenden wir einfach den jQuery-Getter , um die Informationen abzureißen und mit der API zu verwenden.
Jetzt haben wir Daten auf zwei Arten betrachtet: Daten, die von JavaScript selbst festgelegt und abgerufen werden, und Daten, die im HTML beginnen und vom JavaScript verwendet werden. Beide sind in Ordnung und die API ist die gleiche. Sie könnten denken, .data()als Getter für die Informationen in rel = "jQuery"> zu verwenden$("#thing").attr("rel"); // or any other attribute
Sie können es auch so verwenden, wenn Sie möchten:
$("#thing").attr("data-geo-lat");Der .data()Getter ist nur eine Abkürzung. Und ich mag es irgendwie, weil es dich in die richtige Einstellung bringt.
Es ist jedoch wichtig zu beachten, dass die Verwendung .data()als Setter das data-*Attribut im HTML nicht tatsächlich ändert . Dies ist eine gute Standardeinstellung, da das DOM nicht geändert wird, was bedeutet, dass es schneller ist. Wenn Sie das Attribut im HTML unbedingt ändern müssen, verwenden Sie die .attr()Methode als Setter. Beachten .attr()Sie auch, dass Sie bei der Verwendung das Präfix "data-" angeben müssen, das Sie nicht verwenden müssen .data().
$("#thing").attr("data-name", "Chris");Vielleicht haben Sie tun müssen , dass so können Sie sicher andere Teile der Anwendung sein , den Zugang haben, oder wenn Sie etwas tun , wie CSS - Selektoren agains schreiben sie (zB (data-something="whatever") ( ))