Edit in JSFiddle

// add some data to the div
var div1 = $("#div1");
div1.data("datakey", "datavalue");
div1.data("complexkey", {
    firstname: "Roger",
    lastname: "Federer",
    playTennis: function() {
        console.log("I Play Tennis");
    }
});
div1.data("crazykey", $("#div1"));
//same thing as above but this is way faster
$.data(div1.get(0), "somekey","somevalue");
// retrieve the data values
var outputDiv = $("#output");
outputDiv.append(div1.data("datakey") + "<br/>");
outputDiv.append(div1.data("somekey") + "<br/>");
var person= div1.data("complexkey");
outputDiv.append(person.firstname + "<br/>");
person.playTennis();
outputDiv.append(div1.data("crazykey").html());
// retrieving the whole data
console.log(div1.data());

// data events
var div2 = $("#div2");
var divEvents = $("#divEvents");
var f = function(arg1, arg2, arg3){
divEvents.append(arg1 + " " + arg2 + " " + arg3 + "<br/>");
};
//getData fired when retrieving value
div2.on('getData', function(e, key, value){f("getData", key, value);});
//setData fired before setting value
div2.on('setData', function(e, key, value){f("setData", key, value);});
//changeData fired after value is set
div2.on('changeData', function(e, key, value){f("changeData", key, value);});
div2.data("key1","value1");
console.log(div2.data("key1"));

//remove specific data
console.log(div1.data("datakey"));
div1.removeData("datakey");
console.log(div1.data("datakey"));
//remove all data
console.log(div1.data());
div1.removeData();
console.log(div1.data());

<div id="div1">some html</div>
<div id="output"></div>
<div id="div2">Events demo</div>
<div id="divEvents"></div>