[jQuery] HTML5의 커스텀 데이터 속성을 제이쿼리를 이용하여 조작하기

HTML5에서는 해당 요소에서 사용자가 임의로 지정한 속성값을 활용할 수 있으며, 이를 Custom Data Attribute 라고 부른다.

1	<div data-name="dataName" data-value="dataValue">text</div>

이처럼 ‘data-‘를 앞에 붙여서 속성명을 지정하고 값을 부여하면 된다. 단 이때, 속성명에 대문자를 입력하면 자동으로 소문자로 변환되기 때문에, 기본적으로 소문자를 사용할 것이 권장된다. 아니, 소문자를 써야한다.

제이쿼리에서는 data() 함수를 이용하여, data 속성의 값을 출력하거나, data 속성의 값을 지정할 수 있다.

1 2 3

// syntax $(selector).data(name); // 출력 $(selector).data(name,value); // 입력

1 2 3 4 5 6

// 셀렉트 $("[data-name=dataName]"); // 값출력 $("[data-name=dataName]").data("value"); // 값셋팅 $("[data-name=dataName]").data("value","dataValue2");

해당 data 속성을 지우기 위해서는 removeData 이용하여 제거할 수 있다.

1	$("[data-name=dataName]").removeData("value");

간혹 데이터함수가 적용이 잘 안될때가 있다. attr 을 이용하여 처리할 수 있는 경우가 존재한다.

1 2 3 4

// 값출력 $("[data-name=dataName]").attr("data-value"); // 값셋팅 $("[data-name=dataName]").attr("data-value","dataValue2");

 

출처 : http://syasidev.com/?p=607