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

bootstrap data與jquery .data

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

jquery官網(wǎng)對(duì).data函數(shù)描述是:在匹配元素上存儲(chǔ)任意相關(guān)數(shù)據(jù) 或 返回匹配的元素集合中的第一個(gè)元素的給定名稱的數(shù)據(jù)存儲(chǔ)的值。

存儲(chǔ)鍵值(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 的彈窗掩碼的時(shí)候遇到了這樣一段代碼讓我產(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())

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

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

$target.data()是空對(duì)象{} ,$this.data()值是{toggle: "modal"} 。這里不經(jīng)要問(wèn) $this.data() 的返回值哪來(lái)的

看了下html代碼,剛好與被綁定click方法的dom對(duì)象的屬性值一樣,以下是被綁定的dom對(duì)象的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ù)時(shí)會(huì)將屬性名為data-開(kāi)頭的鍵值對(duì)存入匹配元素上。

本例中<a href="#myModal" rel="external nofollow" rel="external nofollow" role="button" class="btn" data-toggle="modal">Launch demo modal</a>,將{toggle:"modal"}鍵值對(duì)存入

有興趣的同學(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- 屬性 將自動(dòng)被引用到j(luò)Query的數(shù)據(jù)對(duì)象中。嵌入式破折號(hào)處理屬性( attributes)的方式在 jQuery 1.6 中已經(jīng)改變,以使之符合W3C HTML5 規(guī)范.

舉個(gè)例子, 給定下面的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"; 

相關(guān)文章

  • jQuery ajax中使用confirm,確認(rèn)是否刪除的簡(jiǎn)單實(shí)例

    jQuery ajax中使用confirm,確認(rèn)是否刪除的簡(jiǎn)單實(shí)例

    下面小編就為大家?guī)?lái)一篇jQuery ajax 中使用confirm ,確認(rèn)是否刪除的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2016-06-06
  • jquery 動(dòng)態(tài)遍歷select 賦值的實(shí)例

    jquery 動(dòng)態(tài)遍歷select 賦值的實(shí)例

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

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

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

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

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

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

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

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

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

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

    下面小編就為大家?guī)?lái)一篇picLazyLoad 實(shí)現(xiàn)圖片延時(shí)加載(包含背景圖片)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2016-07-07
  • jQuery復(fù)制表單元素附源碼分享效果演示

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

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

    jQuery仿IOS彈出框插件

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

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

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

最新評(píng)論