#20: Daten! data-*! .data()! .attr(data-*)!

Daten. In der Welt von jQuery geht es um Informationshäppchen, die direkt an Elemente angehängt werden (im Gegensatz zu z. B. einer Variablen, die nur für sich selbst verantwortlich ist). Es gibt unzählige Möglichkeiten, Daten auf der „Client-Seite“ (im Browser, nicht auf dem Server) zu speichern. Es gibt Variablen beliebiger Art, Cookies, localStorage, indexDB und wer weiß was noch alles. Daten werden verwendet, wenn diese Daten spezifisch für ein bestimmtes Element relevant sind.

Wie viele jQuery-Methoden hat es sowohl einen Setter (zwei Parameter)

$("#thing").data("name", "value");

als auch einen Getter (ein Parameter)

$("#thing").data("name");
// "value"

Sie können es auf jedem jQuery-Objekt verwenden. Wenn sich mehrere Elemente in diesem Objekt befinden, erhalten alle diesen Datenwert, wenn Sie es als Setter verwenden. Wenn sich mehrere Elemente in diesem Objekt befinden, wenn Sie es als Getter verwenden, wird das erste Element verwendet.

Eine Möglichkeit, über Daten nachzudenken, ist, dass das Element eine Art Namespace ist. Viele Elemente können den gleichen Daten „Namen“ verwenden, aber unterschiedliche Werte haben.

Es gibt einen realen Anwendungsfall in einer alten CSS-Tricks-Demo, dem Google Maps Slider. In dieser Demo gibt es eine Liste von Orten und eine eingebettete Google Map. Wenn Sie mit der Maus über die Orte fahren, bewegt sich die Karte, um diesen Ort zu zentrieren. Um dies zu tun, benötigt die Karten-API Koordinaten. Es ist sinnvoll, diese Daten in HTML für diese Orte zu haben, aber wir müssen sie nicht sehen. Das ist ein perfekter Anwendungsfall für data-*-Attribute in HTML (neu in HTML5). Ein Listenelement in dieser Liste von Orten könnte dann so aussehen:

<li data-geo-lat="41.9786" data-geo-long="-87.9047">
  <h3>O'Hare Airport</h3>
  <p>Flights n' stuff</p>
  <p class="longdesc"><strong>About:</strong> Info about location...</p>
</li>

data-* bedeutet einfach data-beliebiges. Sie können beliebige Datenattribute erstellen. Was immer Sie wollen. In diesem Fall haben wir eines für den Breitengrad und ein anderes für den Längengrad erstellt. Wenn ein Maus-Hover-Ereignis auf diesem Listenelement ausgelöst wird, verwenden wir einfach den jQuery-Getter für .data(), um die Informationen abzurufen und mit der API zu verwenden.

Jetzt haben wir Daten auf zwei Arten betrachtet: Daten, die sowohl aus JavaScript selbst gesetzt und abgerufen werden, als auch Daten, die in HTML beginnen und von JavaScript verwendet werden. Beides ist in Ordnung und die API ist die gleiche. Sie denken vielleicht, dass die Verwendung von .data() als Getter für die Informationen in data-*-Attributen seltsam ist. Das ist es ein wenig. Normalerweise greift man auf Informationen in Attributen in HTML wie folgt zu:

$("#thing").attr("rel"); // or any other attribute

Sie können es auch auf diese Weise verwenden, wenn Sie möchten

$("#thing").attr("data-geo-lat");

Der .data() Getter ist nur eine Abkürzung. Und ich mag ihn irgendwie, da er Sie in die richtige Denkweise versetzt.

Es ist jedoch wichtig zu beachten, dass die Verwendung von .data() als Setter das data-*-Attribut in HTML nicht tatsächlich verändert. Das ist eine gute Standardeinstellung, da das Nicht-Verändern des DOM bedeutet, dass es schneller ist. Wenn Sie das Attribut in HTML unbedingt ändern müssen, verwenden Sie die Methode .attr() als Setter. Beachten Sie auch, dass Sie bei Verwendung von .attr() das Präfix „data-“ einschließen müssen, was Sie bei .data() nicht benötigen.

$("#thing").attr("data-name", "Chris");

Sie müssen dies möglicherweise tun, um sicherzustellen, dass andere Teile der Anwendung darauf zugreifen können, oder wenn Sie etwas tun, wie z. B. CSS-Selektoren dagegen zu schreiben (z. B. [data-something="whatever"] { })