[JQuery] HTML 요소의 'data 속성' 값 가져오는 법.

 

이전에 순수 자바스크립트로 HTML요소의 data속성 값을 가져오는 포스트를 게시했었다.

[Javascript] HTML 요소의 'data 속성' 값 가져오는 법.

 

자바스크립트의 라이브러리인 제이쿼리로도 htmnl data속성에 쉽게 접근이 가능하다.

---

 

'data'속성의 일반적인 형식

<div data-key="value">my key</div>

위의 코드에서 data- 접두사 뒤에 붙는 'key'는 작업자가 작명한 이름이고 value는 그에 해당되는 데이터 값이다.

 

이 데이터값은 HTML 요소에서는 별도로 사용자들의 눈에 보이거나, 동작을 하지 않지만 Javascirpt나 CSS를 통해 접근 할 수 있다.

 

 

JQuery로 'data'속성 값 접근하기

<button type="button" id="myButton" data-key="myData">data값 출력</button>


$(function(){
	$("#myButton").on("click",function(){
    	const $myDataKey = $("#myButton").data("key")
        console.log($myDataKey);
    });
});

 

제이쿼리의 'data()' 메서드를 사용하면 위처럼 쉽게 데이터 값을 가져 올 수 있다.