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 的彈窗掩碼的時候遇到了這樣一段代碼讓我產生了疑惑
1 $(document).on('click.modal.data-api', '[daTa-toggle="modal"]', function (e) { 2 alert($(this).data().toggle) //這行是我加入的代碼 打印的值是modal 3 var $this = $(this) 4 , href = $this.attr('href') 5 , $target = $($this.attr('data-target') || (href && href.replace(/.*(?=#[^\s]+$)/, ''))) //strip for ie7 6 , option = $target.data('modal') ? 'toggle' : $.extend({ remote:!/#/.test(href) && href }, $target.data(), $this.data()) 7 8 e.preventDefault() 9 10 $target 11 .modal(option) 12 .one('hide', function () { 13 $this.focus() 14 }) 15 })
代碼中的三目運算符 $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代碼
<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
我加入的代碼alert($(this).data().toggle)打印的值是modal ，所以這里只能是jquery做的文章，於是我研究了jquery的源碼發現果然真是 ！
以下是jQuery.fn.data函數中的部分代碼 , 當key未定義也就是調用 .data() 未傳參數時會將屬性名為data-開頭的鍵值對存入匹配元素上。
本例中<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>，將{toggle:"modal"}鍵值對存入
有興趣的同學可以去試調以下jquery代碼
1 // Gets all values 2 if ( key === undefined ) { 3 if ( this.length ) { 4 data = jQuery.data( elem ); 5 6 if ( elem.nodeType === 1 && !jQuery._data( elem, "parsedAttrs" ) ) { 7 attrs = elem.attributes; 8 for ( ; i < attrs.length; i++ ) { 9 name = attrs[i].name; 10 11 if ( name.indexOf("data-") === 0 ) { 12 name = jQuery.camelCase( name.slice(5) ); 13 14 dataAttr( elem, name, data[ name ] ); 15 } 16 } 17 jQuery._data( elem, "parsedAttrs", true ); 18 } 19 } 20 21 return data; 22 }
我再去詳細閱讀了jquery官網的幫助文檔有如下一段話
HTML5 data-* Attributes（HTML5 data-* 屬性）
從jQuery 1.4.3起， HTML 5 data- 屬性 將自動被引用到jQuery的數據對象中。嵌入式破折號處理屬性（ attributes）的方式在 jQuery 1.6 中已經改變，以使之符合W3C HTML5 規范.
舉個例子, 給定下面的HTML:
|
1
|
<div data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'></div>
|
下面所有的 jQuery 代碼都能運行。
|
1
2
3
4
|
$("div").data("role") === "page";
$("div").data("lastValue") === 43;
$("div").data("hidden") === true;
$("div").data("options").name === "John";
|