jQuery笔记——工具函数——缓存

最新推荐文章于 2024-07-14 16:34:58 发布

行走的鹿

最新推荐文章于 2024-07-14 16:34:58 发布

阅读量346

点赞数

文章标签： jquery 缓存

本文链接：https://blog.csdn.net/Deer_F/article/details/53750447

版权

数据缓存作用：在一个元素上存取数据，避免循环引用的风险。

一、定义缓存

data（）函数：为jQuery对象定义缓存数据

jQuery.data（element，key，value）

参数解释：

element：要关联数据的DOM对象

key：存储的数据名

value：新数据值

允许在DOM元素上附加任意类型的数据，避免了循环引用的内存泄漏风险。

注意：该工具目前不提供在XML文档上跨平台设置，且IE浏览器不允许通过自定义属性附加数据

应用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定义缓存</title>
    <script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#menu li").data("type" , "menu");
            $("#news li").data("type" , "news");
        })
    </script>
</head>
<body>
<ul id="menu">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<ul id="news">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
</body>
</html>

如果jQuery集合指向多个元素，则将为所有元素定义缓存数据。

该函数在DOM元素上存放任何形式的数据。

为方便jQuery对象操作，jQuery有把全局函数data（）绑定到jQuery.fn原型对象中，从而实现在jQuery对象上直接调用data（）方法。

二、读取缓存

jQuery.data（element，key）返回具体数据

jQuery.data（element）返回Object

参数解释：

element：要关联数据的DOM对象

key：存储的数据名

如果没有设置任何值，返回null

如果jQuery指向多个元素，则将只返回第一个元素的对应缓存数据

调用没有参数的jQuery.data（element）时将获取一个作为JavaScript对象的所有值。jQuery内部自身使用这个方法来绑定数据，如事件处理器，所以不要以为它只包含数据存储的代码。

应用：

            $("li").each(function (index) {
                if($(this).data("type") == "menu"){
                    $(this).text("导航" + (index + 1))
                }
                else if($(this).data("type") == "news"){
                    $(this).text("新闻" + (index + 1))
                }
            });