引導資料與jquery .data_jquery-js教程-PHP中文網

引導資料與jquery .data_jquery

WBOY

發布： 2016-05-16 16:42:21

原創

1361 人瀏覽過

jquery官網對.data函數描述是:在匹配元素上儲存任意相關資料或傳回符合的元素集合中的第一個元素的給定名稱的資料儲存的值。

儲存鍵值（key/value）：

　　$("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 ] }

登入後複製

以上這些都很容易掌握和理解，今天在看bootstrap 的彈跳窗遮罩的時候遇到了這樣一段程式碼讓我產生了疑惑

 $(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(/.*(&#63;=#[^\s]+$)/, ''))) //strip for ie7
   , option = $target.data('modal') &#63; '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({ remote:!/#/.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程式碼

Launch demo modal

我加入的程式碼alert($(this).data().toggle)列印的值是modal ，所以這裡只能是jquery做的文章，於是我研究了jquery的源碼發現果然真是！

以下是jQuery.fn.data函數中的部分程式碼 , 當key未定義也就是呼叫 .data() 未傳參數時會將屬性名稱為data-開頭的鍵值對存入符合元素上。

本例Launch demo modal，將{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 data-* Attributes（HTML5 data-* 屬性）
從jQuery 1.4.3起， HTML 5 data- 屬性將自動被引用到jQuery的資料物件中。嵌入式破折號處理屬性（ attributes）的方式在 jQuery 1.6 中已經改變，以使其符合W3C HTML5 規範.

舉例, 給定下面的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";

登入後複製