data 메서드

jQuery 2015. 4. 14. 21:44

728x90
반응형

data 메서드는 어떠한 요소에 object 값으로 무언갈 넣어줄 수 있다.

임의의 값을 넣어준다 라는게 맞나....



어느 블로그에서 이와 같은 설명을 읽었다.


설명 : 해당 엘리먼트에 Javascript Type의 value를 <Key, Value>로 저장할 수 있으며, <Key>값으로 저장되어 있는 데이터를 읽습니다.


출처 : http://www.nextree.co.kr/p10155/



/* key 로 사용되는건 무조건 string 타입이여야 한다고 한다. value 가 되는건 무엇이든 가능하다. */


예제를 보자.

1
2
3
4
$(function(){
    $("body").data("monster","goblin");
    console.log($("body").data("monster"));
})

cs


위와 같이 보디 객체에 임의의 데이터로 monster 라는 key 를 집어넣고 이 key 에 대한 value 값으로 goblin 을 넣어주었다.

콘솔창에서 이 monster 라는 걸 찍어주게 될 경우 monster 가 가지고 있는 value 값인 goblin 이 찍이게 된다.


근데 가령 이런경우라면 어떤식으로 뜨게 될까?

1
2
3
$(function(){
    $("body").data("monster")
})
cs


이러한 key 만 존재하고 이것의 값을 정의 하지 않았을땐

object{} 라고 찍힐것이다. (콘솔창에 찍어보자)

undefined 라고 하면 될것같다. 무언가의 값을 정의하지 않았으니깐..



또, 이런식의 방법으로 임의의 데이터를 호출 할 수 있게 된다.

1
2
3
4
5
$(function(){
    $("body").data("goblin", {"level":5"item":"130gold"});
    $("body").append("<span></span>");
    $("span").text($("body").data("goblin").item);
})
cs


1번 부터 설명해 주자면...

임의의 데이터 로 goblin을 넣고 이 값으로 object 타입을 넣어주었다. object 엔 레벨과 아이템을 넣어주게 된다.


2번

보디의 안에 span 요소를 삽입 하게 된다.

// append 메소드는 선택된 요소의 끝자락에 무언갈 '삽입' 시켜주는 메소드 이다.


3번

span 요소의 텍스트로 body 의 goblin 을 호출 하는데 '.속성' 으로 이 key 의 속성을 불러왔다.

결과는 130골드가 찍히게 된다.


오브젝트는 객체.속성 으로 접근을 할 수 있다.




이 예제는 활용 예시이다.

본래 이렇게 쓰라고 있는건 아니지만 이해를 돕기위해 만들어 보았다.


click를 누르게 되면 data 에 뭐가 있는지 판별을 해준다.

판별변수 대신으로..?

반응형

'jQuery' 카테고리의 다른 글

mouseenter 과 mouseover 메서드의 차이  (0) 2015.04.15
index 메서드  (0) 2015.04.15
size 메서드 그리고 length..  (0) 2015.04.15
scrollTop 메서드  (0) 2015.04.14
jQuery 의 .animate() 에서 .stop() 의 중요성  (1) 2015.03.26