使用jQuery獲取data-的自定義屬性

更新時間：2015年11月10日 11:50:51 投稿：hebedich

本文給大家分享的是使用jQuery制作的組件，實現(xiàn)獲取data-自定義屬性，并附上使用方法，非常的實用，有需要的小伙伴可以參考下

廢話少說，先上代碼

jQuery.fn.dataset = function(attr, val) {
    // 獲取數(shù)據(jù)集
    if (arguments.length == 0) {
      var dataset = {};
      jQuery(this).eq(0).each(function() {
        var attrs = this.attributes;
        for (var i = 0, l = attrs.length; i < l; i++) {
          var attr = attrs[i];
          if (/^data-/i.test(attr.name)) {
            dataset[decode(encode(attr.name.substring(5)))] = autobox(attr.value);
            if (decode(encode(attr.name.substring(5))) == "path") {
              dataset[decode(encode(attr.name.substring(5)))] = attr.value != null ? String(attr.value) : null;
            }
            if (decode(encode(attr.name.substring(5))) == "name") {
              dataset[decode(encode(attr.name.substring(5)))] = attr.value != null ? String(attr.value) : null;
            }
          }
        }
      });
      return dataset;
    }

    // 返回指定數(shù)據(jù)
    if (arguments.length == 1 && typeof attr != 'object') {
      if(encode(attr) == "data-path"){
        return this.attr(encode(attr));
      }
      return autobox(this.attr(encode(attr)));
    }

    // 設(shè)置數(shù)據(jù)集
    var dataset = attr;
    if (typeof attr != 'object') {
      dataset = {};
      dataset[attr] = String(val);
    }
    var tmp = {};
    jQuery.each(dataset, function(k, v) {
      tmp[encode(k)] = autobox(v);
    });
    return this.attr(tmp);
  };

通過jQuery制作組件，可以輕松獲取到我們data-的自定義屬性，也可以給data-屬性來賦值。

獲?。?/p>

$("div").dataset("name") //獲取data-name的值

賦值：

$("div").dataset("name","Tezml") //給data-name這個屬性賦值為Tezml

您可能感興趣的文章:

相關(guān)文章

jquery 實現(xiàn)密碼框的顯示與隱藏示例代碼
密碼框的顯示隱藏有多種實現(xiàn)方法，在將為大家介紹下如何使用jquery實現(xiàn)，感興趣的朋友可以參考下
2013-09-09
jQuery阻止事件冒泡具體實現(xiàn)
冒泡事件就是點擊子節(jié)點，會向上觸發(fā)父節(jié)點，祖先節(jié)點的點擊事件，有需要的朋友可以參考一下
2013-10-10
jQuery圖片滾動圖片的效果(另類實現(xiàn))
jQuery圖片滾動圖片的效果(另類實現(xiàn))，需要的朋友可以參考一下
2013-06-06
JQuery實現(xiàn)鼠標滑過顯示導(dǎo)航下拉列表
我們往往是將同一級目錄下的欄目先隱藏起來，當(dāng)用戶的鼠標滑過時則顯示出來。這就是用javascript實現(xiàn)的一個導(dǎo)航欄下拉列表，下面為大家講解下是如何實現(xiàn)的
2013-09-09
jQuery實現(xiàn)ajax調(diào)用WCF服務(wù)的方法(附帶demo下載)
這篇文章主要介紹了jQuery實現(xiàn)ajax調(diào)用WCF服務(wù)的方法,以完整實例形式分析了jQuery的ajax前端調(diào)用及后臺交互調(diào)用WCF服務(wù)的相關(guān)技巧,并附帶完整實例共讀者下載,需要的朋友可以參考下
2015-12-12
使用jQuery制作浮動工具欄的實例分享
這里所說的浮動工具欄就是大家平時看到的社交網(wǎng)絡(luò)分享按鈕欄那樣的效果,可以做成浮動效果且能上下移動,這里我們就來看一個使用jQuery制作頁面工具邊欄的實例分享.
2016-05-05
jQuery判斷自定義屬性data-val用法示例
這篇文章主要介紹了jQuery判斷自定義屬性data-val用法,結(jié)合實例形式分析了jQuery自定義屬性的定義與簡單使用技巧,需要的朋友可以參考下
2019-01-01
jquery-mobile基礎(chǔ)屬性與用法詳解
這篇文章主要介紹了jquery-mobile基礎(chǔ)屬性與用法,結(jié)合實例形式詳細分析了jQuery-mobile常用屬性功能與具體使用技巧,需要的朋友可以參考下
2016-11-11
jquery二級導(dǎo)航內(nèi)容均分的原理及實現(xiàn)
頭部導(dǎo)航二級導(dǎo)航有些內(nèi)容太長，一列的話太過難看，就要分成兩列，要做到按塊盡量均分，排列順序沒有限制
2013-08-08
淺談jQuery中的checkbox問題
下面小編就為大家?guī)硪黄獪\談jQuery中的checkbox問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-08-08