jQuery 데이터 대 Attr?

사용시 $.data와 $.attr사용시 의 차이점은 무엇입니까 data-someAttribute?

내 이해는 DOM이 아닌 $.datajQuery 내에 저장 된다는 것 입니다 $.cache. 따라서 $.cache데이터 저장 에 사용하려면 을 사용해야합니다 $.data. HTML5 데이터 속성을 추가하려면을 사용해야합니다 $.attr("data-attribute", "myCoolValue").

서버에서 DOM 요소로 데이터를 전달하는 경우 요소에서 데이터를 설정해야합니다.

<a id="foo" data-foo="bar" href="#">foo!</a>

그런 다음 .data()jQuery를 사용하여 데이터에 액세스 할 수 있습니다 .

console.log( $('#foo').data('foo') );
//outputs "bar"

그러나 데이터를 사용하여 jQuery의 DOM 노드에 데이터를 저장하면 변수가 노드 객체 에 저장됩니다 . 이는 속성이 문자열 값만 수용 하므로 노드 요소 에 데이터를 저장하는 것처럼 복잡한 객체 및 참조를 수용하기위한 것입니다.

$('#foo').data('foo', 'baz');

console.log( $('#foo').attr('data-foo') );
//outputs "bar" as the attribute was never changed

console.log( $('#foo').data('foo') );
//outputs "baz" as the value has been updated on the object

또한 데이터 속성의 명명 규칙에는 약간의 숨겨진 "gotcha"가 있습니다.

<a id="bar" data-foo-bar-baz="fizz-buzz" href="#">fizz buzz!</a>

console.log( $('#bar').data('fooBarBaz') );
//outputs "fizz-buzz" as hyphens are automatically camelCase'd

하이픈 키는 여전히 작동합니다.

<a id="bar" data-foo-bar-baz="fizz-buzz" href="#">fizz buzz!</a>

console.log( $('#bar').data('foo-bar-baz') );
//still outputs "fizz-buzz"

그러나 반환 된 객체 .data()에는 하이픈 키 세트가 없습니다.

$('#bar').data().fooBarBaz; //works
$('#bar').data()['fooBarBaz']; //works
$('#bar').data()['foo-bar-baz']; //does not work

이런 이유로 자바 스크립트에서 하이픈 키를 피하는 것이 좋습니다.

HTML의 경우 하이픈 형식을 계속 사용하십시오. HTML 속성은 ASCII-소문자 자동으로 얻을로되어있다 그래서,<div data-foobar></div> , <DIV DATA-FOOBAR></DIV>및 <dIv DaTa-FoObAr></DiV>되는 가정 동일로 취급하지만, 최고의 호환성을 위해 소문자 형태를 선호한다.

그만큼 .data() 방법은 값이 인식 된 패턴과 일치하는 경우 몇 가지 기본 자동 전송을 수행합니다.

<a id="foo"
    href="#"
    data-str="bar"
    data-bool="true"
    data-num="15"
    data-json='{"fizz":["buzz"]}'>foo!</a>

$('#foo').data('str');  //`"bar"`
$('#foo').data('bool'); //`true`
$('#foo').data('num');  //`15`
$('#foo').data('json'); //`{fizz:['buzz']}`

이 자동 전송 기능은 위젯 및 플러그인 인스턴스화에 매우 편리합니다.

$('.widget').each(function () {
    $(this).widget($(this).data());
    //-or-
    $(this).widget($(this).data('widget'));
});

원래 값을 문자열로 사용해야하는 경우 사용해야합니다. .attr() 다음 .

<a id="foo" href="#" data-color="ABC123"></a>
<a id="bar" href="#" data-color="654321"></a>

$('#foo').data('color').length; //6
$('#bar').data('color').length; //undefined, length isn't a property of numbers

$('#foo').attr('data-color').length; //6
$('#bar').attr('data-color').length; //6

_{이것은 좋은 예였습니다. 색상 값을 저장하기 위해 숫자 16 진수 표기법 (예 : 0xABC123)을 사용했지만 1.7.2 이전의 jQuery 버전에서 16 진수가 잘못 구문 분석 되었음을 주목할 가치가 있습니다. 구문 분석되었으며 NumberjQuery 1.8 rc 1에서 더 이상 구문 분석되지 않습니다 .}

jQuery 1.8 rc 1은 자동 전송 동작을 변경했습니다 . 이전에 유효한 형식으로 된 형식은Number 은로 캐스팅되었습니다 Number. 이제 숫자 값은 표시가 동일하게 유지되는 경우에만 자동 전송됩니다. 이것은 예제와 함께 가장 잘 설명됩니다.

<a id="foo"
    href="#"
    data-int="1000"
    data-decimal="1000.00"
    data-scientific="1e3"
    data-hex="0x03e8">foo!</a>

                              // pre 1.8    post 1.8
$('#foo').data('int');        //    1000        1000
$('#foo').data('decimal');    //    1000   "1000.00"
$('#foo').data('scientific'); //    1000       "1e3"
$('#foo').data('hex');        //    1000     "0x03e8"

대체 숫자 구문을 사용하여 숫자 값에 액세스하려는 경우 값을 Number 단항 +연산자 와 같이 먼저 .

+$('#foo').data('hex'); // 1000

이 둘의 주요 차이점은 저장 위치와 액세스 방법입니다.

$.fn.attr 검사시 공개적으로 볼 수있는 속성에 요소에 직접 정보를 저장하고 요소의 고유 API에서 사용할 수 있습니다.

$.fn.data어리석게 모호한 장소에 정보를 저장합니다 . data_user로컬로 정의 된 함수 Data의 인스턴스 인 로컬 변수에 닫혀 있습니다 . 이 변수는 jQuery 외부에서 직접 액세스 할 수 없습니다.

데이터 세트 attr()

• 에서 접근 가능 $(element).attr('data-name')
• 접근에서 element.getAttribute('data-name'),
• 값의 형태 인 경우 data-name도에서 액세스 할 수 $(element).data(name)및 element.dataset['name']및element.dataset.name
• 검사시 요소에 표시
• 객체가 될 수 없습니다

데이터 세트 .data()

• 접근 만 에서.data(name)
• .attr()어디서나 접근 할 수없는
• 검사시 요소에 공개적으로 보이지 않음
• 객체가 될 수 있습니다

data-*속성을 사용 하여 사용자 정의 데이터를 임베드 할 수 있습니다 . data-*속성은 모든 HTML 요소에 속성을 우리에게 삽입 사용자 정의 데이터 할 수있는 기능을 제공합니다.

jQuery .data() 메소드를 사용하면 순환 참조 및 메모리 누수로부터 안전한 방식으로 모든 유형의 데이터를 DOM 요소에 가져 오거나 설정할 수 있습니다.

.attr()일치하는 세트의 첫 번째 요소에 대해서만 jQuery 메소드 get / set 속성 값.

예:

<span id="test" title="foo" data-kind="primary">foo</span>

$("#test").attr("title");
$("#test").attr("data-kind");
$("#test").data("kind");
$("#test").data("value", "bar");