使用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)賦值。
獲?。?/p>
$("div").dataset("name") //獲取data-name的值
賦值:
$("div").dataset("name","Tezml") //給data-name這個(gè)屬性賦值為T(mén)ezml
相關(guān)文章
jquery 實(shí)現(xiàn)密碼框的顯示與隱藏示例代碼
密碼框的顯示隱藏有多種實(shí)現(xiàn)方法,在將為大家介紹下如何使用jquery實(shí)現(xiàn),感興趣的朋友可以參考下2013-09-09
jQuery圖片滾動(dòng)圖片的效果(另類實(shí)現(xiàn))
jQuery圖片滾動(dòng)圖片的效果(另類實(shí)現(xiàn)),需要的朋友可以參考一下2013-06-06
JQuery實(shí)現(xiàn)鼠標(biāo)滑過(guò)顯示導(dǎo)航下拉列表
我們往往是將同一級(jí)目錄下的欄目先隱藏起來(lái),當(dāng)用戶的鼠標(biāo)滑過(guò)時(shí)則顯示出來(lái)。這就是用javascript實(shí)現(xiàn)的一個(gè)導(dǎo)航欄下拉列表,下面為大家講解下是如何實(shí)現(xiàn)的2013-09-09
jQuery實(shí)現(xiàn)ajax調(diào)用WCF服務(wù)的方法(附帶demo下載)
這篇文章主要介紹了jQuery實(shí)現(xiàn)ajax調(diào)用WCF服務(wù)的方法,以完整實(shí)例形式分析了jQuery的ajax前端調(diào)用及后臺(tái)交互調(diào)用WCF服務(wù)的相關(guān)技巧,并附帶完整實(shí)例共讀者下載,需要的朋友可以參考下2015-12-12
使用jQuery制作浮動(dòng)工具欄的實(shí)例分享
這里所說(shuō)的浮動(dòng)工具欄就是大家平時(shí)看到的社交網(wǎng)絡(luò)分享按鈕欄那樣的效果,可以做成浮動(dòng)效果且能上下移動(dòng),這里我們就來(lái)看一個(gè)使用jQuery制作頁(yè)面工具邊欄的實(shí)例分享.2016-05-05
jquery二級(jí)導(dǎo)航內(nèi)容均分的原理及實(shí)現(xiàn)
頭部導(dǎo)航二級(jí)導(dǎo)航有些內(nèi)容太長(zhǎng),一列的話太過(guò)難看,就要分成兩列,要做到按塊盡量均分,排列順序沒(méi)有限制2013-08-08

