HTML5 사용자 정의 속성을 읽으려면 jQuery의 data() 메소드를 사용하십시오 data-*example

HTML5 사용자 정의 속성을 읽으려면 jQuery의 data() 메소드를 사용하십시오 data-*example_jquery

WBOY

풀어 주다： 2016-05-16 16:52:37

원래의

1051명이 탐색했습니다.

주된 방법은 다음과 같습니다.

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

.data( key , value )
.data( obj )
.data( key )
.data()

jQuery 1.4.3부터 HTML 5 data- 속성 데이터 객체의 jQuery를 자동으로 참조합니다.
HTML 예:

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

다음 jQuery 코드는 true를 반환합니다.

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

$ ( "div" ). 데이터 ( "역할" ) === "페이지" ;
$ ( "div" ) . 데이터 ( "lastValue" ) === 43 ;
$ ( "div" ) . data ( "hidden" ) === true ;
$ ( "div" ) . data ( "options" ) . name === "John" ;

html5 API와 다름 , jQuery는 문자열을 JavaScript 값(부울, 숫자, 개체, 배열 및 null 포함)으로 변환하려고 시도합니다. 이렇게 해도 값의 표현이 변경되지 않으면 값이 숫자로 변환됩니다. 예를 들어 "1E02" 및 "100.000"은 숫자(숫자 값 100)와 동일하지만 변환하면 표현이 변경되므로 문자열로 유지됩니다. 문자열 값 "100"은 숫자 100으로 변환됩니다.

데이터 속성이 객체("{"로 시작) 또는 배열('['로 시작)인 경우 jQuery.parseJSON을 사용하여 문자열로 구문 분석할 수 있으며 유효한 JSON 구문을 따라야 합니다. 속성 이름을 큰따옴표로 묶습니다. 값을 JavaScript 값으로 구문 분석할 수 없는 경우 문자열로 유지됩니다.

검색된 속성값을 문자열로 직접 사용하고 싶다면 attr() 메소드를 이용해주세요.
이 데이터 속성을 처음 사용한 후에는 데이터 속성에 더 이상 액세스하거나 변경되지 않습니다(모든 데이터 값은 jQuery에 내부적으로 저장됩니다).
매개변수 없이 .data()를 호출하면 모든 데이터는 JavaScript 객체 형태로 얻어집니다. 새 객체가 추출되면 해당 요소에 대한 후속 .data(obj) 작업이 더 이상 이 객체에 영향을 미치지 않으므로 이 객체는 변수에 안전하게 저장할 수 있습니다. 또한 값을 설정하거나 가져올 때마다 .data()를 호출하는 것보다 이 객체를 직접 조작하는 것이 더 빠릅니다.