Rumah > hujung hadapan web > tutorial js > 对jQuery.data().用法的介绍及实例讲解

对jQuery.data().用法的介绍及实例讲解

巴扎黑
Lepaskan: 2017-06-20 09:57:33
asal
1228 orang telah melayarinya

定义和用法

data() 方法向被选元素附加数据,或者从被选元素获取数据。

注释:这是底层级的方法;使用 .data() 更加方便。

从元素返回数据

从被选元素中返回附加的数据。

语法

$(selector).data(name)

参数               描述

name          可选。规定要取回的数据的名称。

如果没有规定名称,则该方法将以对象的形式从元素中返回所有存储的数据。

向元素附加数据

向被选元素附加数据。

语法

$(selector).data(name,value)

参数                         描述

name                  必需。规定要设置的数据的名称。    

value                   必需。规定要设置的数据的值。    

使用对象向元素附加数据

使用带有名称/值对的对象向被选元素添加数据。

语法

$(selector).data(object)

我用的是chrome49,这个方法涉及到JQuery版本问题,我手里有3.0的,有1.9.1,后面将1.9.1及其以前的称为低版本,3.0称为高版本

测试例子用到的showMessage方法如下

showMessage.i = 0;
function showMessage(object)
{
  var body = $("body")[0];
  var $p =$("#debugp");
  
  if($p.length==0)
  {
    $p = $("<p/>").attr("id","debugp");
    $(body).prepend($p);
  }
  $p[0].innerHTML += "<br/>"+(showAttribute.i++)+" | "+object;
}
Salin selepas log masuk

(0)$.data(obj,key,value)

key值为字符串类型,为数字、对象(var lol={}),是没有意义的,value值可以为普通类型,当为引用类型时传递的是引用而不是克隆

a.

var obj = {"name":"寒冰射手","age":"12"};
$.data(obj,"height",165);
showMessage($.data(obj,"height"));
Salin selepas log masuk

$.data实际将数据放在了对象属性上,类似于obj.sex="女",无论你通过$.data添加几个key给obj,在obj只会多出一个类似于jQuery300082932543555993442

300082932543555993442是jQuery产生的随机数,它指向一个对象,对象里面通过key-value的形式存储着你添加的数据

低版本可以通过for-in遍历出jQuery300082932543555993442,高版本只能通过debug工具查看了

b.

当value是一个对象时,传递的是引用

var husband = ["蛮族之王"];
var obj = {"name":"寒冰射手","age":"12"};
$.data(obj,"husband",husband);
$.data(obj,husband)[0] = "遁地龙卷风";
showMessage($.data(obj,husband));//输出   遁地龙卷风
Salin selepas log masuk

(2)

$(selector).data(key,value)
$("#lol").data("name","寒冰射手");
showMessage($("#lol").data("name"));
Salin selepas log masuk

$(selector).data将数据绑定在HTML DOM元素上,剩下的特性与$.data方法一样,不过可以通过for-in得到添加的对象

Atas ialah kandungan terperinci 对jQuery.data().用法的介绍及实例讲解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan