何时使用$（selector）.data（）和html data- *属性？

Question

我无法对这些案件进行分类：

// first
$('#myDiv').attr('data-foo', 1);    

// second
$('#myDiv').data('foo', 1);

第一种情况将data-foo附加到html标记，其中id为myDiv，第二种情况不是。

我的问题是：何时使用第一种和第二种情况？

p / s：我使用的是jquery 2.2.4版