정리jQuery

jQuery API data 메서드

jQuery

data() 메서드

일치된 요소와 임의의 data를 저장하거나 data의 key값으로 지정한 값을 가져올 수 있다.

data() 메서드를 사용하면 모든 유형의 데이터를 DOM 요소에 추가할 수 있다.

1
2
3
4
5
$( "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 ] }

예제

div에 data를 저장하고 저장한 값을 가져 온다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>data demo</title>
  <style>
  div {
    color: blue;
  }
  span {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<div>
  The values stored were
  <span></span>
  and
  <span></span>
</div>

<script>
$( "div" ).data( "test", { first: 16, last: "pizza!" } );
$( "span:first" ).text( $( "div" ).data( "test" ).first );
$( "span:last" ).text( $( "div" ).data( "test" ).last );
</script>

</body>
</html>

HTML5의 data-로 시작하는 속성이나 data(key, value)로 설정된 jQuery 컬렉션의 첫 번째 요소에 대해 key에 맞는 값을 반환한다.

.data( key )

  • key

    Type: String

    데이터에 저장된 key 값 (이름)

.data()

  • This signature does not accept any arguments.

data() 메서드를 사용하면 한 번에 하나의 요소에 대해 여러 개의 고유 한 값을 검색하거나 한 세트로 검색 할 수 있습니다.

1
2
alert( $( "body" ).data( "foo" ) );
alert( $( "body" ).data() );

위의 행은 body 요소에 설정된 데이터 값을 경고합니다. 해당 요소에 데이터가 설정되지 않은 경우 undefined가 반환됩니다.

1
2
3
alert( $( "body" ).data( "foo" ) ); // undefined
$( "body" ).data( "bar", "foobar" );
alert( $( "body" ).data( "bar" ) ); // foobar

jQuery 3 버전부터 Dataset API 사양에 맞춘다고 한다.

Writing a statement like $( "body" ).data( { "my-name": "aValue" } ).data(); will return { myName: "aValue" }.

HTML5의 data- 속성을 jQuery에서 가져오는 방법

1
<div data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'></div>

jQuery

1
2
3
4
$( "div" ).data( "role" ) === "page";
$( "div" ).data( "lastValue" ) === 43;
$( "div" ).data( "hidden" ) === true;
$( "div" ).data( "options" ).name === "John";

예제

요소에 저장된 “blah”라는 key에 대한 값을 가져온다.

첫번째 버튼은 blah 라고 저장된 키에 대한 값을 가지고오고 2번째 3번째는 blah 에 값을 저장한다. 그리고 4번째 버튼은 blah 값을 제거한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>data demo</title>
  <style>
  div {
    margin: 5px;
    background: yellow;
  }
  button {
    margin: 5px;
    font-size: 14px;
  }
  p {
    margin: 5px;
    color: blue;
  }
  span {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<div>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>
$( "button" ).click(function() {
  var value;

  switch ( $( "button" ).index( this ) ) {
    case 0 :
      value = $( "div" ).data( "blah" );
      break;
    case 1 :
      $( "div" ).data( "blah", "hello" );
      value = "Stored!";
      break;
    case 2 :
      $( "div" ).data( "blah", 86 );
      value = "Stored!";
      break;
    case 3 :
      $( "div" ).removeData( "blah" );
      value = "Removed!";
      break;
  }

  $( "span" ).text( "" + value );
});
</script>

</body>
</html>
Share