jQuery之美——数据缓存

上篇回顾：jQuery之美——显式遍历

本篇文章给大家介绍本人最常用到的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) {
        //请求成功后的回调，详细的数据展示
    });
});

这个示例充分的展示了本篇文章所介绍的方法的使用。举一反三，能举的栗子还有更多，如：<iframe>的页面切换，页面滚动条滚动的位置等。

如果您是一个jQuery插件开发者，您一定会对该方法情有独钟，如果您还没有使用过，那赶紧去尝试吧，相信你也会爱上她！

下篇预告：jQuery之美——尺寸

更多精彩文章，敬请持续关注——WEB前端梦之蓝

用微信扫描下方的二维码可直接关注该公众号哦，或者打开微信公众号搜索 “web-7258”，关注后会在第一时间将最新文章推送给您哦！

jQuery之美——数据缓存

猜你喜欢