使用jQuery获取data-的自定义属性


Posted in Javascript onNovember 10, 2015

废话少说,先上代码

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
Javascript 相关文章推荐
拖动一个HTML元素
Dec 22 Javascript
Use Word to Search for Files
Jun 15 Javascript
用户注册常用javascript代码
Aug 29 Javascript
jQuery ajax cache缓存问题
Jul 01 Javascript
JS 调用微信扫一扫功能
Dec 22 Javascript
微信小程序日历组件calendar详解及实例
Jun 08 Javascript
webpack进阶——缓存与独立打包的用法
Aug 02 Javascript
基于JavaScript表单脚本(详解)
Oct 18 Javascript
详解JS模块导入导出
Dec 20 Javascript
100行代码实现一个vue分页组功能
Nov 06 Javascript
JS根据json数组多个字段排序及json数组常用操作
Jun 06 Javascript
vue组件传值的实现方式小结【三种方式】
Feb 05 Javascript
javascript适合移动端的日期时间拾取器
Nov 10 #Javascript
js图片轮播手动切换效果
Nov 10 #Javascript
JS截取与分割字符串常用技巧总结
Nov 10 #Javascript
jquery validate.js表单验证入门实例(附源码)
Nov 10 #Javascript
纯javascript响应式树形菜单效果
Nov 10 #Javascript
JavaScript中SetInterval与setTimeout的用法详解
Nov 10 #Javascript
深入解析JavaScript编程中的this关键字使用
Nov 09 #Javascript
You might like
模板引擎Smarty深入浅出介绍
2006/12/06 PHP
php中获取主机名、协议及IP地址的方法
2014/11/18 PHP
php使用pdo连接mssql server数据库实例
2014/12/25 PHP
Django 中 cookie的使用
2017/08/17 PHP
Laravel 手动开关 Eloquent 修改器的操作方法
2019/12/30 PHP
动态修改DOM 里面的 id 属性的弊端分析
2008/09/03 Javascript
Node.js中require的工作原理浅析
2014/06/24 Javascript
jquery验证邮箱格式是否正确实例讲解
2015/11/16 Javascript
Bootstrap每天必学之导航条
2015/11/27 Javascript
谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法
2015/12/03 Javascript
再次谈论React.js实现原生js拖拽效果引起的一系列问题
2016/04/03 Javascript
一分钟理解js闭包
2016/05/04 Javascript
JS跨域请求外部服务器的资源
2017/02/06 Javascript
Vue-Router2.X多种路由实现方式总结
2018/02/09 Javascript
详解Nodejs内存治理
2018/05/13 NodeJs
详解element-ui中form验证杂记
2019/03/04 Javascript
微信小程序swiper使用网络图片不显示问题解决
2019/12/13 Javascript
[40:31]Secret vs Alliacne 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
[42:48]完美世界DOTA2联赛PWL S3 Magma vs INK ICE 第二场 12.11
2020/12/16 DOTA
Python Mysql数据库操作 Perl操作Mysql数据库
2009/01/12 Python
Python中几种导入模块的方式总结
2017/04/27 Python
Python使用matplotlib的pie函数绘制饼状图功能示例
2018/01/08 Python
python文件写入write()的操作
2019/05/14 Python
win8.1安装Python 2.7版环境图文详解
2019/07/01 Python
python scatter函数用法实例详解
2020/02/11 Python
pyMySQL SQL语句传参问题,单个参数或多个参数说明
2020/06/06 Python
Python 列表中的修改、添加和删除元素的实现
2020/06/11 Python
Otticanet英国:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/02/10 全球购物
为什么说Ruby是一种真正的面向对象程序设计语言
2012/10/30 面试题
幼儿园教研活动方案
2014/01/19 职场文书
学生会个人自荐书范文
2014/02/12 职场文书
毕业生就业协议书
2014/04/11 职场文书
军训拉歌口号
2014/06/13 职场文书
新文化运动的基本口号
2014/06/21 职场文书
学生会生活部工作总结2015
2015/03/31 职场文书
vue的项目如何打包上线
2022/04/13 Vue.js