[javascript] jQuery 데이터 대 Attr?

서버에서 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”가 있습니다.

_{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

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

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

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

_{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'));
});

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

_{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

답변

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

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