jQuery data vs attr 사용법 차이

질문 : jQuery 데이터 대 Attr?

---

data-someAttribute 사용할 때 $.data 와 $.attr 사용법 차이는 무엇입니까?

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

답변

---

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

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

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

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

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

$('#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

또한 데이터 속성에 대한 이름 지정 규칙에는 약간의 숨겨진 "잘못"이 있습니다.

<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 진수가 잘못 구문 분석되었으며 더 이상 jQuery 1.8 rc 1부터 Number}

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

출처 : https://stackoverflow.com/questions/7261619/jquery-data-vs-attr