jquery之data

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")
所以当我们第二次打印时会出现和第一次一样的情况