[JQuery] 사용자 데이터, 커스텀 데이터(custom data - data-xx의 형태)

 

 

 

 

 

 

 

 

 

 

 

커스텀 데이터

---

HTML5에서는 해당 요소에 사용자가 임의로 지정한 속성값을 활용할 수 있습니다. 

 

이를 커스텀 데이터 속성(custom data attributes)이라고 부르며,

data- 뒤에 사용할 변수명을 입력한 뒤 사용할수있습니다.

 

 

 

 

 

 

 

커스텀 데이터 생성

---

아래와 같은 형태로 커스텀 데이터를 만들수있습니다.

data-사용하고싶은 명칭

 

 

아래 코드와 같이 커스텀 데이터를 생성할 수 있습니다.

data-player-1, data-player-2, data-player-3이라는 커스텀 데이터를 생성하여 각각의 값을 입력하였습니다.

<ul class='player_area'>
  <li data-player-1="Son">Son</li>
  <li data-player-2="Kane">Kane</li>
  <li data-player-3="Kulusevski">Kulusevski</li>
</ul>

 

 

 

 

 

 

 

커스텀 데이터 추출

---

아래와 같이 jQuery를 통하여 커스텀 데이터의 값을 추출할 수 있습니다.

선택자.data(커스텀 데이터 명);

 

$('li').data('player-1');	//Son
$('li').data('player-2');	//Kane
$('li').data('player-3');	//Kulusevski

 

 

 

 

 

커스텀 데이터 저장

---

아래와 같이 jQuery를 통하여 커스텀 데이터의 값을 저장, 지정할 수 있습니다.

선택자.data(커스텀 데이터 명, 값);

 

$('li').data('player-3', 'Dembele');

 

 

 

 

 

커스텀 데이터 삭제

---

아래와 같이 removeData 메소드를 통하여 커스텀 데이터의 값을 삭제할 수 있습니다.

선택자.removeData(커스텀 데이터 명);

 

$('li').removeData('player-3');

 

 

 

 

 

위 방법이 작동하지 않을 경우

---

가끔, 위의 데이터 함수가 적용이 안되면 attr 메소드를 이용하여 동일하게 처리할 수 있습니다.

 

// 커스텀 데이터 읽기
$('li').attr('player-1');

// 커스텀 데이터 저장
$('li').attr('player-1', 'Romero');

 

 

 

cf. Thymeleaf에서의 커스텀데이터

[Thymeleaf] 커스텀 데이터 속성(th:attr)