[jquery].data() api 실습

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가 버튼을 누를때마다 다른 값이

나오게 됩니다.

Advertisements

[jquery].data() api 실습”에 대한 4개의 생각

  1. 기존에 태그에 편의상 프로그래머 나름대로 쓰던 속성들을 표준화한 거군요.
    태그에 허용되지 않는 속성을 쓰면서 조금 찝찝했던 기억이 있는데 아주 좋네요.

    • 네~ jquery api 별로 그때그때마다 습득하고 있습니다.

      아직 우선순위가 밀려서~ 차례가 되면 한번 쫙

      훑으면서 공부해야죠.

      감사합니다^^

  2. 핑백: Learn jQuery Day 13,14,15 « 2nd Step

  3. 핑백: Learn jQuery Day 13,14,15 | 2ndStep

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Google+ photo

Google+의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

w

%s에 연결하는 중