HTML5 사용자 정의 data-* data(obj) 속성 및 jquery의 data() method_html5 튜토리얼 기술 사용

WBOY

풀어 주다： 2016-05-16 15:50:51

원래의

1816명이 탐색했습니다.

jquery mobile을 사용하다 보면 데이터 역할, 데이터 테마 등을 사용하는 경우를 자주 볼 수 있습니다. 예를 들어 다음 코드를 통해 헤더 효과를 얻을 수 있습니다.

코드 복사

코드는 다음과 같습니다.

i 제목입니다

휴대폰으로 검색하시면 효과는 다음과 같습니다

data-role="header"를 작성하면 하단이 검은색이고 텍스트가 가운데 정렬되는 효과를 얻을 수 있는 이유는 무엇인가요?

이 글에서는 모든 사람이 이러한 사용법을 직관적으로 이해할 수 있도록 가장 간단한 구현 방법을 제공합니다.

html 페이지를 작성하고 data-chb="header" 속성을 사용자 정의합니다. 이 속성이 있는 div 영역의 배경색은 검은색, 텍스트는 흰색, 텍스트가 표시되기를 바랍니다. data-chb 사용자 정의 속성이 없는 경우 div가 기본적으로 표시되며 html 코드는 다음과 같습니다.

코드를 복사하세요.

코드는 다음과 같습니다.

div

에 data-chb 사용자 정의 속성을 사용했습니다. data-chb를 사용하지 않았습니다. 사용자 정의 속성을 사용하여 원하는 대로 표시할 수 있습니다.

< /body>

"배경색은 검은색입니다. 텍스트는 흰색이고 텍스트는 중앙에 있습니다.", 다음 CSS를 정의합니다.

코드 복사

코드는 다음과 같습니다. 다음과 같습니다:

그런 다음 다음 js를 전달합니다. 방법은 동적으로 CSS 정의를 추가하고 div의 표시 스타일을 변경하는 것입니다. 페이지 로드 시 data-chb 속성:

코드 복사

코드는 다음과 같습니다.

최종 페이지 표시 효과는 다음과 같습니다.

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

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

코드 복사

코드 다음과 같습니다.

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

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

코드 복사

코드는 다음과 같습니다.

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

console.log(myid); 예를 들어 다음 html을 작성하는 경우 "data-*" 속성에 json 구문을 사용할 수도 있습니다.

코드 복사

코드는 다음과 같습니다.

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

코드 복사

코드는 다음과 같습니다.

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

console.log(gameStatus); .data(key,value) 메소드를 통해 "data-*" 속성에 값을 직접 할당할 수도 있습니다. 주의해야 할 중요한 점은 이러한 "data-*" 속성은 해당 속성이 속한 요소와 관련되어야 하며, 아무것도 저장하기 위한 저장 도구로 사용하지 않는다는 것입니다.
번역기 보충 자료: "data-*"는 HTML5에만 나타나는 속성이지만 jquery는 보편적이므로 HTML5가 아닌 페이지나 브라우저(obj) 메서드에서도 .data를 계속 사용할 수 있습니다. "data-*" 데이터에 대해 작업을 수행합니다.