bootstrap data與jquery .data
jquery官網(wǎng)對.data函數(shù)描述是:在匹配元素上存儲任意相關(guān)數(shù)據(jù) 或 返回匹配的元素集合中的第一個元素的給定名稱的數(shù)據(jù)存儲的值。
存儲鍵值（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 的彈窗掩碼的時候遇到了這樣一段代碼讓我產(chǎn)生了疑惑
$(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()
})
})
代碼中的三目運(yùn)算符 $target.data('modal')?'toggle' : $.extend({ remote:!/#/.test(href) && href }, $target.data(), $this.data())
是判斷窗口是否是第一次渲染 。第一次渲染窗口的時候執(zhí)行了
option = $.extend({ remote:!/#/.test(href) && href }, $target.data(), $this.data()) //結(jié)果是 option= {remote: false,toggle: "modal"}
$target.data()是空對象{} ，$this.data()值是{toggle: "modal"} 。這里不經(jīng)要問 $this.data() 的返回值哪來的
看了下html代碼，剛好與被綁定click方法的dom對象的屬性值一樣，以下是被綁定的dom對象的html代碼
<a href="#myModal" rel="external nofollow" rel="external nofollow" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
我加入的代碼alert($(this).data().toggle)打印的值是modal ，所以這里只能是jquery做的文章，于是我研究了jquery的源碼發(fā)現(xiàn)果然真是 ！
以下是jQuery.fn.data函數(shù)中的部分代碼 , 當(dāng)key未定義也就是調(diào)用 .data() 未傳參數(shù)時會將屬性名為data-開頭的鍵值對存入匹配元素上。
本例中<a href="#myModal" rel="external nofollow" rel="external nofollow" role="button" class="btn" data-toggle="modal">Launch demo modal</a>，將{toggle:"modal"}鍵值對存入
有興趣的同學(xué)可以去試調(diào)以下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;
}
我再去詳細(xì)閱讀了jquery官網(wǎng)的幫助文檔有如下一段話
HTML5 data-* Attributes（HTML5 data-* 屬性）
從jQuery 1.4.3起， HTML 5 data- 屬性 將自動被引用到j(luò)Query的數(shù)據(jù)對象中。嵌入式破折號處理屬性（ attributes）的方式在 jQuery 1.6 中已經(jīng)改變，以使之符合W3C HTML5 規(guī)范.
舉個例子, 給定下面的HTML:
<div data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'></div>
下面所有的 jQuery 代碼都能運(yùn)行。
$("div").data("role") === "page";
$("div").data("lastValue") === 43;
$("div").data("hidden") === true;
$("div").data("options").name === "John";
- BootStrap框架中的data-[ ]自定義屬性理解(推薦)
- Bootstrap中data-target 到底是什么
- bootstrap jquery dataTable 異步ajax刷新表格數(shù)據(jù)的實(shí)現(xiàn)方法
- DataTables+BootStrap組合使用Ajax來獲取數(shù)據(jù)并且動態(tài)加載dom的方法（排序，過濾，分頁等）
- 基于SpringMVC+Bootstrap+DataTables實(shí)現(xiàn)表格服務(wù)端分頁、模糊查詢
- 利用ASP.NET MVC和Bootstrap快速搭建個人博客之后臺dataTable數(shù)據(jù)列表
- Bootstrap 中data-[*] 屬性的整理
相關(guān)文章
json+jQuery實(shí)現(xiàn)的無限級樹形菜單效果代碼
這篇文章主要介紹了json+jQuery實(shí)現(xiàn)的無限級樹形菜單效果代碼,涉及jquery針對json數(shù)據(jù)的遍歷、讀取及動態(tài)操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
取消選中單選框radio，第一種，第二種方式是使用jQuery實(shí)現(xiàn)的，第三種方式是基于JS和DOM實(shí)現(xiàn)的，大家可以看看下面的示例2014-09-09
Jquery ajax請求導(dǎo)出Excel表格的實(shí)現(xiàn)代碼
下面小編就為大家?guī)硪黄狫query ajax請求導(dǎo)出Excel表格的實(shí)現(xiàn)代碼。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
jquery 驗(yàn)證用戶名是否重復(fù)代碼實(shí)例
這篇文章主要介紹了jquery驗(yàn)證用戶名是否重復(fù)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
jQuery代碼實(shí)現(xiàn)實(shí)時獲取時間
這篇文章主要介紹了jQuery代碼實(shí)現(xiàn)實(shí)時獲取時間功能，代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-01-01
這篇文章主要介紹了jQuery實(shí)現(xiàn)圖片局部放大鏡效果的相關(guān)資料,需要的朋友可以參考下2016-03-03
這篇文章主要介紹了Jquery實(shí)現(xiàn)遮罩層的方法,詳細(xì)的分析了jQuery實(shí)現(xiàn)遮罩層的步驟與相關(guān)技巧,需要的朋友可以參考下2015-06-06
jQuery基于ajax實(shí)現(xiàn)頁面加載后檢查用戶登錄狀態(tài)的方法
這篇文章主要介紹了jQuery基于ajax實(shí)現(xiàn)頁面加載后檢查用戶登錄狀態(tài)的方法,結(jié)合實(shí)例形式較為詳細(xì)分析了jQuery結(jié)合ajax進(jìn)行表單登陸驗(yàn)證操作的具體步驟與相關(guān)操作技巧,需要的朋友可以參考下2017-02-02
這篇文章主要介紹了jQuery選擇器之層次選擇器用法,結(jié)合實(shí)例形式分析了jQuery后代元素選擇器、子元素選擇器、相鄰元素選擇器、兄弟元素選擇器等相關(guān)使用技巧,需要的朋友可以參考下2019-02-02
jQuery實(shí)現(xiàn)ajax的嵌套請求案例分析
這篇文章主要介紹了jQuery實(shí)現(xiàn)ajax的嵌套請求,結(jié)合具體實(shí)例形式分析了ajax嵌套請求的原理、實(shí)現(xiàn)方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-02-02