jQuery中的data方法只能获取不能设置值?

data([key],[value]) 在元素上存放或读取数据,返回jQuery对象

上面是在jQuery手册中的截取,“存放”数据?

先看代码

<div id="div1" data-test="test">1</div>
<script>
    console.log($("#div1").data("test"));//test
</script>

OK,读取是正常的。
再来,

<div id="div1" data-test="test">1</div>
<script>
    $("#div1").data("test","name");
</script>

这里看一下元素
这里写图片描述

奇怪,怎么data-test的值还是test?

回去看手册,

当参数为两个时,为像该jQuery对象对应的DOM中存储key-value键值对的数据

似乎没有发现什么问题,或者可以打印一下

<div id="div1" data-test="test">1</div>
<script>
    $("#div1").data("test","name");
    console.log($("#div1").data("test"));//name
</script>

再输出的时候发现$(“#div1”).data(“test”)的值是“name”
而元素中依然是

<div id="div1" data-test="test">1</div>

先了解一下data

其实是这样的,当我们执行例如这样的语句时 $(“#id”).data(“test”); (简化后的过程)

第一步: jQuery 会获取到 $(“#id”) 元素,对吧、
第二步: 执行到 data方法 的时候,他会通过 attributes 取我们要的对应值。
第三步:返回结果给我们,然后 jQuery 把值缓存到内部对象里 第一次取的时候,我们可以得到的undefined,字符串,数字或者解析后的json。

那有人会说这个和 attr 有什么区别呢? 当我们第二次执行$(“#id”).data(“test”); 的时候:

第一步: jQuery 会获取到 $(“#id”) 元素,和上面一样。
第二步:执行到 data方法 的时候,从 jQuery 的缓存中取值
为什么不是从 attributes 取值,而是从缓存中取呢?
缓存其实是js的对象,简单说就类似 var cache = {};
jQuery 在第一次取值之后就会保存到这个缓存对象中,这样我们再次操作的时候就非常快了、 往往性能的损耗都是在 dom 操作上,所以避免重复操作 dom 是非常必要的。

以上转载自http://www.jb51.net/article/51215.htm

现在可以看到,data方法确实给在元素上存放或读取数据
而这个存放,实质上并没有改变元素的上的data属性,而是在缓存中为该对象设置了一个值,在以后的获取中,也是直接的得到缓存中的一个值。

其实这样会有一个问题,就是不能正常获得元素中的属性值,
如果不了解这个机制的人,可能会掉下坑就爬不起来了。
(果然还是有必要了解一下jquery的源码啊)

至于设置元素上的data属性值,可以用attr()方法吧

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值