jQuery Data vs Attr?

jQuery Data vs Attr?

사용방법의 차이는 무엇입니까?$.data그리고.$.attr사용할 때data-someAttribute?

제가 알기로는.$.datajQuery에 저장됩니다.$.cacheDOM이 아닙니다.따라서, 만약 내가 그것을 사용하고 싶다면$.cache데이터 저장소의 경우,$.dataHTML5 데이터 속성을 추가하려면 , 를 사용해 주세요.$.attr("data-attribute", "myCoolValue").

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

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

그런 다음 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"가 숨겨져 있습니다.

_HTML:

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

_JS:

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

하이픈으로 연결된 키는 계속 작동합니다.

_HTML:

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

_JS:

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

그렇기 때문에 javascript에서 하이픈으로 표시된 키는 피하는 것이 좋습니다.

HTML의 경우 하이픈으로 연결된 형식을 계속 사용합니다.HTML 속성은 자동으로 ASCII 소문자로 변환됩니다.<div data-foobar></div>,<DIV DATA-FOOBAR></DIV>,그리고.<dIv DaTa-FoObAr></DiV>는 동일하게 취급되어야 하지만 최상의 호환성을 위해 소문자 형식을 사용하는 것이 좋습니다.

이 메서드는 값이 인식된 패턴과 일치하는 경우 기본 자동 캐스팅도 수행합니다.

_HTML:

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

_JS:

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

반드시 원래 값을 문자열로 지정해야 하는 경우 다음을 사용해야 합니다.

_HTML:

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

_JS:

$('#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. 이제 숫자 값은 해당 표현이 동일한 경우에만 자동 캐스트됩니다.이것은 예를 들어 가장 잘 설명된다.

_HTML:

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

_JS:

                              // 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 단항이 경우+환입니니다다

_JS(계속):

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

이 둘의 주요 차이점은 저장 위치와 접근 방법입니다.

$.fn.attr 는 요소에 대한 정보를 직접 Atribute에 저장합니다.Atribute는 검사 시 공개적으로 표시되며 Etribute의 네이티브 API에서도 사용할 수 있습니다.

$.fn.data 터무니없이 불분명한 장소에 정보를 저장합니다.이 값은 closed over local 변수에 있습니다.data_user로컬로 정의된 함수 데이터 인스턴스입니다.jQuery 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-*모든 요소에 데이터 을 삽입할 수 .

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

j리 j.attr()하는 set get/set 의 첫 get/값.

예:

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

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

언급URL : https://stackoverflow.com/questions/7261619/jquery-data-vs-attr