SeouliteLab

jQuery의 .data() 메서드의 힘을 발휘하다: 예제로 알아보는 설명 본문

프로그래밍

jQuery의 .data() 메서드의 힘을 발휘하다: 예제로 알아보는 설명

Seoulite Lab 2024. 3. 30. 23:54

jQuery에서 DOM 요소와 관련된 데이터를 관리할 때, .data() 메서드는 매우 유용한 도구입니다. 이 메서드를 사용하면 DOM 요소에 어떤 유형의 데이터든 쉽게 첨부하고 나중에 검색할 수 있습니다. 이 메서드에 대한 세부 내용을 여러 가지 실용적인 예제와 함께 살펴보겠습니다.

.data() 이해하기

jQuery의 .data() 메서드는 DOM 요소에 어떤 유형의 데이터든 첨부하고 나중에 검색하는 데 사용됩니다. 이는 요소와 관련된 정보를 저장할 때 유용하며, 구성 설정, 상태 정보 또는 사용자 지정 데이터와 같은 것을 저장하는 데에 활용될 수 있습니다. 저장된 데이터는 문자열, 숫자, 배열, 객체 또는 함수와 같은 JavaScript의 모든 유형일 수 있습니다.

구문:

$(선택자).data(키, 값);
  • 선택자: 요소를 선택하기 위한 선택자 표현식을 포함하는 문자열입니다.
  • 키: 설정할 데이터의 이름을 나타내는 문자열입니다.
  • 값: 설정할 데이터 값입니다. JavaScript의 모든 유형일 수 있습니다.

이제 실용적인 예제를 통해 이 기능을 더 잘 이해해 보겠습니다.

예제 1: 데이터 설정 및 검색

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .data() 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("#설정버튼").click(function(){
        $("#결과").data("이름", "홍길동");
        $("#결과").text("설정된 데이터: " + $("#결과").data("이름"));
      });
    });
  </script>
</head>
<body>

<button id="설정버튼">데이터 설정</button>
<div id="결과"></div>

</body>
</html>

출력:

  • "데이터 설정"을 클릭하면 "결과" ID를 가진 요소에 "홍길동"이라는 데이터가 설정되고 "설정된 데이터: 홍길동"이라는 텍스트가 표시됩니다.

예제 2: 객체 데이터 다루기

$("#결과").data({
  이름: "홍길동",
  나이: 30,
  이메일: "hong@example.com"
});
console.log($("#결과").data("나이")); // 출력: 30

출력:

  • "결과" ID를 가진 요소에 이름, 나이, 이메일과 같은 여러 데이터가 설정되며, 특정 데이터를 검색하여 출력할 수 있습니다.

예제 3: 데이터 제거하기

$("#결과").data("나이", null);
console.log($("#결과").data("나이")); // 출력: null

출력:

  • "결과" ID를 가진 요소에서 "나이"라는 데이터를 제거하고, 해당 데이터를 검색하면 null이 출력됩니다.

결론

jQuery의 .data() 메서드는 DOM 요소와 관련된 데이터를 간편하게 관리할 수 있는 강력한 도구입니다. 요소와 관련된 정보를 효과적으로 저장하고 검색하여 웹 애플리케이션을 보다 유연하게 구축할 수 있습니다.

저작자표시 비영리 변경금지

'프로그래밍' 카테고리의 다른 글

jQuery의 .queue() 메서드  (0) 2024.03.31
jQuery에서 .dequeue() 메서드 활용하기  (0) 2024.03.30
jQuery의 .clearQueue() 메서드 활용하기  (0) 2024.03.30
jQuery.readyException() 메서드의 활용 예제와 설명  (0) 2024.03.30
jQuery.sub() 메서드의 활용 예제와 설명  (0) 2024.03.30
'프로그래밍' Related Articles more