使用jQuery獲取data-的自定義屬性
更新時(shí)間:2015年11月10日 11:50:51 投稿:hebedich
本文給大家分享的是使用jQuery制作的組件,實(shí)現(xiàn)獲取data-自定義屬性,并附上使用方法,非常的實(shí)用,有需要的小伙伴可以參考下
廢話少說(shuō),先上代碼
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); };
通過(guò)jQuery制作組件,可以輕松獲取到我們data-的自定義屬性,也可以給data-屬性來(lái)賦值。
獲取:
$("div").dataset("name") //獲取data-name的值
賦值:
$("div").dataset("name","Tezml") //給data-name這個(gè)屬性賦值為T(mén)ezml
相關(guān)文章
jQuery插件FusionCharts繪制的3D環(huán)餅圖效果示例【附demo源碼】
這篇文章主要介紹了jQuery插件FusionCharts繪制的3D環(huán)餅圖效果,結(jié)合完整實(shí)例形式分析了jQuery使用FusionCharts載入xml格式數(shù)據(jù)繪制圖形的操作步驟與相關(guān)實(shí)現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-04-04jquery zTree異步加載、模糊搜索簡(jiǎn)單實(shí)例分享
這篇文章主要為大家詳細(xì)介紹了jquery zTree異步加載、模糊搜索簡(jiǎn)單實(shí)例,感興趣的小伙伴們可以參考一下2016-03-03JQuery中基礎(chǔ)過(guò)濾選擇器用法實(shí)例分析
這篇文章主要介紹了JQuery中基礎(chǔ)過(guò)濾選擇器用法,涉及jQuery屬性選擇及樣式操作的相關(guān)技巧,需要的朋友可以參考下2015-05-05jQuery實(shí)現(xiàn)獲取當(dāng)前鼠標(biāo)位置并輸出功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)獲取當(dāng)前鼠標(biāo)位置并輸出功能,涉及jQuery事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-01-01JQuery實(shí)現(xiàn)表格數(shù)據(jù)行上移與下移
這篇文章主要為大家詳細(xì)介紹了JQuery實(shí)現(xiàn)表格數(shù)據(jù)行上移與下移,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-02-02