Detaillierte Erläuterung der Verwendung der jQuery.data()-Funktion

Die Funktion

data() wird verwendet, um auf Daten zu allen Elementen zuzugreifen, die mit dem aktuellen jQuery-Objekt übereinstimmen.

Die Daten, auf die über die Funktion data() zugegriffen wird, sind temporäre Daten. Sobald die Seite aktualisiert wird, sind die zuvor gespeicherten Daten nicht mehr vorhanden.

Diese Funktion gehört zum jQuery-Objekt (Instanz). Wenn Sie die über die Funktion data() gespeicherten Daten entfernen müssen, verwenden Sie bitte die Funktion „removeData()“.

Syntax

Die Funktion data() hat die folgenden zwei Verwendungszwecke:

Verwendung 1:

jQueryObject.data( [ key [, value ] ] )

Zugriff auf Daten mit dem angegebenen Schlüsselnamen key. Wenn der Wertparameter angegeben ist, bedeutet dies, dass die Daten mit dem Wert von value im Schlüsselnamen gespeichert werden. Wenn der Wertparameter nicht angegeben ist, bedeutet dies, dass die zuvor im Schlüsselnamen gespeicherten Daten gelesen werden angegeben, werden die vorherigen Daten in Form eines Objekts zurückgegeben. Alle Daten werden gespeichert.

Verwendung zwei:

jQueryObject.data( object )

Übergeben Sie jeweils eine beliebige Anzahl von Schlüsselwertdaten in Form von Objekten gleichzeitig des Objekts Das Attribut ist der Schlüsselname und der Attributwert ist der Wert.

Hinweis: Alle „Daten speichern“-Vorgänge der data()-Funktion gelten für jedes Element, das mit dem aktuellen jQuery-Objekt übereinstimmt. Alle „Daten lesen“-Vorgänge gelten nur für das erste übereinstimmende Element.

Parameter

Bitte finden Sie die entsprechenden Parameter entsprechend den im vorherigen Syntaxabschnitt definierten Parameternamen.

Parameterbeschreibung

key Optional/Schlüsselname, angegeben durch String-Typ String.

Wert Optional/beliebiger Typ Jeder Datentyp, der gespeichert werden muss.

Objekt Objekt, das vom Typ der Objektklasse angegeben wird und zum Kapseln mehrerer Schlüssel-Wert-Paare und zum gleichzeitigen Speichern mehrerer Datenelemente verwendet wird.

Rückgabewert

data()Der Rückgabewert der Funktion ist von beliebigem Typ. Der Typ des Rückgabewerts hängt davon ab, ob die aktuelle data()-Funktion ausgeführt wird die Operation „Daten speichern“ oder eine Operation „Daten lesen“.

Wenn die Funktion data() eine Operation „Daten speichern“ ausführt, gibt sie das aktuelle jQuery-Objekt selbst zurück; wenn sie eine Operation „Daten lesen“ ausführt, gibt sie die gelesenen Daten zurück.

Wenn das aktuelle jQuery-Objekt mit mehreren Elementen übereinstimmt, verwendet die Funktion data() beim Lesen von Daten nur das erste übereinstimmende Element.

Wenn die entsprechenden Daten beim Ausführen der Datenfunktion (Schlüssel) nicht gefunden werden können (nur ein Parameterschlüssel wird übergeben), wird undefiniert zurückgegeben. Werden beim Ausführen der Funktion data() (ohne Parameter) die entsprechenden Daten nicht gefunden, wird ein leeres Objekt (ohne Attribute) zurückgegeben.

Beispiel & Beschreibung

Nehmen Sie den folgenden HTML-Code als Beispiel:

<div id="n1">
    <div id="n2">
        <ul id="n3">
            <li id="n4">item1</li>
            <li id="n5">item2</li>
            <li id="n6">item3</li>
        </ul>
    </div>  
</div>

Wir schreiben den folgenden jQuery-Code:

var $li = $("li");
// 同时向所有的li元素存储数据
$li.data("name", "CodePlayer");
$li.data("desc", "专注于编程开发技术分享");
$li.data("url", "http://www.365mini.com/");
var $n5 = $("#n5"); // 通过n4、n5、n6都可以读取数据
//  返回键值name所对应的数据
document.writeln( $n5.data("name") ); // CodePlayer
// 以对象形式返回所有的数据
var obj = $("#n6").data();
for(var i in obj){
    document.writeln( i + "=" + obj[i] + "<br>");   
}
/*输出：
name=CodePlayer
desc=专注于编程开发技术分享
url=http://www.365mini.com/
*/
//移除掉n4上存储的键名为name的数据
$("#n4").removeData("name");
// 虽然$li匹配3个li元素，但是读取数据只以第一个li元素n4为准，因此返回undefined
document.writeln( $li.data("name") ); // undefined
var object = { 
        name: "张三",
        age: 18,
        score: [87, 23, 56],
        options: { gender: "男", address: "水帘洞" }
    };
// 同时向所有的div元素以对象形式设置多个key-value数据
// value值可以是任意类型的数据，包括数组、对象等
$("div").data( object );
var $n2 = $("#n2"); // 通过n1、n2都可以读取数据
document.writeln( $n2.data("name") ); // 张三
document.writeln( $n2.data("score") ); // 87,23,56
document.writeln( $n2.data("options") ); // [object Object]

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung der jQuery.data()-Funktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!