jQuery $.data() method_javascript 기술을 사용할 때 세부 사항에 주의하세요.

얼마 전 그룹에서 한 동료가 jQuery의 .data() 메서드에 대해 불평했습니다.
XXX(NNNNNNNN) 15:11:34

alert($('#a').data('xxx'));//123
데이터 방법을 신뢰할 수 없습니다
XXX(NNNNNNNN) 15:13:17
이전 솔직히 attr('data-xxx')를 사용하고 .data() 메서드에 대한 jQuery 문서의 설명을 주의 깊게 연구하세요.

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

jQuery 1.4.3 HTML 5부터 데이터 속성은 자동으로 jQuery의 데이터 객체로 가져옵니다.
대시가 포함된 속성 처리가 변경되었습니다. jQuery 1.6에서는 W3C HTML5
사양

다음 지침을 준수합니다. >

코드는 다음과 같습니다.

< ;/div> $("div").data("role") === "페이지" $("div") === 43; >$("div").data("hidden") === true; $("div").data("options").name === "John";

즉, .data()를 사용하여 값을 얻을 때 jQuery는 먼저 얻은 문자열 값을 부울 값, null, 숫자, 객체, 배열을 포함하는 JS 유형으로 변환하려고 시도합니다.

값이 "true|false"이면 해당 부울 값을 반환합니다.
값이 "null"이면 null을 반환합니다.
값이 순수 숫자로 구성된 문자열인 경우( data ”” === data) 해당 숫자(데이터)가 반환됩니다.
"{key:value }" 또는 [1과 같이 값이 (?:{[sS]*}|[[sS]*])$로 구성된 경우 2,3], jQuery.parseJSON을 사용하여 구문 분석해 보세요.

그렇지 않으면 문자열 값을 반환합니다.

물론 문서에도 구체적으로 명시되어 있습니다. 문자열 값을 가져오고 자동으로 변환된 값을 가져오지 않으려면 .attr("data-" key)를 사용하여 해당 값을 가져올 수 있습니다.




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

값의 속성을 변환하지 않고 문자열로 검색하려면 attr() 메서드를 사용하세요. > 다음은 jQuery 소스코드입니다코드 복사

코드는 다음과 같습니다

function dataAttr(elem, key, data) {
// 내부적으로 아무것도 발견되지 않은 경우

// HTML5 data-* 속성에서 데이터를 가져오려고 합니다 if ( data === undefine && elem.nodeType === 1 ) { // rmultiDash = /([A-Z])/g var name = "data-" key.replace( rmultiDash, "-$1" ).toLowerCase(); data = elem.getAttribute( name ); if ( typeof data === "string" ) { try {

/*.data(key) 메소드는 얻은 값을 다음으로 변환하려고 시도합니다. 부울, null, 숫자, 객체, 배열을 포함한 JS 유형*/

data = data === "true" ? true :
data === "false" ? false :
data === "null" ? null :
// 문자열이 변경되지 않는 경우에만 숫자로 변환합니다.
data "" === data ? data :
/*rbrace = /(?:{[ sS]*}|[[sS]*] )$/,*/
rbrace.test( data ) ? jQuery.parseJSON( data ) :
data
} catch( e ) {}
// 나중에 변경되지 않도록 데이터를 설정했는지 확인하세요
jQuery.data( elem, key, data )
} else {
data = undefine; >}
데이터 반환
}

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.