jQuery 数据缓存 data()

今天药忘吃喽~ 2022-05-14 13:22 112阅读 0赞

本篇文章给大家介绍本人最常用到的jQuery方法之一  **$(select).data(key,value) **——这是jQuery提供的数据缓存方法。与之对应的方法是  $(select).removeData(name)  我好像还从来没使用过该方法，回归本文章主题，下面介绍本人在使用该方法的姿势：

<input type="button" id="btn1" data-name="张三" data-age="19" value="查看详情" />
    
    
    $("#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请求该数据的详细信息，代码如下：

<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>
    
    
    $("input").click(function () {
        var uid=$(this).data("uid");  //缓存当前用户id
        //提示正在查询中
        $.post("getUserInfo",{
            userId:uid
        },function (res) {
            //请求成功后的回调，详细的数据展示
        });
    });

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

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

> 作者：[黄河爱浪][Link 1] QQ：1846492969，邮箱：helang.love@qq.com
> 
> 微信公众号：`web-7258`，本文原创，著作权归作者所有，转载请注明原链接及出处。
> 
> 更多精彩文章，请扫下方二维码关注我的公众号
> 
> ![20190512094840637.jpg][]

[Link 1]: https://blog.csdn.net/u013350495
[20190512094840637.jpg]: /images/20220514/83750aa273b6467b87419c5bbb614388.png