data是jquery里面用来存储临时数据的神器，具体用法如下：
$( "body" ).data( "foo", 52 ); $( "body" ).data( "bar", { myType: "test", count: 40 } ); $( "body" ).data( { baz: [ 1, 2, 3 ] } ); $( "body" ).data( "foo" ); // 52 $( "body" ).data(); // { foo: 52, bar: { myType: "test", count: 40 }, baz: [ 1, 2, 3 ] }
用法不难，但是有如下一种情况可能会遇到些小问题：
<div id="data_carrier" data-msg="msg"></div>
var $dataMsg = $("#data_carrier"); setTimeout(function(){ $dataMsg.attr("data-msg","newMsg"); console.log($dataMsg.data("msg")) },100); console.log($dataMsg.data("msg"));
看看控制台：
两个都是msg，对于这种情况，我的理解是，当我们调用data时，它首先是去查找我们之前是否在该元素上保存过信息，也就是是否有过
$dataMsg.data("msg","xxx")
的操作，如果有，data就会返回之前设置过的值，如果没有设置过，它就会去获取该元素的data-msg的属性值，也就是
$dataMsg.attr("data-msg")
如果没有值则返回undefined，如果有值则返回该值，并且自动将该值储存在该元素上，也就相当于自动执行了这段代码：
$dataMsg.data("msg","xxx")
所以当我们第二次打印时会出现和第一次一样的情况
原文：http://www.cnblogs.com/dongchaoge/p/4944573.html