jQuery data() vs attr()

jQuery에는 data 함수와 attr 함수가 있다.
둘 다 해당 태그에 값을 넣는 건 같지만, 두가지를 혼합해서 쓰면 원하는 값이 나오지 않는다.

1. 조회
var key = 'itemid';
var dataValue = $(selector).data(key);  // data 조회
var attrValue = $(selector).attr(key);  // attr 조회

2. 삽입
var key = 'itemid';
var value = '1234';
$(selector).data(key, value); // data 삽입
$(selector).attr(key, value); // attr 삽입

3. 차이점

	data()	attr()
같은점	key value 형식이다.
	object형식으로 따로 받을 수 있다. ex) $(selector).attr({ key: value, key2: value2 });
다른점	value에 object 형식을 넣을 수 있다.	value에 string만 넣을 수 있다.
	해당 태그에 데이터형으로 들어가며, 개발자툴의 엘리먼트를 보면 보이지 않는다.	해당 태그의 엘리먼트 형식으로 들어가며, 개발자툴에 값이 보인다.

4. 예제
<div id="tagid" data-itemid="15"></div>
$('#tagid').attr('data-itemid'); // 15
$('#tagid')data('itemid'); // 15
$('#tagid').data('itemid', '222');
$('#tagid').data('itemid'); // 222
$('#tagid').attr('itemid'); // 15
$('#tagid').attr('itemid', '111');
$('#tagid').data('itemid'); // 222
$('#tagid').attr('itemid'); // 111