[JQuery] HTML5의 Custom data selector

HTML5에서는 해당 요소에 사용자가 임의로 정한 속성값을 활용할 수 있습니다. 

즉, 태그에 간략히 데이터를 저장하는 것입니다.

 

사용방법

<태그 data-이름 = "값"></태그>

단, 이름에 대문자를 입력하면 자동으로 소문자로 변환되기 때문에 기본적으로 소문자를 사용해야 합니다.

 

예시

<div data-name="eunji"></div>
<div data-age="28"></div>

 

JQuery에서 접근하기

// 데이터 읽기
$('div').data('name');

//데이터 저장하기
$('div').data('name', 'eunji');

//데이터 지우기
$('div').removeData('name');

//셀렉트
$('[data-name=eunji]');

간혹, 데이터 함수가 적용이 잘 안되는 경우가 있다. 이럴때는 attr을 이용하여 동일하게 처리할 수 있습니다.

//데이터 읽기
$('div').data('data-name');

//데이터 저장하기
$('div').data('data-name', 'eunji')

 

data에 JSON객체를 저장할 수도 있습니다.

//저장 
$('span').data('me', {age : 28, name : 'eunji'});

//저장 형태
<div data-me='{"age" : "28", "name" : "eunji"}' />

 

css에서 이용하기

.div[data-name="eunji"] { background : yellow; }

 

<input type="hidden">을 사용하지 않고 데이터 값을 저장하고 가져 올 수 있다는 것을 알게되었습니다.