欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

bootstrap data與jquery .data

 更新時間：2014年07月07日 12:18:10   投稿：hebedich  
最近在做項目的時候用到了bootstrap，在使用中發(fā)現(xiàn)其data與jquery的data有些不一樣的地方，記錄一下，分享給大家

jquery官網(wǎng)對.data函數(shù)描述是:在匹配元素上存儲任意相關數(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()
   })
 })

代碼中的三目運算符 $target.data('modal')?'toggle' : $.extend({ remote:!/#/.test(href) && href }, $target.data(), $this.data())

是判斷窗口是否是第一次渲染 。第一次渲染窗口的時候執(zhí)行了

option = $.extend({ remote:!/#/.test(href) && href }, $target.data(), $this.data()) //結果是 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ù)中的部分代碼 , 當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"}鍵值對存入

有興趣的同學可以去試調(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;
    }

我再去詳細閱讀了jquery官網(wǎng)的幫助文檔有如下一段話
HTML5 data-* Attributes（HTML5 data-* 屬性）
從jQuery 1.4.3起， HTML 5 data- 屬性 將自動被引用到jQuery的數(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 代碼都能運行。

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

相關文章

  • jQuery ajax中使用confirm,確認是否刪除的簡單實例

    jQuery ajax中使用confirm,確認是否刪除的簡單實例

    下面小編就為大家?guī)硪黄猨Query ajax 中使用confirm ,確認是否刪除的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-06-06
  • jquery 動態(tài)遍歷select 賦值的實例

    jquery 動態(tài)遍歷select 賦值的實例

    今天小編就為大家分享一篇jquery 動態(tài)遍歷select 賦值的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • jQuery照片伸縮效果不影響其他元素的布局

    jQuery照片伸縮效果不影響其他元素的布局

    jQuery照片伸縮效果，不是單純的圖片放大縮小，不影響其他元素的布局,需要的朋友可以參考下
    2014-05-05
  • jQuery源碼解讀之hasClass()方法分析

    jQuery源碼解讀之hasClass()方法分析

    這篇文章主要介紹了jQuery源碼解讀之hasClass()方法,以注釋形式較為詳細的分析了hasClass()方法的實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
    2015-02-02
  • jQuery中的jQuery()方法用法分析

    jQuery中的jQuery()方法用法分析

    這篇文章主要介紹了jQuery中的jQuery()方法用法,以實例形式較為詳細的分析jQuery()方法的四種常見語法結構與用法技巧,具有一定的參考借鑒價值,需要的朋友可以參考下
    2014-12-12
  • 快速移動鼠標觸發(fā)問題及解決方法(ECharts外部調(diào)用保存為圖片操作及工作流接線mouseenter和mouseleave)

    快速移動鼠標觸發(fā)問題及解決方法(ECharts外部調(diào)用保存為圖片操作及工作流接線mouseenter和mouseleav

    這篇文章主要介紹了快速移動鼠標所觸發(fā)的問題及解決方法(ECharts外部調(diào)用保存為圖片操作及工作流接線mouseenter和mouseleave),非常不錯，具有參考借鑒價值，需要的朋友可以參考下
    2016-08-08
  • picLazyLoad 實現(xiàn)圖片延時加載(包含背景圖片)

    picLazyLoad 實現(xiàn)圖片延時加載(包含背景圖片)

    下面小編就為大家?guī)硪黄猵icLazyLoad 實現(xiàn)圖片延時加載(包含背景圖片)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-07-07
  • jQuery復制表單元素附源碼分享效果演示

    jQuery復制表單元素附源碼分享效果演示

    當我們遇到提交表單時，需要我們重復添加好幾個表單，在訂單表格中添加多個不同型號的產(chǎn)品信息。這個時候有復制表單表單按鈕，也就是新增一項，通過點擊復制按鈕來實現(xiàn)新增一項，怎么實現(xiàn)的呢？下面小編跟大家分享，需要的朋友的朋友可以參考下
    2015-09-09
  • jQuery仿IOS彈出框插件

    jQuery仿IOS彈出框插件

    這款彈出框插件是本人自己模仿IOS原生彈出框?qū)懙囊粋€自定義插件，包括Alert彈出框和Confirm確認框，支持標題，內(nèi)容，按鈕文字以及按鈕回調(diào)函數(shù)自定義，使用非常簡單，本文給大家介紹了jQuery仿IOS彈出框插件,需要的朋友可以參考下
    2017-02-02
  • jQuery實現(xiàn)彈幕效果

    jQuery實現(xiàn)彈幕效果

    本文主要分享了jQuery實現(xiàn)彈幕效果的示例代碼。具有很好的參考價值，下面跟著小編一起來看下吧
    2017-02-02

最新評論