data属性は「data-」を接頭辞につけた属性で自由に定義できる。
そしてそれをjQueryで操作するのが「.data()」である。

例えば、以下のようにhidden属性でデータを横に置いている処理を…。
┌──────────────────────────────────────┐
│$(function(){                                                               │
│    $(':button').on('click', function() {                                   │
│        alert($(this).closest('div').find(':hidden[name="key"]').val());    │
│    });                                                                     │
│});                                                                         │
├──────────────────────────────────────┤
│<div>                                                                       │
│<input type="button" value="表示"/>                                         │
│<input type="hidden" name="key" value="値"/>                                │
│</div>                                                                      │
└──────────────────────────────────────┘

以下のようにdata属性として内包させることができる。
┌──────────────────────────────────────┐
│$(function(){                                                               │
│    $(':button').on('click', function() {                                   │
│        alert($(this).data('key'));                                         │
│    });                                                                     │
│});                                                                         │
├──────────────────────────────────────┤
│<input type="button" value="表示" data-key="値"/>                           │
└──────────────────────────────────────┘
「.data('key')」のように「data-」を外した残りを指定して
参照することができるのだが、元々、「data-key」という属性なので
「.attr('data-key')」のように「.attr()」でフルネームでも取得できる。