제이쿼리 .data()
제이쿼리 .data()
일치 된 요소와 관련된 임의의 데이터를 저장하거나 일치하는 요소 집합의 첫 번째 요소에 대해 명명 된 데이터 저장소에 값을 반환합니다.
.data( key, value )
설명 : 일치하는 요소와 관련된 임의의 데이터를 저장합니다.
.data (obj)
유형 : 개체
업데이트 할 키 - 값 쌍의 객체입니다
이 .data()방법을 사용하면 순환 참조 나 메모리 누수로부터 안전하게 DOM 요소에 모든 유형의 데이터를 첨부 할 수 있습니다.
하나의 요소에 대해 여러 개의 고유 한 값을 설정하고 나중에 검색 할 수 있습니다.
$( "body" ).data( "foo", 52 );
$( "body" ).data( "bar", { myType: "test", count: 40 } );
$( "body" ).data( { baz: [ 1, 2, 3 ] } );
$( "body" ).data( "foo" ); // 52
$( "body" ).data(); // { foo: 52, bar: { myType: "test", count: 40 }, baz: [ 1, 2, 3 ] }
jQuery 1.4.3에서 요소의 데이터 객체 설정은 .data(obj)이전에 해당 요소와 함께 저장된 데이터 를 확장합니다.
jQuery 1.4.3 (jQuery 1.4에서 시작) 이전에이 .data()메소드는 데이터 객체를 확장하는 대신 모든 데이터를 완전히 대체했습니다. 타사 플러그인을 사용하는 경우 요소의 데이터 객체를 완전히 바꾸지 않는 것이 좋습니다. 플러그인에서 데이터를 설정할 수도 있기 때문입니다.
jQuery 3 은이 메소드의 동작을 변경하여 Dataset API 사양 에 맞 춥니 다 . 특히, jQuery 3 은 Dataset API의 알고리즘 정의에 따라 대문자 버전의 문자로 소문자 ASCII 문자 다음에 오는 "-"(U + 002D)의 두 문자 시퀀스를 변환 합니다 . 같은 성명을 쓰는 것은 $( "body" ).data( { "my-name": "aValue" } ).data();돌아올 것 { myName: "aValue" }입니다.
브라우저가 플러그인 및 외부 코드와 상호 작용하는 방식으로 인해 .data()메소드 <object>(Flash 플러그인이 아닌 경우) <applet>또는 <embed>요소를 사용할 수 없습니다 .
추가 참고 사항 :
Internet Explorer에서는 expando 속성을 통해 데이터를 첨부 할 수 없으므로이 방법은 현재 XML 문서의 데이터 설정을위한 크로스 플랫폼 지원을 제공하지 않습니다.
undefined데이터 값으로 인식되지 않습니다. 이와 같은 호출 .data( "name", undefined )은 호출 된 jQuery 객체를 반환하여 체인을 허용합니다.
예:
그런 다음 저장소는 div 요소에서 값을 검색합니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>data demo</title>
<style>
div {
color: blue;
}
span {
color: red;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div>
The values stored were
<span></span>
and
<span></span>
</div>
<script>
$( "div" ).data( "test", { first: 16, last: "pizza!" } );
$( "span:first" ).text( $( "div" ).data( "test" ).first );
$( "span:last" ).text( $( "div" ).data( "test" ).last );
</script>
</body>
</html>