data 메서드

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

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

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

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

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

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

예제를 보자.

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

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

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

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

$(function(){
    $("body").data("monster")
})

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

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

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

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

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

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

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

2번

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

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

3번

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

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

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

이 예제는 활용 예시이다.

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

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

판별변수 대신으로..?