Wo das Daten-JS-Objekt generiert wird. Vordefinierte Objekte der JavaScript-Sprache. Datumskomponenten installieren

Die Datenmethode in jQuery gibt uns die Möglichkeit, beliebige Daten an jedes Dokument oder JavaScript-Objekt zu binden, wodurch wir Ihren Code prägnanter und lesbarer machen können. Ab jQuery 1.4.3 war es möglich, diese Methode für JavaScript-Objekte zu verwenden und Änderungen an diesen Daten zu verfolgen.

Zunächst können Sie die Datenmethode für ein jQuery-Objekt aufrufen und die Funktion $.data() auch direkt verwenden.

// Verwendung der Methode: $("#myDiv").data("key","arbitrary value"); // Funktion direkt verwenden: $.data($("#myDiv").get(0),"key","arbitrary value");

Die Datenfunktion ist die Low-Level-Implementierung, die tatsächlich beim Aufruf der Methode verwendet wird. Die jQuery-Objektmethode ist viel praktischer und ermöglicht es Ihnen auch, sich selbst als Aufrufkette einzubinden.

Beachten Sie außerdem, dass Sie als ersten Parameter ein DOM-Element an die Funktion $.data übergeben müssen, kein jQuery-Objekt.

Eine Objektmethode erfordert zwei Parameter – einen Schlüssel und einen Wert. Der Schlüssel ist eine String-Konstante und der Wert ist eine beliebige Datenstruktur, einschließlich Array-Funktionen und -Objekten. Es gibt eine alternative Syntax, bei der Sie ein Objekt als einzelnen Parameter übergeben können:

// Sie können ein Objekt übergeben: $("#myDiv").data(("name": "Stevie", "age":21)); // Dasselbe: $("#myDiv").data("name","Stevie").data("age",21);

Wenn Sie nun die gespeicherten Daten abrufen müssen, können Sie die Datenfunktion aufrufen und ihr den Schlüssel als Parameter übergeben:

Var theValue = $("#myDiv").data("age"); // 21

Der Zugriff auf diese Daten ist überall im Skript möglich. Sie erhalten die gespeicherten Daten, solange das vom angegebenen Selektor abgerufene Element vorhanden ist.

Var theValue = $("div:first").data("name"); // Stevie $("div:first").click(function())( alarm($(this).data("age"); // 21 ));

jQuery 1.4.3 unterstützt auch in Attributen gespeicherte HTML5-Daten. Das heißt, wenn Sie ein Element wie folgt deklariert haben:

In diesem Fall können Sie die Daten aus dem Attribut data-internal-id abrufen, indem Sie die Methode $("#img1").data("internal-id") aufrufen, was für AJAX-Anfragen sicherlich praktisch ist.

Sie werden vielleicht überrascht sein, aber die Datenmethode kann auch für reguläre JavaScript-Objekte verwendet werden. Diese Funktionalität wurde offiziell in jQuery 1.4.3 eingeführt.

Var myObj = (); $(myObj).data("city","Springfield");

Das obige Beispiel erstellt tatsächlich eine Stadteigenschaft für das angegebene Objekt. Warum schreiben Sie in diesem Fall nicht einfach myObj.city = "Springfield"? Der Unterschied besteht darin, dass die Datenmethode dem Objekt mehrere nützliche Ereignisse hinzufügt, was die Arbeit mit diesem Objekt erleichtert. Zum Beispiel:

Var progressBar = (); $(progressBar).bind("setData",function(e,key,value)( switch(key)( case "percent": $("#progress").width(value+"%"); $("# prozentText").text(value+"%"); break; case "color": $("#progress").css("color",value); break; case "enabled": $("#progress") .toggleClass("active",value); break; ) )); $(progressBar).data("enabled",true).data("percent",21).data("color","green"); console.log(progressBar.enabled);

Im obigen Beispiel verwenden wir die Datenmethode, um eine einfache API zu erstellen, mit der wir ein Element aktualisieren können.

Es gibt zwei weitere Ereignisse, die für ein JavaScript-Objekt verwendet werden können:

• getData – wird vor dem Lesen von Daten ausgelöst. Sie können damit die empfangenen Daten vorverarbeiten. Zum Beispiel um einen Wert neu zu berechnen.
• changeData – wird ausgelöst, wenn Daten festgelegt oder geändert werden. Dieses Ereignis wird im jQuery-Datalink-Plugin verwendet. Damit können Sie Formulardaten an ein JavaScript-Objekt binden und mit Formularfeldern als Eigenschaften des Objekts arbeiten.

jQuery erstellt ein leeres Objekt (für Neugierige heißt es $.cache), das den Speicher für alle Werte darstellt, die Sie mit der Datenmethode speichern. Jedem Element aus dem DOM, das mit der Datenmethode verwendet wird, wird eine eindeutige Kennung zugewiesen, die dann der Schlüssel für den Zugriff auf die Daten im $.cache-Objekt ist.

jQuery speichert in diesem Cache nicht nur Benutzerdaten, sondern auch interne Daten und Event-Handler, die Sie mit den Funktionen live(), bind() und Delegate() anhängen. Die Verwendung eines zentralen Speichers macht jQuery zuverlässiger.

Die Datenmethode ist nur eine der vielen Funktionen von jQuery, die Webentwicklern das Leben erleichtern. In Kombination mit den anderen Funktionen der Bibliothek bildet es eine solide Grundlage, auf die wir uns verlassen können.

In JavaScript gibt es drei Arten von Objekten: integrierte Objekte, Browserobjekte und Objekte, die der Programmierer selbst erstellt (Abbildung 2.1).

Reis. 2.1. Objekte in JavaScript

Jeder dieser Typen hat seinen eigenen Zweck und seine eigenen Eigenschaften.

Nachfolgend haben wir integrierte Objekte aufgelistet, deren Eigenschaften und Methoden in JavaScript-Skripten verfügbar sind, ohne diese Objekte zuerst zu definieren:

Hier bezeichnet * integrierte Objekte, die in Microsoft JScript Version 3.0 definiert sind. Diese Version ist im Microsoft Internet Explorer-Browser Version 4.0 implementiert.

Integrierte Objekte eignen sich sehr gut zum Ausführen verschiedener Operationen mit Zeichenfolgen, Kalenderdaten, Arrays, Zahlen usw. Sie befreien den Programmierer von der Durchführung verschiedener Routineoperationen wie der Konvertierung von Zeichenfolgen oder der Berechnung mathematischer Funktionen.

Wie arbeite ich mit integrierten Objekten?

Einfach genug. Das Programm erstellt Instanzen von Objekten und greift dann auf die Eigenschaften und Methoden der Objekte zu.

Betrachten Sie als praktisches Beispiel ein HTML-Dokument, das das aktuelle Datum und die aktuelle Uhrzeit anzeigt. Den Quelltext zu diesem Dokument finden Sie in Listing 2.1.

Auflistung 2.1. Datei kapitel2/date/date.html

Hier erstellt das JavaScript-Skript ein Data-Objekt mit dem neuen Schlüsselwort, das allen C++-Fans bekannt ist, und dem Date-Konstruktor ohne Parameter:

Das auf diese Weise erstellte Datenobjekt wird mit dem aktuellen lokalen Datum des Benutzers initialisiert (nicht mit dem Webserver, von dem das entsprechende HTML-Dokument heruntergeladen wurde).

Die folgende Zeile generiert eine Datumstextzeichenfolge:

Der Wert des Kalenderdatums, der Monatsnummer und der Jahresnummer wird hier mit den Methoden getDate, getMonth bzw. getYear ermittelt. Diese Methoden werden für ein dt-Objekt aufgerufen, das das aktuelle Datum enthält.

Die Datumstextzeichenfolge wird mithilfe der für das Dokumentobjekt definierten Schreibmethode in das HTML-Dokument ausgegeben:

Wir haben diese Methode bereits in den Beispielszenarien im ersten Kapitel unseres Buches verwendet.

Beachten Sie, dass das Date-Objekt auch Informationen über die aktuelle Uhrzeit enthält. Diese Informationen werden zur Anzeige mithilfe der Methoden getHours, getMinutes und getSeconds (jeweils Stunden, Minuten und Sekunden) abgerufen:

Das Erscheinungsbild eines HTML-Dokuments bei der Anzeige im Browserfenster von Microsoft Internet Explorer Version 4.0 ist in Abb. dargestellt. 2.2.

Reis. 2.2. Lokales Datum und Uhrzeit anzeigen

Die Verwendung anderer eingebauter Objekte werden wir später beim Studium des Materials demonstrieren.

Aus JavaScript-Sicht scheint der Browser eine hierarchisch organisierte Sammlung von Objekten zu sein. Durch Zugriff auf die Eigenschaften und Methoden dieser Objekte können Sie verschiedene Vorgänge am Browserfenster, am in dieses Fenster geladenen HTML-Dokument sowie an einzelnen im HTML-Dokument platzierten Objekten ausführen. Sie können beispielsweise neue Browserfenster erstellen, indem Sie HTML-Dokumente in diese laden, den Text eines HTML-Dokuments dynamisch generieren, auf in einem HTML-Dokument definierte Formularfelder zugreifen und so weiter.

Browserobjekte sind die Schnittstelle, über die JavaScript mit dem Benutzer und dem im Browserfenster geladenen HTML-Dokument sowie mit dem Browser selbst interagiert. In JavaScript können Sie keine neuen Klassen basierend auf den diesen Objekten entsprechenden Klassen erstellen, aber die Eigenschaften und Methoden von Browserobjekten stehen Ihnen zur Verfügung.

Die Hierarchie der Browserobjekte ist in Abb. schematisch dargestellt. 2.2.

Reis. 2.2. Hierarchie der Browserobjekte

Das Fensterobjekt befindet sich an der Wurzel der Hierarchie. Wenn ein HTML-Dokument in ein Browserfenster geladen wird, werden andere Objekte innerhalb dieses Objekts erstellt – Dokument, übergeordnetes Objekt, Rahmen, Position und oberes Objekt.

Wenn ein HTML-Dokument mit Frames in ein Browserfenster geladen wird, wird für jeden Frame ein eigenes Fenster erstellt, und dieses Fenster wird als Fensterobjekt erstellt.

Das Dokumentobjekt enthält weitere Objekte, deren Zusammensetzung vollständig durch das in das Browserfenster geladene HTML-Dokument bestimmt wird. Dies können Formulare, Links zu anderen HTML-Dokumenten oder lokale Links innerhalb desselben Dokuments, Objekte, die die URL des Dokuments definieren usw. sein.

Wenn das Dokument Formulare enthält, werden diese ebenfalls als hierarchische Menge von Objekten dargestellt. Ein Formularobjekt kann Objekte wie Schaltflächen, Schalter und Felder zur Eingabe von Textinformationen enthalten.

Durch Zugriff auf die Eigenschaften der oben aufgeführten Objekte kann ein JavaScript-Skript verschiedene Merkmale eines HTML-Dokuments ermitteln, beispielsweise den Titel. Es hat Zugriff auf alle im Dokument platzierten Links sowie auf die Inhalte der im HTML-Dokument definierten Formularfelder.

Lassen Sie uns noch eine sehr wichtige Anmerkung zu Browserobjekten machen.

Jedes dieser Objekte ist mit einer bestimmten Reihe von Ereignissen verknüpft, deren Verarbeitung in einem JavaScript-Skript möglich ist.

Beispielsweise sind die Ereignisse onLoad und onUnload mit dem Fensterobjekt verknüpft. Das erste dieser Ereignisse tritt auf, wenn der Browser das Laden des Fensters und aller darin enthaltenen Frames beendet (sofern diese Frames im Fenster definiert sind). Das zweite Ereignis tritt auf, wenn der Benutzer das Dokument beendet, indem er das Browserfenster schließt oder zu einem anderen Dokument wechselt.

Das JavaScript-Skript könnte dem Benutzer beispielsweise eine Willkommensnachricht anzeigen oder ihn zur Eingabe zusätzlicher Informationen bei der Verarbeitung des onLoad-Ereignisses auffordern. Wenn ein Fenster beendet wird (wenn das onUnload-Ereignis ausgelöst wird), kann das Skript alle mit diesem Fenster verknüpften Ressourcen freigeben oder eine Meldung auf dem Monitorbildschirm anzeigen.

Ereignisse sind auch mit anderen Browserobjekten verknüpft. Wir werden darüber sprechen, wenn wir diese Objekte beschreiben.

Zahlreiche Einsteigerbücher zur Programmiersprache C++ schlagen vor, sich eine Klasse als Datenstruktur vorzustellen, in der neben gewöhnlichen Feldern auch Funktionsmethoden für die Arbeit mit diesen Daten definiert sind. In der JavaScript-Sprache wird also die genau entgegengesetzte Methode verwendet, um eigene Klassen zu erstellen.

Eine JavaScript-Klasse wird als Funktion erstellt, die Eigenschaften definiert, die als Daten dienen. Methoden werden ebenfalls als Funktionen definiert, jedoch separat.

Lassen Sie uns ein konkretes Beispiel geben.

Nehmen wir an, wir müssen eine Klasse erstellen, die einen imaginären Telefondatenbankeintrag enthält. In dieser Klasse müssen wir Eigenschaften zum Speichern von Vornamen, Nachnamen, Telefonnummern und Adressen sowie ein spezielles Attribut für Datensätze bereitstellen, die vor unbefugtem Zugriff geschützt sind. Darüber hinaus ist es notwendig, Methoden zu entwickeln, mit denen der Inhalt eines Objekts in tabellarischer Form angezeigt werden kann, wie in Abb. 2.3.

Reis. 2.3. Anzeigen des Inhalts von Beiträgen

Erstellen wir zunächst unsere eigene Klasse namens myRecord. Möglicherweise sind noch keine Methoden vorhanden, wir werden sie später hinzufügen.

Die benötigte Klasse wird wie folgt erstellt:

Es ist leicht zu erkennen, dass die Beschreibung unserer Klasse nichts anderes als eine Konstruktorfunktion ist. Konstruktorparameter sollen die Eigenschaften eines Objekts festlegen, wenn es basierend auf einer Klasse erstellt wird.

Eigenschaften werden durch einfache Verweise auf ihre Namen definiert, gefolgt vom Schlüsselwort this. Dieses Schlüsselwort gibt hier an, dass die Anweisung auf die Eigenschaften des Objekts verweist, für das der Konstruktor aufgerufen wird, also auf das Objekt, das erstellt wird.

Beachten Sie, dass unser Konstruktor eine Eigenschaft namens secure auf false initialisiert. Der entsprechende Parameter wird im Konstruktor nicht bereitgestellt, was durchaus akzeptabel ist.

Wie verwende ich eine bestimmte Klasse?

Basierend auf dieser Klasse können Sie eine beliebige Anzahl von Objekten erstellen. Nachfolgend haben wir ein Fragment eines JavaScript-Skripts angegeben, in dem zwei Objekte rec1 und rec2 basierend auf der Klasse myRecord erstellt werden:

Objekte werden mit dem neuen Operator erstellt, der denjenigen bekannt ist, die Programme in C++ und Java geschrieben haben. Hier übergeben wir Parameter an den Konstruktor, um die Eigenschaften der erstellten Objekte zu initialisieren.

Was die Eigenschaft namens secure betrifft, so wird sie im rec2-Objekt initialisiert, nachdem letzteres erstellt wurde. Darauf wird der Wert true geschrieben. Wir haben die sichere Eigenschaft des rec1-Objekts nicht geändert, daher wird sie als falsch gespeichert.

Jetzt besteht unsere Aufgabe darin, der von uns definierten Klasse neue Methoden namens printTableHead, printTableEnd und printRecord hinzuzufügen. Die ersten beiden dieser Methoden geben jeweils das Anfangs- und Endfragment der Tabelle an das HTML-Dokument aus, und die dritte - Tabellenzeilen, die den Inhalt der Datensätze widerspiegeln.

In gekürzter Form wird die neue Definition der Klasse myRecord im Folgenden dargestellt:

Hier haben wir vor der Definition des Konstruktors Definitionen für die Funktionsmethoden unserer Klasse platziert. Darüber hinaus wurde dem Konstruktor die Definition neuer Eigenschaften hinzugefügt:

Sobald die Klasse auf diese Weise definiert ist, können Sie Objekte erstellen und bestimmte Methoden aufrufen:

Zurück zum oben in Abb. gezeigten Dokument. 2.3 präsentieren wir den vollständigen Quelltext (Listing 2.2).

Auflistung 2.2. Datei kapitel2/NewObject/NewObject.html

Die Definition der neuen Klasse myRecord und ihrer Methoden haben wir wie üblich im Header-Bereich des HTML-Dokuments platziert.

Die printTableHead-Methode druckt den Tabellenkopf in einem HTML-Dokument. Das Aussehen dieses Headers hängt vom Inhalt der Objekteigenschaften ab.

Zuerst überprüft die printTableHead-Methode die sichere Eigenschaft und ruft ihren Wert mithilfe des Schlüsselworts this ab:

Hier bedeutet dieses Schlüsselwort, dass die Eigenschaft des Objekts verwendet werden muss, für das die printTableHead-Methode aufgerufen wurde.

Wenn der Inhalt der sicheren Eigenschaft wahr ist, wird die Zeichenfolge „(Secure)“ in die Textvariable szSec geschrieben. Wenn es falsch ist, wird die Zeichenfolge „(Unsicher)“ in diese Variable geschrieben und die Farbe der Zeichenfolge wird auf Rot gesetzt.

Da in JavaScript alle Textzeichenfolgen (einschließlich Literale) Objekte der integrierten String-Klasse sind, können Sie für sie in dieser Klasse definierte Methoden aufrufen. Insbesondere mit der Methode „fontcolor“ können Sie die Farbe einer Linie festlegen, was wir auch verwendet haben.

Als nächstes gibt die printTableHead-Methode die Anweisung an das HTML-Dokument aus

Die printTableEnd-Methode druckt die Anweisung in das HTML-Dokument

"); }

Die letzte in unserer Klasse definierte Methode heißt printRecord. Es druckt den Inhalt der ersten vier Eigenschaften des Objekts als Zeile aus der Tabelle, die im HTML-Dokument durch die gerade beschriebene printTableHead-Funktion definiert wurde.

Bitte beachten Sie, dass der Inhalt der Objekteigenschaften kursiv gedruckt wird, wofür wir die Methode italics aufrufen:

Die Definition der myRecord-Klasse haben wir oben bereits beschrieben.

Kommen wir nun zum zweiten Teil unseres Skripts, der sich im Hauptteil des HTML-Dokuments befindet.

Hier erstellen wir zwei Objekte rec1 und rec2 basierend auf der Klasse myRecord und setzen dann die sichere Eigenschaft des rec2-Objekts auf true.

Wie Sie sehen, hat die Verwendung unserer eigenen Klasse die Aufgabe, die Inhalte von Datensätzen in unserer imaginären Telefondatenbank zu initialisieren und anzuzeigen, erheblich vereinfacht. Tatsächlich haben wir diese Aufgabe auf den Aufruf mehrerer zuvor in unserer Klasse definierter Methoden reduziert.

Damals, in den Tagen von XHTML/HTML4, standen Entwicklern nur wenige Optionen zur Verfügung, mit denen sie beliebige DOM-bezogene Daten speichern konnten. Sie könnten Ihre eigenen Attribute erfinden, aber das war riskant – Ihr Code wäre ungültig, Browser könnten Ihre Daten ignorieren und es könnte Probleme verursachen, wenn der Name mit Standard-HTML-Attributen übereinstimmte.

Daher blieben die meisten Entwickler bei den Attributen class oder rel, da sie die einzig sinnvolle Möglichkeit zum Speichern zusätzlicher Zeilen darstellten. Nehmen wir zum Beispiel an, wir erstellen ein Widget, um Nachrichten wie eine Twitter-Nachrichten-Timeline anzuzeigen. Im Idealfall sollte JavaScript konfigurierbar sein, ohne dass der Code neu geschrieben werden muss. Daher definieren wir die Benutzer-ID im Klassenattribut wie folgt:

Unser JavaScript-Code sucht nach einem Element mit der ID msglist . Mit dem Skript suchen wir nach Klassen, die mit user_ beginnen, und „bob“ ist in unserem Fall die Benutzer-ID, und wir zeigen alle Nachrichten dieses Benutzers an.

Nehmen wir an, wir möchten auch eine maximale Anzahl von Nachrichten festlegen und Nachrichten überspringen, die älter als sechs Monate (180 Tage) sind:

Unser Klassenattribut wird sehr schnell unübersichtlich – es ist einfacher, einen Fehler zu machen und das Parsen von Zeichenfolgen in JavaScript wird immer schwieriger.

Glücklicherweise wurde mit HTML5 die Möglichkeit eingeführt, benutzerdefinierte Attribute zu verwenden. Sie können jeden kleingeschriebenen Namen mit dem Präfix data- verwenden, zum Beispiel:

Benutzerdefinierte Datenattribute:

• Dies sind Zeichenfolgen. Sie können darin beliebige Informationen speichern, die als Zeichenfolge dargestellt oder codiert werden können, z. B. JSON. Die Typumwandlung muss mit JavaScript erfolgen
• sollte in Fällen verwendet werden, in denen keine geeigneten HTML5-Elemente oder -Attribute vorhanden sind
• beziehen Sie sich nur auf die Seite. Im Gegensatz zu Mikroformaten sollten sie von externen Systemen wie Suchmaschinen und Crawlern ignoriert werden

In allen Browsern können Sie Datenattribute mithilfe der Methoden getAttribute und setAttribute abrufen und ändern:

Var msglist = document.getElementById("msglist"); var show = msglist.getAttribute("data-list-size"); msglist.setAttribute("data-list-size", +show+3);

Dies funktioniert, sollte aber nur verwendet werden, um die Kompatibilität mit älteren Browsern aufrechtzuerhalten.

Ab jQuery 1.4.3 verarbeitet die Methode data() HTML5-Datenattribute. Sie müssen das Datenpräfix nicht explizit angeben, daher funktioniert Code wie dieser:

Var msglist = $("#msglist"); var show = msglist.data("list-size"); msglist.data("list-size", show+3);

Beachten Sie jedoch, dass jQuery versucht, die Werte solcher Attribute in geeignete Typen (Boolesche Werte, Zahlen, Objekte, Arrays oder Null) umzuwandeln, was sich auf das DOM auswirkt. Im Gegensatz zu setAttribute ersetzt die Methode data() das Attribut data-list-size nicht physisch. Wenn Sie seinen Wert außerhalb von jQuery überprüfen, beträgt er immer noch 5.

Schließlich haben wir eine API für die Arbeit mit HTML5-Datensätzen, die ein DOMStringMap-Objekt zurückgibt. Es ist wichtig zu bedenken, dass Datenattribute einem Objekt ohne Datenpräfixe zugeordnet werden, Bindestriche aus Namen entfernt werden und die Namen selbst in CamelCase umgewandelt werden, zum Beispiel:

Unser neuer Code:

Var msglist = document.getElementById("msglist"); var show = msglist.dataset.listSize; msglist.dataset.listSize = +show+3;

Diese API wird von allen modernen Browsern unterstützt, jedoch nicht von IE10 und niedriger. Für diese Browser gibt es eine Problemumgehung, aber es ist wahrscheinlich praktischer, jQuery zu verwenden, wenn Sie für ältere Browser schreiben.

Ein Artikel, in dem wir uns ansehen, welche Methoden es in jQuery für die Arbeit mit Datenattributen und der internen Datenspeicherung gibt.

In HTML5 können Sie jedem Dokumentelement benutzerdefinierte Attribute hinzufügen. Der Zweck dieser Attribute wird vom Webentwickler unabhängig bestimmt, in den meisten Fällen sind sie jedoch dazu gedacht, einige Informationen zu speichern, die dann in JavaScript-Skripten verwendet werden können. Benutzerdefinierte Attribute beginnen immer mit data-* :

Das Ausführen von Aktionen für Datenattribute in jQuery erfolgt normalerweise mithilfe der Methoden attr und removeAttr.

// den Wert des Datenattributs des ersten Elements des aktuellen Satzes abrufen $("selector").attr("data-*"); // den Wert des Datenattributs für alle ausgewählten Elemente hinzufügen oder ändern $("selector").attr("data-*","value"); // Den Wert des Datenattributs aus allen gefundenen Elementen entfernen. 1 Weg – mit attr $("selector").attr("data-*",null); Methode 2 – Verwenden von removeAttr $("selector").removeAttr("data-*");

Lassen Sie uns beispielsweise den Wert der Datenattribute des div-Elements mit id="phone-1" in der Browserkonsole anzeigen:

// Werte der Datenattribute abrufen var phoneInfo = "Name: " + $("#phone-1").attr("data-name") + "; Preis: " + $("#phone- 1"). attr("data-price"); // Werte auf der Konsole ausgeben console.log(phoneInfo);

Diese Methode (attr) gibt den Wert des Datenattributs als String zurück.

Fügen wir beispielsweise das Attribut „data-year“ zum obigen Element hinzu:

$("#phone-1").attr("data-year", 2016);

Wie Sie mit diesen Methoden arbeiten, erfahren Sie im jQuery-Artikel „Arbeiten mit Attributen von HTML-Elementen“ genauer.

Die Datenmethode wird in jQuery nicht zur Kommunikation mit Datenattributen verwendet. Sein Hauptzweck besteht darin, Daten aus dem internen Speicher von jQuery ($.cache) zu lesen oder Informationen darauf zu schreiben.

Der interne Speicher von jQuery ist eine Art Container, in dem Sie beliebige Informationen platzieren können, die einem bestimmten DOM-Element der aktuellen Seite zugeordnet sind.

Dennoch kann diese Methode HTML5-Datenattribute lesen und im internen Speicher ablegen. Dies geschieht nur, wenn im jQuery-Speicher kein Schlüssel vorhanden ist, dessen Name dem Namen des Datenattributs entspricht. Andernfalls erhalten Sie den Wert aus dem $.cache-Speicher.

Daher ist die Arbeit mit Datenattributen mithilfe der Datenmethode nur dann sinnvoll, wenn die weitere Arbeit mit ihnen über den jQuery-Store erfolgt.

Ein Beispiel, in dem wir uns ansehen, wie die Datenmethode mit dem Datenattribut funktioniert:

// Diese Aktion platziert das Preisdatenattribut im Speicher (falls es nicht im Speicher ist) $("#book-1").data("price"); //Wert 420 Rubel. // den Wert des Preisdatenattributs des Elements mit attr ändern $("#book-1").attr("data-price","513 rub."); // Den Preiswert lesen (da sich dieser Wert im $.cache-Speicher befindet, wird er daraus entnommen) $("#book-1").data("price"); //Wert 420 Rubel. // Den Preisschlüssel, der dem Element book-1 zugeordnet ist, aus dem Speicher entfernen $("#book-1").removeData("price"); // Den Preiswert lesen (da sich dieser Wert nicht im jQuery-Speicher befindet, wird er aus dem Datenattribut entnommen und in $.cache abgelegt) $("#book-1").data("price"); //Wert 513 Rubel.

Bei der Datenmethode entspricht der Schlüssel dem Namen des Datenattributs ohne das Datenpräfix.

// Wenn das div-Element mit id="pencil" keinen Farbschlüssel im jQuery-Speicher hat, lesen Sie den Wert des data-pencil-Attributs und platzieren Sie seinen Wert in $.cache $("#pencil").data ("Farbe");

Wenn außerdem das Ende des Datenattributnamens (nach data-) Bindestriche („-“) enthält, müssen beim Zugriff darauf mit der Datenmethode die Buchstaben vor dem Bindestrich durch Großbuchstaben ersetzt werden, ebenso wie die Bindestriche selbst entfernt werden. Beispielsweise sollte der Attributname data-last-name in der Datenmethode als lastName angegeben werden.

Eine weitere Sache bei der Arbeit mit der Datenmethode besteht darin, dass jQuery beim Parsen des Werts eines Datenattributs versucht, seinen Wert (String) in den entsprechenden JavaScript-Typ (Boolescher Wert, Zahl, Objekt, Array oder Null) umzuwandeln. Beispielsweise wird der Wert „420“ in die Zahl 420 umgewandelt. Wenn der Wert des Datenattributs ein Objekt (beginnend mit „(“) oder ein Array (beginnend mit „[“) ist, verwendet jQuery die Methode parseJSON, um Analysieren Sie den Wert. Dies bedeutet, dass der Inhalt des Attributs eine gültige JSON-Syntax haben muss (einschließlich der Angabe von Eigenschaftsnamen in doppelten Anführungszeichen). Wenn jedoch ein Versuch, den Wert des Datenattributs zu analysieren, fehlschlägt, bleibt es in seiner ursprünglichen Form (d. h. , als String).

Zusammenfassend wird die Datenmethode verwendet, um die folgenden Operationen auszuführen (abhängig von den angegebenen Argumenten):

1. Abrufen des Werts des mit einem Element verknüpften Schlüssels aus dem internen Speicher von jQuery:

$("selector").data("key");

Diese Variante der Datenmethode führt einen der folgenden Schritte aus:

• Das Datenattribut (dessen Name dem angegebenen Schlüssel entspricht) aus dem ersten Element des aktuellen Satzes lesen, es im Speicher ablegen und als Ergebnis den Wert dieses Schlüssels zurückgeben. Diese Methode führt diese Aktion nur aus, wenn das Element über ein Datenelement verfügt, das dem Schlüssel entspricht, und dieses Element im $.cache-Container keinen Eintrag mit dem angegebenen Schlüssel hat.
• Ruft den Wert des angegebenen Schlüssels aus dem jQuery-Speicher ab. Die Datenmethode führt diese Aktion nur aus, wenn das Element den angegebenen Schlüssel in $.cache hat.
• gibt ein undefiniertes oder leeres Objekt zurück, wenn keine der oben genannten Aktionen ausgeführt wird.

Wenn $("selector") mehrere Elemente zurückgibt, gibt diese Methode nur das erste Element in der resultierenden Menge zurück.

2. Abrufen aller Daten als JavaScript-Objekt aus dem jQuery-Speicher, der dem angegebenen Element zugeordnet ist:

// Die Datenmethode wird ohne Argumente aufgerufen $("selector").data();

Im Detail führt diese Variante der Datenmethode Folgendes aus:

3. Die Datenmethode wird nicht nur zum Lesen von Werten verwendet, sondern auch zum Schreiben von Daten (Schlüsselwert), die einem DOM-Element zugeordnet sind, in den internen Speicher von jQuery.

// Option 1 (das angegebene Schlüssel-Wert-Paar für jedes ausgewählte Element speichern): $("selector").data(key, value); // Schlüssel (Zeichenfolge) // Wert (Daten eines beliebigen Typs) // Option 2 (einen Satz von Schlüssel-Wert-Paaren (Objekt) für alle gefundenen Elemente festlegen): $("selector").data(obj); // obj ist ein JavaScript-Objekt, das Schlüssel-Wert-Paare enthält

Ein Beispiel für die Arbeit mit der Datenmethode:

//Platzieren Sie den Preisschlüssel mit einem Wert von 550 im jQuery-Speicher $("#book-js").data("price",550); // Mit dem #book-js-Element verknüpfte Informationen aus dem Store lesen (das Namensdatenattribut wird automatisch im Store platziert) $("#book-js").data(); // Den Wert des Preisschlüssels des #book-js-Elements abrufen $("#book-js").data("price"); // 550 // Holen Sie sich den Wert des Preisschlüssels des Elements #book-js $("#book-js").data("name"); // "JavaScript"

Schauen wir uns an, welche anderen Methoden es in jQuery neben data noch für die Arbeit mit der Datenspeicherung gibt.

Diese Methode dient dazu, mit einem bestimmten Element verknüpfte Daten aus dem internen Speicher von jQuery zu entfernen. Diese Methode funktioniert nicht mit Datenattributen, daher werden nicht alle dem Schlüssel entsprechenden Datenattribute gelöscht.

Die Syntax der Methode „removeData“ lautet:

// Option 1 – ohne Parameter (entfernt alle mit dem aktuellen Element verknüpften Daten aus dem internen jQuery-Container. Wenn als Ergebnis der Auswahl mehrere Elemente zurückgegeben werden, führt die Methode „removeData“ ihre Aktion (Entfernen von Daten aus $.cache) für aus jedes Element. $ ("selector").removeData(); // Option 2 - mit einem String-Parameter, der den Namen des Schlüssels enthält, der aus allen gefundenen Elementen entfernt werden muss $("selector").removeData("key") ; // Option 3 – beabsichtigt, mehrere mit einem Element verknüpfte Datenpaare aus dem internen Speicher von jQuery zu entfernen $("selector").removeData("key1 key2 ..."); // Option 4 – ähnelt nur Option 3 Die Schlüssel werden über das Array $("selector") angegeben.removeData(["key1","key2",...]);

Entfernen wir mehrere Schlüssel-Wert-Paare, die dem Element mit der ID="book-js" zugeordnet sind, aus dem jQuery-Speicher:

// Alle Schlüssel des #book-js-Elements lesen (Datenattribute automatisch im jQuery-Datencontainer platzieren) $("#book-js").data(); // Entfernen von 2 Schlüsseln, die mit #books-js verknüpft sind, aus dem jQuery-Datencontainer $("#book-js").removeData(["price","name"]);

Diese Funktion führt ähnliche Aktionen wie die Datenmethode aus, arbeitet jedoch im Gegensatz zu dieser auf einer niedrigeren Ebene. Daher wird in den meisten Fällen die Datenmethode verwendet, weil Es ist ein praktischeres Tool für die Arbeit mit dem internen Speicher von jQuery.

Diese Funktion ist nur für die Arbeit mit jQuery-Speicher gedacht und ruft im Gegensatz zur Methode $("selector").data() keine Daten aus HTML 5-Datenattributen ab.

Syntax der Funktion jQuery.data():

// Option 1 – Informationen im jQuery-Speicher speichern $.data(element,key,value); // Element – ​​DOM-Element, dem das Schlüssel-Wert-Paar zugeordnet wird // Schlüssel – Schlüssel (Zeichenfolge), der dem Wert zugeordnet wird // Wert – Wert (beliebiger Datentyp außer undefiniert) // Option 2 – Informationen abrufen aus dem jQuery-Speicher $.data(element,key); // Element – ​​DOM-Element, das mit den Daten verknüpft ist // Schlüssel – Name, mit dem der gewünschte Wert verknüpft ist // Option 3 – Rückgabe aller mit dem angegebenen Element verknüpften Daten aus dem Datenspeicher $.data(element); // Element – ​​DOM-Element, das mit Daten verknüpft ist

Ein Beispiel für die Verwendung der Funktion $.data() zum Speichern von Informationen, die einem bestimmten DOM-Element im jQuery-Speicher zugeordnet sind:

// Mit dem Element verknüpfte Informationen speichern id="book-html" $.data(document.getElementById("book-html"),"name","HTML in Aktion"); // Hinzufügen einer weiteren Information, die mit demselben Element verknüpft ist $.data(document.getElementById("book-html"),"price","760"); „760“ // Daten aus dem jQuery-Speicher abrufen, die mit dem Element id="book-html" als Objekt verknüpft sind var obj = $.data(document.getElementById("book-html")); // Den Wert des Objektnamens abrufen var name = obj.name; // Den Preiswert des Objekts ermitteln var price = obj.price;

Diese Funktion wird wie die Methode „removeData“ verwendet, um Daten aus dem internen Speicher von jQuery zu entfernen.

$.removeData() ist eine Low-Level-Funktion, genau wie $.data() . Daher ist es eine bequemere Option, die Methode data() anstelle der Funktion $.data() zu verwenden.

Mit der Funktion jQuery.removeData():

// Option 1 – Entfernen aller Informationen aus dem mit dem angegebenen Element verknüpften Speicher $.removeData(element); // element – ​​DOM-Element, mit dem die zu löschenden Daten verknüpft sind // Option 2 – entfernt ein Schlüssel-Wert-Paar aus dem Datensatz, der mit dem angegebenen Element verknüpft ist $.removeData(element,key); // Element – ​​mit Daten verknüpftes DOM-Element // Schlüssel – Schlüssel, der eine Reihe von Informationen (Schlüsselwert) definiert, die aus dem jQuery-Datencontainer entfernt werden müssen

Demonstration der Verwendung der Funktion „removeData“:

// Datenattribute in den jQuery-Speicher einfügen $("#book-css").data(); // Den Preisschlüssel aus dem jQuery-Store abrufen $("#book-css").data("price"); // 1170 // Namensschlüssel aus dem jQuery-Speicher abrufen $("#book-css").data("name"); // „CSS für Profis“ // Entfernen des Preisschlüssels aus dem Speicher $.removeData(document.getElementById("book-css"),"price"); // wenn wir einen nicht vorhandenen Elementschlüssel erhalten, erhalten wir den Wert undefiniert $.data(document.getElementById("book-css"),"price"); //nicht definiert

Diese Funktion ermittelt, ob ein Element Daten im internen Speicher von jQuery enthält.

Verwendung von $.hasData() :

$.hasData(element); // Element – ​​DOM-Element, das auf Daten in $.cache überprüft werden muss

Die hasData-Funktion gibt „true“ zurück, wenn im Speicher Daten vorhanden sind, die mit dem angegebenen Element verknüpft sind. Andernfalls gibt diese Funktion false zurück.

Der interne $.cache-Speicher wird auch von der jQuery-Bibliothek selbst verwendet. Ein Beispiel ist die Verwendung zum Speichern von jQuery-Ereignishandlercode.

Ein Beispiel für die Verwendung der hasData-Funktion:

// Überprüfung der Daten im internen Speicher, der dem Element #book-css $.hasData(document.getElementById("book-css")) zugeordnet ist; //false // Wert im internen Speicher ablegen $("#book-css").data("name","CSS für Profis"); // Überprüfung der Daten im internen Speicher, der dem Element #book-css $.hasData(document.getElementById("book-css")) zugeordnet ist; //true // Wert aus dem internen Speicher entfernen $.removeData(document.getElementById("book-css")); // Überprüfung der Daten im internen Speicher, der dem Element #book-css $.hasData(document.getElementById("book-css")) zugeordnet ist; //FALSCH

Wie Sie in jQuery mit Datenattributen arbeiten, die in der HTML5-Sprachspezifikation enthalten sind, erfahren Sie im Artikel „jQuery – Methoden Attr und RemoveAttr“. Diese Methoden (attr und removeAttr) werden nicht nur zum Verwalten von Datenattributen, sondern auch aller anderen Attribute von HTML-Elementen verwendet.