HTML5 data- 와 jQuery

# 사용방법 1>

<div id="list1" data-id="1" data-name="홍길동"> 오호호 </div>

jQuery

var obj = $('#list1');

var data_id = obj .data('id');

var data_name = ob.data('name');

# 사용방법 2>

<div id="list2" data-id="2" data-member-name="유관순"> 대한독립만세 </div>

jQuery

var obj2 = $('#list2');

var data_id = obj2.data('id');

var data_member_name = obj2.data('memberName');

# 사용방법 3>

<div id="list3" data-id="3" data-options="{'name':'이순신', 'level':'장군'}"> 이순신 장군 </div>

jQuery

var obj3 = $('list3');

var data_id = obj3.data('id');

var data_options_name = obj3.data('options').name;

var data_options_level = obj3.data('options').level;

적극적으로 활용하세요.

저 같은 경우엔 touch start, touch move, touch end 같은 이벤트를 활용할때

a href 링크 대싱 data-url 를 활용해서 사용하고 있습니다.

<a href="">메뉴1</a> -> <a data-url="">메뉴 1</a>

$('a').on('click', function(){

var data_url = $(this).data('url');

window.location = data_url;

});