부트스트랩 데이터与jquery .data_jquery

jquery 공식 웹사이트에서는 .data 함수에 대해 다음과 같이 설명합니다. 일치하는 요소에 관련 데이터를 저장하거나 일치하는 요소 집합에서 첫 번째 요소의 지정된 이름 데이터에 저장된 값을 반환합니다.

저장소 키/값:

　　$("body").data("foo", 52);
　　$("body").data("bar", { myType: "test", count: 40 });
　　$("body").data({ baz: [ 1, 2, 3 ] });

키 값 가져오기

　　$("body").data("foo"); // 52
　　$("body").data(); // { foo: 52, bar: { myType: "test", count: 40 }, baz: [ 1, 2, 3 ] }

위 내용은 익히기 쉽고 이해하기 쉽습니다. 오늘 부트스트랩 팝업마스크를 보다가 이런 코드를 접하게 되었는데

 $(document).on('click.modal.data-api', '[daTa-toggle="modal"]', function (e) {
  alert($(this).data().toggle) //这行是我加入的代码 打印的值是modal
  var $this = $(this)
   , href = $this.attr('href')
   , $target = $($this.attr('data-target') || (href && href.replace(/.*(?=#[^\s]+$)/, ''))) //strip for ie7
   , option = $target.data('modal') ? 'toggle' : $.extend({ remote:!/#/.test(href) && href }, $target.data(), $this.data())  
  e.preventDefault()
  $target
   .modal(option)
   .one('hide', function () {
    $this.focus()
   })
 })

코드의 삼항 연산자 $target.data('modal')?'toggle': $.extend({ 원격:!/#/.test(href) && href }, $target.data() , $ this.data())

은 창이 처음으로 렌더링되는지 여부를 확인하는 것입니다. 창을 처음 렌더링할 때 실행

option = $.extend({ remote:!/#/.test(href) && href }, $target.data(), $this.data()) //结果是 option= {remote: false,toggle: "modal"}

$target.data()는 빈 객체 {}이고, $this.data()의 값은 {toggle: "modal"}입니다. 여기서 $this.data()의 반환 값이

에서 나오는 것은 말할 필요도 없습니다.

html 코드를 보면 click 메소드가 바인딩된 dom 객체의 속성값과 일치하는 것을 볼 수 있습니다. 다음은 바인딩된 dom 객체의 html 코드입니다

<a href="#myModal" rel="external nofollow" rel="external nofollow" role="button" class="btn" data-toggle="modal">데모 모달 실행</a>

내가 추가한 경고($(this).data().toggle) 코드에서 출력되는 값은 모달이므로 jquery로 만든 기사일 수밖에 없어서 jquery 소스코드를 연구한 결과, 정말 사실이에요!

다음은 jQuery.fn.data 함수의 코드 일부입니다. 키가 정의되지 않은 경우, 즉 매개변수 전달 없이 .data()를 호출하면 속성 이름이 data-는 일치하는 요소에 저장됩니다.

이 경우<a href="#myModal" rel="external nofollow" rel="external nofollow" role="button" class="btn" data-toggle="modal">데모 모달 실행< a>, {toggle:"modal"} 키-값 쌍을

에 저장합니다.

관심 있는 학생들은 다음 jquery 코드를 사용해 볼 수 있습니다

    // Gets all values
    if ( key === undefined ) {
      if ( this.length ) {
        data = jQuery.data( elem );
        if ( elem.nodeType === 1 && !jQuery._data( elem, "parsedAttrs" ) ) {
          attrs = elem.attributes;
          for ( ; i < attrs.length; i++ ) {
            name = attrs[i].name;
            if ( name.indexOf("data-") === 0 ) {
              name = jQuery.camelCase( name.slice(5) );

              dataAttr( elem, name, data[ name ] );
            }
          }
          jQuery._data( elem, "parsedAttrs", true );
        }
      }
      return data;
    }

jquery 공식 홈페이지의 도움말 문서를 자세히 읽어보니 다음과 같은 구절이 있습니다
HTML5 데이터-* 속성(HTML5 데이터-* 속성)
jQuery 1.4.3부터 HTML 5 data- 속성은 jQuery의 데이터 객체에 자동으로 참조됩니다. 포함된 대시가 속성을 처리하는 방식은 W3C HTML5 사양을 준수하기 위해 jQuery 1.6에서 변경되었습니다.

예를 들어 다음 HTML이 있다고 가정합니다.

<div data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'></div>

아래의 모든 jQuery 코드가 작동합니다.

$("div").data("role") === "page";
$("div").data("lastValue") === 43;
$("div").data("hidden") === true;
$("div").data("options").name === "John";