[JQUERY] Attr의 대 jQuery를 데이터?

Attr의 대 jQuery를 데이터?

해결법

1. ---

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

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

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

   데이터는 다음에 jQuery를 .DATA ()를 사용하여 액세스 할 수있다 :

   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
   

   또한, 데이터에 대한 명명 규칙 속성 숨겨진 "잡았다"조금있다 :

   <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-소문자 그래서

   및

   해야하는 치료하는, 자동으로 얻을로되어있다 동일이 아니라, 최적의 호환성을 위해 소문자 형태가 바람직 할 것이다.

   값이 인식 패턴과 일치하는 경우 .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
   

   이것은 인위적인 예였다. 색상 값을 저장하기 위해, 나는 숫자 진수 표기 (즉 0xABC123)를 사용하는 데 사용하지만, 그 진수를 지적 그것의 가치는 1.7.2 이전의 jQuery 버전에서 잘못 구문 분석, 더 이상 jQuery를 1.8 RC 1의 같은 번호로 해석되지 않습니다.

   jQuery를 1.8 RC 1 자동 주조의 동작을 변경했습니다. 전에, 숫자의 유효한 표현을했다 어떤 형식 번호에 캐스트 할 것입니다. 자신의 표현 숙박 같은 경우 이제 숫자입니다 값은 자동 캐스트입니다. 이것은, 예와 함께 설명된다.

   <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"
   

   액세스의 숫자 값으로 대체 숫자 구문을 사용하려는 경우, 같은 단항 + 연산자로, 먼저 번호 값을 캐스팅해야합니다.

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

2. ---

   2.이 저장되며이 방법을 액세스 할 곳 두 주된 차이점이다.

   이 저장되며이 방법을 액세스 할 곳 두 주된 차이점이다.

   $ .fn.attr 저장 요소의 기본 API에서 사용할 수 있습니다 또한 검사에 공개하고, 속성의 요소에 직접 정보를 제공합니다.

   .fn.data 저장에게 터무니없이 애매한 장소의 정보를 $. 이는 로컬 데이터 정의 함수의 인스턴스를 통해 폐쇄 된 로컬 변수라는 data_user에 위치한다. 이 변수는 직접 jQuery를 외부에서 액세스 할 수 없습니다.

   ATTR와 데이터 세트 ()

   .DATA와 데이터 세트 ()

3. ---

   3.당신은 포함 사용자 정의 데이터에 데이터 - * 속성을 사용할 수 있습니다. 데이터 - * 우리에게 삽입 사용자 정의 데이터에 대한 능력을 모든 HTML 요소에 속성을 제공합니다 속성.

   당신은 포함 사용자 정의 데이터에 데이터 - * 속성을 사용할 수 있습니다. 데이터 - * 우리에게 삽입 사용자 정의 데이터에 대한 능력을 모든 HTML 요소에 속성을 제공합니다 속성.

   의 jQuery .DATA () 메소드는 순환 참조에서 안전하고, 따라서 메모리에서 누출되는 방식으로 DOM 요소 어떤 타입 / 세트 데이터를 얻을 수있다.

   매칭 된 세트의 첫 번째 요소 jQuery를 .attr () 메소드는 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");
   

from https://stackoverflow.com/questions/7261619/jquery-data-vs-attr by cc-by-sa and MIT license