JQuery .data()

1 개요[ | ]

jQuery .data()

태그에 data-키="값" 속성으로 자료를 보관·조회하는 메소드
배열, 딕셔너리도 보관 가능

2 예시 1: 조회[ | ]

<script src='//code.jquery.com/jquery.min.js'></script>
<script>
$(function() {
  console.log( $('#apple').data('price') );
});
</script>
<div id='apple' data-price='1000원'>사과</div>

on jsbin.com

3 예시 2: 보관·조회[ | ]

<script src='//code.jquery.com/jquery.min.js'></script>
<script>
$(function() {
  // 자료 보관
  $('#banana').data('price', '1000원');
  $('#melon').data('price', '2000원');
  // 자료 조회
  console.log( $('#banana').data('price') );
  console.log( $('#melon').data('price') );
});
</script>
<div id='banana'>바나나</div>
<div id='melon' data-price='3000원'>멜론</div>

on jsbin.com

4 예시 3: 보관·조회2[ | ]

<script src='//code.jquery.com/jquery.min.js'></script>
<script>
$(function() {
  $('#apple').data('info', {price: '1000원', color:'yellow'});
  console.log( $('#apple').data('info') );
});
</script>
<div id='apple'>사과</div>

on jsbin.com

5 예시 4: 전체 조회[ | ]

<script src='//code.jquery.com/jquery.min.js'></script>
<script>
$(function() {
  console.log( $('#cherry').data() );
});
</script>
<div id='cherry' data-price='500원' data-color='red'>체리</div>

on jsbin.com

6 같이 보기[ | ]

7 참고[ | ]