JQuery中元素的数据存储

原创 2016年05月31日 19:47:47
html5 dataset是新的HTML5标准,允许你在普通的元素标签里嵌入类似data-*的属性,来实现一些简单数据的存取。它的数量不受限制,并且也能由JavaScript动态修改,也支持CSS选择器进行样式设置。这使得data属性特别灵活,也非常强大。有了这样的属性我们能够更加有序直观的进行数据预设或存储。那么在不支持HTML5标准的浏览器中,我们如何实现数据存取呢?  

jQuery就提供了一个.data()的方法来处理这个问题

使用jQuery初学者一般不是很关心data方式,这个方法是jquery内部预用的,可以用来做性能优化,比如sizzle选择中可以用来缓存部分结果集等等。当然这个也是非常重要的一个API了,常常用于我们存放临时的一些数据,因为它是直接跟DOM元素对象绑定在一起的

jQuery提供的存储接口
jQuery.data( element, key, value ) //静态接口,存数据
jQuery.data( element, key ) //静态接口,取数据
.data( key, value ) //实例接口,存数据
.data( key ) //实例接口,存数据

2个方法在使用上存取都是通一个接口,传递元素,键值数据。在jQuery的官方文档中,建议用.data()方法来代替。

我们把DOM可以看作一个对象,那么我们往对象上是可以存在基本类型,引用类型的数据的,但是这里会引发一个问题,可能会存在循环引用的内存泄漏风险。

通过jQuery提供的数据接口,就很好的处理了这个问题了,我们不需要关心它底层是如何实现,只需要按照对应的data方法使用就行了。

同样的也提供2个对应的删除接口,使用上与data方法其实是一致的,只不过是一个是增加一个是删除罢了
jQuery.removeData( element [, name ] )
.removeData( [name ] )

参考下面边代码区域,2个代码段分别描述了静态与实例data的使用

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
    .left,
    .right {
        width: 300px;
        height: 120px;
    }

    .left div,
    .right div {
        width: 100px;
        height: 90px;
        padding: 5px;
        margin: 5px;
        float: left;
        border: 1px solid #ccc;
    }

    .left div {
        background: #bbffaa;
    }

    .right div {
        background: yellow;
    }
    </style>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
    <h2>jQuery.data()静态方法</h2>
    <div class="left">
        <div class="aaron">
            <p>点击看结果</p>
            <p>jQuery.data</p>
        </div>
        <div><span></span></div>
    </div>
    <h2>.data()实例方法</h2>
    <div class="right">
        <div class="aaron">
            <p>点击看结果</p>
            <p>.data</p>
        </div>
        <div><span></span></div>
    </div>
    <script type="text/javascript">
    $('.left').click(function() {
        var ele = $(this);
        //通过$.data方式设置数据
        $.data(ele, "a", "data test")
        $.data(ele, "b", {
            name : "旅游网"
        })
        //通过$.data方式取出数据
        var reset = $.data(ele, "a") + "</br>" + $.data(ele, "b").name
        ele.find('span').append(reset)
    })
    </script>
    <script type="text/javascript">
    $('.right').click(function() {
        var ele = $(this);
        //通过.data方式设置数据
        ele.data("a", "data test")
        ele.data("b", {
            name: "旅游网"
        })
        //通过.data方式取出数据
        var reset = ele.data("a") + "</br>" + ele.data("b").name
        ele.find('span').append(reset)
    })
    </script>
</body>

</html>
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

jQuery数据存储的相关方法

1.前言 jQuery允许把jQuery对象当作一个临时的“数据存储中心“,开发者能以key-value对的形式将数据存储到jQuery对象里,并林jQuery对象里取出之前存储的数据,也可以删除之...

jQuery.data() 存储数据

jQuery.data() 的实现方式

jQuery的属性与样式之元素的数据存储

html5 dataset是新的HTML5标准,允许你在普通的元素标签里嵌入类似data-*的属性,来实现一些简单数据的存取。它的数量不受限制,并且也能由JavaScript动态修改,也支持CSS选择...

天文学数据存储系统

  • 2016-09-08 21:35
  • 619KB
  • 下载

HTML5数据存储方案data-*与jQuery数据存储方案$.data()的区别

至此:jQuery数据缓存和HTML5 data-*属性介绍完毕,简单总结下比较关键的几点: 1.jQuery读取data-*会自动做数据类型转换,如果不想要这种转换只能使用attr()去获取原始的属...

大数据存储技术进展2017

  • 2017-08-17 16:26
  • 900KB
  • 下载

初学Android,数据存储之使用SQLite数据库(四十六)

SQLiteOpenHelper是Android提供的一个管理sqlite数据库的一个工具类主要用于创建一个数据库,并对数据库的版本进行管理。此类为一抽象类,使用是需要继承此类并实现该类的方法 onC...
  • lee576
  • lee576
  • 2012-09-13 17:23
  • 1560

数据存储备份与灾难恢复

  • 2015-12-03 23:50
  • 41.71MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)