jquery api중 “.data()” api가 있습니다.
이 api에 대한 내용은 링크를 참조하시면 됩니다.
대략, api 내용을 보면 .data() api 인자에 key, value를 넣을 수 있고,
key만 넣으면 해당 키에 저장된 값(value)을 넘겨주고 key, value를 함께 지정하면,
해당 key의 value를 지정하게 됩니다.
근데 제가 궁금했던 건,
다른 소스코드를 보던 중 아래와 같은 소스가 뜬금없이 나와서 사용되고 있어서였습니다.
<div id="test_div" data-id="100" data-specify-name="bluepoet">test</div>
위 html의 div요소를 가져오는 자바스크립트에서는 아래와 같이 사용했습니다.
var $dataId = $testDiv.data("id");
var $dataSpecifyName = $testDiv.data("specifyName");
오잉! 먼가 이상하지 않으신가요??
jquery 속성을 가져오는 건 .attr() api를 사용해 풀네임 속성으로 값을 가져오는 것으로
알고 있었는데 갑자기 “data-“가 빠진 “id“만 가지고 오다니요…!
그리고 두번째는 더 심하게 “data-specify-name“이 아닌 “specifyName“만
가져오더군요.
그런데! 여기서 순간! 개발자의 직감으로..
“specifyName“을 쓰는 것을 보니 “뭔가 내가 모르는 네이밍규칙이 있구나“라는 생각이
들었습니다. 그래서 찾아봤더니 허무하게도 .data() api에 해당내용이 나와있더군요.
“data-*“이 html5의 속성이였습니다. 그리고 이것은 jquery 1.4.3 이상에서는
자동으로 jquery data object로 들어간다고 나와있더라구요 ㅎㅎ
html5의 “data-*”속성에 대한 설명은 링크를 참고하세요.
역시 “등잔밑이 어둡구나“라는 옛말이 또 한번 들어맞는 순간이었습니다.
하여튼, 문제를 해결하고 .data() api에 있는 예제를 조금 수정해 “data-*“속성을
테스트해보기로 했습니다.
<!DOCTYPE html>
<html>
<head>
<style>
div { margin:5px; background:yellow; }
button { margin:5px; font-size:14px; }
p { margin:5px; color:blue; }
span { color:red; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="test_div" data-id="100" data-specify-name="bluepoet">A div</div>
<button>Get "blah" from the div</button>
<button>Set "blah" to "hello"</button>
<button>Set "blah" to 86</button>
<button>Remove "blah" from the div</button>
<p>The "blah" value of this div is <span>?</span></p>
<script>
$(document).ready(function() {
var $testDiv = $("#test_div");
var $dataId = $testDiv.data("id");
var $dataSpecifyName = $testDiv.data("specifyName");
$("button").click(function(e) {
var value;
switch ($("button").index(this)) {
case 0 :
value = $("div").data("blah");
$dataId = 1;
$dataSpecifyName = "kim";
break;
case 1 :
$("div").data("blah", "hello");
value = "Stored!";
$dataId = 2;
$dataSpecifyName = "lee";
break;
case 2 :
$("div").data("blah", 86);
value = "Stored!";
$dataId = 3;
$dataSpecifyName = "park";
break;
case 3 :
$("div").removeData("blah");
value = "Removed!";
$dataId = 4;
$dataSpecifyName = "choi";
break;
}
$("span").text("" + value+ ", data-id : "+ $dataId + ", data-specify-name : " + $dataSpecifyName);
});
});
</script>
</body>
</html>


결과는, 위 그림처럼 data-id와 data-specify-name가 버튼을 누를때마다 다른 값이
나오게 됩니다.