jQuery.fn.dataset = function(attr, val) {
// 获取数据集
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;
} // 返回指定数据
if (arguments.length == 1 && typeof attr != 'object') {
if(encode(attr) == "data-path"){
return this.attr(encode(attr));
}
return autobox(this.attr(encode(attr)));
} // 设置数据集
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-属性来赋值。

获取:

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

赋值:

$("div").dataset("name","Tezml")  //给data-name这个属性赋值为Tezml

自制获取data-自定义属性的更多相关文章

  1. Vue执行方法,方法获取data值,设置data值,方法传值

    方法写在methods中 v-on:click="run()" @click="run()" 方法获取data中的数据通过this.数据获取 方法设置data中 ...

  2. html5中event获取data和class

    获取data和class var tare=$(e.relatedTarget).data("id");var tar=event.target;console.log(tare) ...

  3. data自定义属性获取方法和设置

    <!--原生获取方法--> <div data-id="id=1"></div> <script> //js原生获取方法 var i ...

  4. 如何获取input自定义属性

    javascript方法: <input type="checkbox"  name="sdf"  data="这是自定义属性" /& ...

  5. vue父子组件之间互相获取data值&调用方法(非props)

    vue 子组件调用父组件方法&数据 vue有$parent这么一个属性,在子组件中就能拿到父组件的数据 this.$parent.xxx 就能调用父组件的方法 this.$parent.xxx ...

  6. jquery获取data-xxx自定义属性的值遇到的问题

    直接用jquery的 data("name") 获取 data-name的值有问题,获取的只是最初的值,即使后边改变也不会变,所以还是要用attr("data-name& ...

  7. 【vue】——vue.js 获取当前 自定义属性值

    假设有一个标签h5, 我们给它添加了一个自定义属性值,(item.id是从动态添加的) 点击h5 标签,如何才能获取当前对应的自定义属性值呢? 想当然的我最开始这样写: <h5 class=&q ...

  8. Vue 在beaforeCreate时获取data中的数据

    众所周知,vue在beforecreate时期是获取不到data中的 数据的 但是通过一些方法可以实现在beforecreate时获取到data中的数据 暂时想到两种放发可以实现,vue在before ...

  9. Vue beaforeCreate时获取data中的数据

    异步获取即:通过    $this.$nextTick或者settimeout,这连dom都可以拿出来 beforeCreate() { this.$nextTick(function() { con ...

随机推荐

  1. xhtml规范

    在使用XHTML语言进行网页制作时,必须要遵循一定的语法规范.下面进行详细讲解,其中具体内容可以分为以下几点. 文档方面: 必须定义文档类型(DTD)和你的名字空间 标签方面: 所有标签均要小写,合理 ...

  2. sqlserver中的rowversion

    rowversion 公开数据库中自动生成的唯一二进制数字的数据类型.rowversion通常用作给表行加版本戳的机制,存储大小为8字节.rowversion数据类型只是递增的数字,不保留日期或时间. ...

  3. css设置滚动条颜色与样式以及如何去掉与隐藏滚动条

    我们大家在浏览网页的时偶尔会看到很漂亮的各种颜色样式的滚动条,这就是通过css代码控制来实现的,于是本人搜集整理一番,这里和大家分享一下使用CSS设置滚动条颜色以及如何去掉滚动条的方法,需要的朋友可以 ...

  4. redis批量执行

    1.首先把redis命令放在txt文件中 eg: 文件名:  test.txt 内容如下: HMSET HM_001 name zhang01 age HMSET HM_002 name zhang0 ...

  5. android Log.isLoggable步骤的使用

    原文地址: http://www.cnblogs.com/maxinliang/p/4024442.html android Log.isLoggable方法的使用 android 动态控制logca ...

  6. WCF入门教程系列四

    一.概述 配置也是WCF编程中的主要组成部分.在 以往的.net应用程序中,我们会把DBConn和一些动态加载类及变量写在配置文件里.但WCF有所不同.他指定向客户端公开的服务,包括服务的地址. 服务 ...

  7. hdu 确定比赛名次

    算法:拓扑排序 题意:有一个比赛,现在知道很多队之间的关系:让你去让确定比赛排名: Problem Description 有N个比赛队(1<=N<=500),编号依次为1,2,3,... ...

  8. winPcap_2_编译环境*注意*

    使用WinPcap编程 创建一个使用 wpcap.dll 的应用程序 用 Microsoft Visual C++ 创建一个使用 wpcap.dll 的应用程序,需要按以下步骤: 在每一个使用了库的源 ...

  9. 不用派生CTreeCtrl不用繁琐的过程 教你如何让CTreeCtrl的每一项有ToolTip提示

    最近工作中需要让CTreeCtrl控件的每一项都有提示信息,于是谷歌百度,爬山涉水,结果是………….在CodeProject里找到一篇文章是把CTreeCtrl派生出新类,重载一些函数自定义内容.使用 ...

  10. CloudStack cloud数据库op_host_capacity表type与控制板上的内容的对应关系

    listCapacity: type 名称 0 内存 1 CPU 3 主存储 4 公用IP地址 5 管理类IP地址 6 辅助存储 7 VLAN 9 本地存储 ViewResponseHelper.ja ...