js 的 $.data() 和 $('div').data() 缓存机制
这两种方式是有区别的,写个小例子
...
<div id="people">
</div>
...
// 注意这里是两个不同的对象 lucy === lily false
var lucy = $("#people");
var lily = $("#people");
// 分别设置age
lucy.data('age',12);
lily.data('age',13);
lucy.data('age'); // 13(注意)
lily.data('age'); // 13
为什么导致这样的情况呢?
大家再看一个例子
// 注意这里是两个不同的对象 lucy === lily false
var lucy = $("#people");
var lily = $("#people");
$.data(lucy,'age',12);
$.data(lily,'age',13);
$.data(lucy,'age'); // 12(注意)
$.data(lily,'age'); // 13
大家看到了吧,这个地方获取出来的 lucy age为12 和上面是有区别的,为什么呢?
对于jquery中的封装,两个是有区别的。
简单的来讲:(注意这是高能预警)
lucy.data() 是针对dom对象的。
$.data(lucy) 是针对jquery对象的。
实际上对于这两者而言,其内部实现方法都是一样的,只不过lucy.data() 在调用底层cache方法的时候,将进行了this[0]处理。
如果要使用$.data来获取 某个元素的值的话,也是可以的,使用 $.data(lucy[0])
再给大家补充一点:
如果lucy是一个li标签,那么$("li").data('hello','world') 这个时候,等于给所有的li标签添加了一个缓存值,名字叫做hello,对应的value 为world。
这个时候再使用$.data(lucy[0]) 来获取属性的时候,实际上是获取整个dom元素中的,第一个li标签的hello的值world
实际上整个cache过程,主要是Data实例对象的cache
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· C#/.NET/.NET Core技术前沿周刊 | 第 29 期(2025年3.1-3.9)
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异