jQuery에서 데이터 속성 값 가져오기

jQuery는 데이터 속성 값을 가져오는 두 가지 방법을 제공합니다. 첫 번째는 .data() 메서드이고 두 번째는 .attr() 메서드입니다. 오늘의 게시물은 jQuery에서 데이터 속성 값을 가져오는 방법에 대해 알려드립니다.

.data() 및 .attr()을 사용하여 jQuery에서 데이터 속성 값 가져오기

data() 또는 HTML5 data-* 속성에 의해 설정된 데이터는 .data() 메서드에 의해 반환됩니다. 이 메서드는 jQuery 컬렉션의 첫 번째 요소와 관련된 임의의 데이터를 반환합니다.

매개변수를 전달하지 않고 .data()는 JavaScript 객체를 반환합니다. 이 JavaScript 개체에는 저장된 각 값이 리소스 또는 자산으로 포함되어 있습니다.

레코드 값을 가져오기 위해 개체를 즉시 사용할 수 있습니다.

통사론:

.data(key)

이 메서드는 키로 저장된 데이터의 이름을 받아들입니다. .data() 문서에서 .data() 메서드에 대한 자세한 정보를 찾을 수 있습니다.

일치하는 요소 집합의 첫 번째 세부 사항에 대한 특성 값을 얻을 수도 있습니다. .attr() 접근 방식은 일치하는 집합에서 가장 좋은 기본 요소에 대한 특성 값을 받습니다.

모든 세부 사항에 대한 값을 얻으려면 jQuery의 .each() 또는 .map() 메서드를 포함하는 반복 구조를 사용할 수 있습니다.

통사론:

.attr(attributeName)

이 메소드는 속성 이름을 승인하여 속성과 연관된 데이터를 가져옵니다. 요소의 특성 값을 얻기 위해 jQuery .attr() 메서드를 사용하면 다음과 같은 주요 이점이 있습니다.

지연 없이 jQuery 개체에서 호출하고 다른 jQuery 메서드에 연결할 수 있습니다. 일부 속성의 값은 브라우저 전체에서, 심지어 단일 브라우저의 버전 전체에서 불균일하게 명시될 수 있습니다. .attr() 접근 방식은 이러한 불일치를 줄입니다.

.attr() 문서에서 .attr() 메서드에 대한 자세한 정보를 찾을 수 있습니다.

다음 예를 통해 이해해 봅시다.

예제 코드:

<button data-id="btn-1" value="Hello">Hello World!</button>

console.log($('button').attr('data-id'));
console.log($('button').data('id'));

위의 예에서 data-id 속성이 btn-1로 설정되고 Hello 값이 있는 버튼을 설명했습니다. data() 또는 attr() 메소드를 사용하여 데이터 속성에 액세스할 수 있습니다.

jQuery를 지원하는 모든 브라우저에서 위의 코드 스니펫을 실행해 봅니다. 아래에 결과가 표시됩니다.

출력:

"btn-1"
"btn-1"

위의 예제 코드를 여기에서 실행할 수 있습니다.