jQuery .data 사용 방법

jQuery .data 사용 방법

[공식 API 명세]

제이쿼리(jQuery)를 사용하다 보면 특정 Dom이나 오브젝트(Object)에 특정한 값 또는 데이터를 담고 싶을 경우가 생깁니다. 이럴때 마다 기존에는 폼(Form)을 이용해서 데이터를 주고 받거나 했을 겁니다. 오늘 이 글을 보신 후 부터는 .data()를 사용해 보시기 바랍니다.

간단한 사용명세는 위의 링크에 나와있습니다. 선언(Set) 방식은 크게 2가지 입니다.

(selector).data( key, value )

(selector).data( key )

위에서 말하는 selector는 $('#test') 이런형태의 오브젝트 형식을 말합니다.

2개의 차이는 자바스크립트(Javascript) 내에서 셋팅하는 방식 입니다. Html 내에서 셋팅하는 방식은 아래에 다시 언급 하겠습니다.

$( "body" ).data( "foo", 52 );
$( "body" ).data( "bar", { myType: "test", count: 40 } );
$( "body" ).data( { baz: [ 1, 2, 3 ] } );
$( "body" ).data( "foo" ); // 52
$( "body" ).data(); // { foo: 52, bar: { myType: "test", count: 40 }, baz: [ 1, 2, 3 ] }

.data()는 자바스크립트 보다 Html에서 더욱 효율적으로 사용 할 수 있습니다.

input의 value 같은 역할을 div나 span등의 다른곳에서도 사용할 수 있게 해줍니다. 물론 input에서도 사용할 수 있습니다.

사용방법은 간단합니다.

<div id='container' data-fresh='test'>

위의 예제 같은 경우는 key가 fresh이며, value가 test가 됩니다.

선언한 data를 자바스크립트에서 Get하는 방법 또한 간단합니다.

$('#container').data('fresh')

이렇게 해서 Console(콘솔)로 찍어 보시면 알 수 있을 겁니다.

기타 궁금한 사항은 댓글 주세요.