Explication détaillée de l'utilisation de la fonction jQuery.data()

La fonction

data() est utilisée pour accéder aux données sur tous les éléments correspondant à l'objet jQuery actuel .

Les données accessibles via la fonction data() sont des données temporaires. Une fois la page actualisée, les données précédemment stockées n'existeront plus.

Cette fonction appartient à l'objet (instance) jQuery. Si vous devez supprimer les données stockées via la fonction data(), veuillez utiliser la fonction removeData().

Syntaxe

La fonction data() a les deux utilisations suivantes :

Utilisation 1 :

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

Accédez aux données avec la clé du nom de clé spécifiée. Si le paramètre value est spécifié, cela signifie que les données avec la valeur value sont stockées dans le nom de la clé ; si le paramètre value n'est pas spécifié, cela signifie que les données précédemment stockées dans le nom de la clé sont lues si aucun paramètre n'est spécifié ; spécifiée, les données précédentes sont renvoyées sous la forme d'un objet. Toutes les données stockées.

Utilisation deux :

jQueryObject.data( object)

Transmettez n'importe quel nombre de données clé-valeur sous forme d'objets en même temps, chacun de l'objet L'attribut est le nom de la clé et la valeur de l'attribut est la valeur.

Remarque : toutes les opérations de "stockage des données" de la fonction data() concernent chaque élément correspondant à l'objet jQuery actuel ; toutes les opérations de "lecture des données" concernent uniquement le premier élément correspondant.

Paramètres

Veuillez retrouver les paramètres correspondants en fonction des noms de paramètres définis dans la section de syntaxe précédente.

Description du paramètre

clé Facultatif/Nom de clé spécifié par le type de chaîne String.

valeur Facultatif/tout type Tout type de données qui doivent être stockées.

object Object spécifié par le type Object class , utilisé pour encapsuler plusieurs paires clé-valeur et stocker plusieurs éléments de données en même temps.

Valeur de retour

data()La valeur de retour de la fonction est de n'importe quel type. Le type de la valeur de retour dépend de l'exécution ou non de la fonction data() actuelle. l'opération "stocker les données" ou une opération "lire les données".

Si la fonction data() effectue une opération "stocker les données", elle renvoie elle-même l'objet jQuery actuel ; si elle effectue une opération "lire les données", elle renvoie les données lues.

Si l'objet jQuery actuel correspond à plusieurs éléments, lors de la lecture des données, la fonction data() utilise uniquement le premier élément correspondant.

Si les données correspondantes ne peuvent pas être trouvées lors de l'exécution de la fonction data(key) (une seule clé de paramètre est transmise), undefined sera renvoyé. Si les données correspondantes ne sont pas trouvées lors de l'exécution de la fonction data() (sans aucun paramètre), un objet vide (sans aucun attribut) est renvoyé.

Exemple et description

Prenons comme exemple le code HTML suivant :

<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>

Nous écrivons le code jQuery suivant :

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]

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!