html5의 사용자 정의 data-* 속성 및 jquery의 data() method_jquery 사용 예

사람들은 항상 데이터를 저장하고 조작하기 위해 HTML 태그에 사용자 정의 속성을 추가하는 것을 좋아합니다. 그러나 이 작업의 문제점은 나중에 다른 스크립트가 사용자 정의 속성을 재설정할지 여부를 알 수 없다는 것입니다. 또한 이렇게 하면 html 구문도 Html 사양을 준수하지 않게 됩니다. 다른 부작용으로. 이것이 HTML5 사양에 사용자 정의 데이터 속성이 추가된 이유이며 이를 사용하여 많은 유용한 작업을 수행할 수 있습니다.

HTML5의 세부 사양을 읽을 수 있지만 이 사용자 정의 데이터 속성의 사용법은 매우 간단합니다. 즉, "data-"로 시작하는 속성을 HTML 태그에 추가할 수 있습니다. 표시되지 않으면 페이지 레이아웃과 스타일에 영향을 미치지 않지만 읽고 쓸 수 있습니다.

다음 코드 조각은 유효한 HTML5 마크업입니다.

코드 복사 코드

data-myid="3e4ae6c4e">멋진 데이터

그러나 , 이 데이터를 읽는 방법은 무엇입니까? 물론 페이지 요소를 반복하여 원하는 속성을 읽을 수 있지만 jQuery에는 이미 이러한 속성을 조작하기 위한 내장 메서드가 있습니다. 이러한 "data-*" 속성에 액세스하려면 jQuery의 .data() 메서드를 사용하세요. 메소드 중 하나는 .data(obj)입니다. 이 메소드는 jQuery 1.4.3 이후에 등장했으며 해당 데이터 속성을 반환할 수 있습니다.

예를 들어 다음 작성 방법을 사용하여 data-myid 속성 값을 읽을 수 있습니다.

코드 복사 코드는 다음과 같습니다.

var myid= jQuery("#awesome").data('myid')
console.log(myid)

you 또한 "data-*" 속성에 json 구문을 사용할 수도 있습니다. 예를 들어 다음 html을 작성하는 경우:

코드 복사 코드는 다음과 같습니다.

js를 통해 이 데이터에 직접 액세스할 수 있습니다. json의 키 값을 통해 해당 값을 얻을 수 있습니다.

코드 복사 코드는 다음과 같습니다:

var gameStatus= jQuery("#awesome-json").data('awesome').game
console; log(gameStatus);

.data(key,value) 메소드를 통해 "data-*" 속성에 직접 값을 할당할 수도 있습니다. 주의해야 할 중요한 점은 이러한 "data-*" 속성은 해당 속성이 속한 요소와 관련되어야 하며, 아무것도 저장하기 위한 저장 도구로 사용하지 않는다는 것입니다.

보충: "data-*"는 HTML5에서만 나타나는 속성이지만 jquery는 범용이므로 HTML5가 아닌 페이지나 브라우저에서도 사용할 수 있습니다(obj. ) "data-*" 데이터를 연산하는 방법