jQuery 数据缓存 data()
本篇文章给大家介绍本人最常用到的jQuery方法之一 **(select).data(key,value)∗∗——这是jQuery提供的数据缓存方法。与之对应的方法是(select).data(key,value)** ——这是jQuery提供的数据缓存方法。与之对应的方法是(select).data(key,value)∗∗——这是jQuery提供的数据缓存方法。与之对应的方法是(select).removeData(name) 我好像还从来没使用过该方法，回归本文章主题，下面介绍本人在使用该方法的姿势：
<!-- html -->
<input type="button" id="btn1" data-name="张三" data-age="19" value="查看详情" />
<!-- js -->
$("#btn1").click(function () {
console.log($(this).data("name")); //张三
console.log($(this).data("age")); //年龄
$(this).data("age",22); //自定义属性age值修改为22
console.log($(this).data("age")); //22
});复制代码上面的示例用到了HTML5 的自定义属性 data-* 对于不支持HTML5的低版本浏览器，您也不需要担心不兼容问题。可以放心使用。该方法支持传递两个参数，key和value 当只传递key参数时表示获取属性，传递value参数时表示设置属性，这是jQuery方法一贯使用方式，很是方便。
从上面示例好像还是看不出有多大的作用，于是我不丝毫不吝啬的再写了一个示例，请往下看
设当前有一个数据列表，每个列表都有一个【详情】按钮，当前点击按钮后，通过ajax请求该数据的详细信息，代码如下：
<!-- html -->
<input type="button" data-uid="101" value="详情"></input>
<input type="button" data-uid="104" value="详情"></input>
<input type="button" data-uid="105" value="详情"></input>
<input type="button" data-uid="107" value="详情"></input>
<!-- js -->
$("input").click(function () {
var uid=$(this).data("uid"); //缓存当前用户id
//提示正在查询中
$.post("getUserInfo",{
userId:uid
},function (res) {
//请求成功后的回调，详细的数据展示
});
});复制代码这个示例充分的展示了本篇文章所介绍的方法的使用。举一反三，能举的栗子还有更多，如：的页面切换，页面滚动条滚动的位置等。
如果您是一个jQuery插件开发者，您一定会对该方法情有独钟，如果您还没有使用过，那赶紧去尝试吧，相信你也会爱上她！
作者：黄河爱浪
链接：https://juejin.cn/post/7028131504597237797