jQuery中的$.fn.data数据缓存

$.fn.data、$.fn.attr、$.fn.prop区别

$.fn.data、$.fn.attr、$.fn.prop的使用方法都差不多，但是他们的用法不一样。

<script src="jQuery.js"></script>
<div id="div"></div>
<script>
    $(function(){
        var $div = $('#div'),
                oDiv = document.getElementById('div');

        // attr 给元素添加页面属性 <div id="div" attr="attr"></div>  一般应用于设置和获取标准html属性
        $div.attr('attr', 'attr');
        console.log($div.attr('attr')); // attr
        // 原理
        oDiv.setAttribute('attr', 'attr');
        console.log(oDiv.getAttribute('attr')); // attr

        // prop 给元素对象添加属性
        $div.prop('prop', 'prop');
        console.log($div.prop('prop')); // prop
        // 原理
        oDiv['prop'] =  'prop';
        console.log(oDiv['prop']); // prop


        // data 存储大数据(DOM元素和对象之间相互引用，导致大部分浏览器内存泄漏)
        $div.data('data', 'data');
        console.log($div.data('data')); // data
        // 原理
        // 通过cache中介对象来做元素和对象的映射
    });
</script>

$.data相关方法介绍

1、$.data(oDom/$.fn, key, value)：设置数据

2、$.data(oDom/$.fn, key)：获取数据

3、$.removeData(oDom/$.fn, key)：删除数据

4、$.hasData(oDom/$.fn, key)：判断数据是否存在

<script src="jQuery.js"></script>
<div id="div"></div>
<script>
    $(function(){
        var $div = $('#div');

        // 添加数据
        $.data($div, 'name', 'hum');

        // 获取数据
        console.log($.data($div, 'name')); // hum

        // 判断数据
        console.log($.hasData($div, 'name')); // true

        // 删除数据
        $.removeData($div, 'name');

        // 获取数据
        console.log($.data($div, 'name')); // undefined
        console.log($.hasData($div, 'name')); // false
    });
</script>

$.fn.data相关方法介绍

1、$.fn.data(key, value)：添加数据

2、$.fn.data(key)：获取数据

3、$.fn.removeData(key)：删除数据

<script src="jQuery.js"></script>
<div id="div"></div>
<script>
    $(function(){
        var $div = $('#div');

        // 添加数据
        $div.data('name', 'hum');

        // 获取数据
        console.log($div.data('name')); // hum

        // 删除数据
        $div.removeData('name');

        // 获取数据
        console.log($div.data('name')); // undefined
    });
</script>