jQuery Data Function Example

Let's have a closer look at the jQuery .data() function.

Demo Code Download

Description

Updates to jQuery 1.4 has seen the ability to attach data of any type to DOM elements. This is very useful alternative to storing data in JavaScript Objects or such. There are two versions: $.data() which takes in the element as a parameter; or .data() which can attach directly on matched elements. It is worth noting that $.data() returns a data object to the caller whereas .data() does not. There are also many utility functions such as $.hasData(), $.removeData() that help with data management. Lets have a look at an example of the data jQuery function in action. Further Reading »

Demo

jQuery Function Demo - jQuery4u.com

Demo: Attaching data to DOM elements.

The following example set/get a data object onto the div for this demo area.

Run Demo View Code

Set data | Get data | Has data? | Remove data
Data:

Download

The download package includes all the inline HTML, CSS, JavaScript, jQuery and images required for the .data() function demo so you can try it yourself and change as you please.

The full code listing for all jQuery functions have been now added to GitHub, you can get them there, we are making them work with the latest versions of jQuery!

Code

<!-- Copyright 2011 jQuery4u.com -->
<!DOCTYPE html>
<html>
<title>jQuery Function Demo - jQuery4u.com</title>
<head>
    <script src="http://www.jquery4u.com/function-demos/js/jquery-1.6.4.min.js"></script>
    <script src="http://www.jquery4u.com/scripts/function-demos-script.js"></script>

    <script type="text/javascript">

    var JQFUNCS =
    {
        runFunc:
        {
            /* ------------------------------ data Demo ------------------------------ */
            "data":
            {
                run: function(id)
                {
                    var demobox = $('#'+id), demoboxInput = $('#'+id+' input'), datadisplay = $('#'+id+' #datadisplay');

                    $('#'+id+' .set').bind('click', function(e)
                    {
                        e.preventDefault();
                        datadisplay.html($.data(demobox,"field1",demoboxInput.val()));
                    });

                    $('#'+id+' .get').bind('click', function(e)
                    {
                        e.preventDefault();
                        alert($.data(demobox,"field1"));
                    });

                    $('#'+id+' .has').bind('click', function(e)
                    {
                        e.preventDefault();
                        alert($.hasData(demobox));
                    });

                    $('#'+id+' .remove').bind('click', function(e)
                    {
                        e.preventDefault();
                        $.removeData(demobox);
                        datadisplay.html($.data(demobox));
                    });
                },

                reset: function(id)
                {
                    $('#'+id+' input').removeData().val('');
                    $('#'+id+' #datadisplay').empty();
                    $('#'+id).hide();
                }
            }
        }
    }

    </script>

</head>
<body>

<p class="example">Demo: Attaching data to DOM elements.</p>
<p>The following example set/get a data object onto the div for this demo area.</p>
<p><a href="#" id="data-demobtn" class="demobtn btn actionr">Run Demo</a> <a href="#" id="data-codebtn" class="codebtn btn actionr">View Code</a> <a href="#" id="data-resetbtn" class="resetbtn btn actionr" style="display: none;">Reset</a></p>
<div class="demoarea" id="data" style="border:1px solid orange; padding:25px;height: 100px;">
    <div style="width:300px;float:left;">
        <form><label>Enter something: </label><input/></form>
        <a class="set" href="#">Set data</a> | <a class="get" href="#">Get data</a> | <a class="has" href="#">Has data?</a> | <a class="remove" href="#">Remove data</a>
    </div>
    <div style="width:250px; display:inline-block; height: 50px;font-size:16px;color:blue;">
        Data: <span id="datadisplay" style="padding 25px;"></span>
    </div>
</div>

</body>
</html>
<!-- Copyright 2011 jQuery4u.com -->