jQueryでカスタムデータ属性(data-*)の設定/取得を行うメソッドにはdata()とattr()があるけど、全く別物だったのでメモ。
結論から言うと
attr()- HTMLのカスタムデータ属性(data-*)を読み書きする
- 値は常に文字列として扱われる
data()- jQuery内のキャッシュのデータを読み書きする（ただし、取得時に該当キャッシュが無ければカスタムデータ属性を取得する）
- 値には自動で型が設定される（文字列、数値、Bool値、オブジェクト、配列）
たとえば
<div id="fruit" data-number="01">りんご</div>
とあった場合、attr()とdata()を混在させると想定通りにならないことがある。
例その１
// まずキャッシュを見に行くけど最初は'number'が存在しないので、カスタムデータ属性を見に行って"01"を取得する
// そしてついでにデータをキャッシュする
$('#fruit').data('number')
// attr()を使ってカスタムデータ属性を変えてみる
$('#fruit').attr('data-number', '02')
// キャッシュを見に行くと前回取得時に作ったキャッシュがあるので、そこから "01" を取得する
$('#fruit').data('number')
例その２
// キャッシュに'number'の値として "02" を登録
$('#fruit').data('number', '02')
// attr()を使ってもカスタムデータ属性を見に行くので、"01" を取得する
$('#fruit').attr('data-number') // "01"
// data()を使うと、設定した値である "02" が取得できる
$('#fruit').data('number') // "02"
jQuery ver.1.11.0 で試してみたけど、"02"は文字列として解釈されるっぽい。
以前のバージョンだと"02"は2になってたみたいだけど…。どのバージョンから変わったかは未確認。
"2"ならdata()を挟むことで数値型になった。