使用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 相关文章推荐
javascript 复杂的嵌套环境中输出单引号和双引号
May 26 Javascript
jQuery UI AutoComplete 使用说明
Jun 20 Javascript
javascript强大的日期函数代码分享
Sep 04 Javascript
表单元素与非表单元素刷新区别详细解析
Nov 06 Javascript
通过onmouseover选项卡实现img图片的变化
Feb 12 Javascript
控制文字内容的显示与隐藏示例
Jun 11 Javascript
深入理解JavaScript系列(42):设计模式之原型模式详解
Mar 04 Javascript
JS正则匹配URL网址的方法(可匹配www,http开头的一切网址)
Jan 06 Javascript
vue父组件通过props如何向子组件传递方法详解
Aug 16 Javascript
微信小程序用户位置权限的获取方法(拒绝后提醒)
Nov 15 Javascript
微信小程序使用component自定义toast弹窗效果
Nov 27 Javascript
JavaScript常用内置对象用法分析
Jul 09 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
咖啡冲泡指南 咖啡有哪些制作方式 单品咖啡 意式咖啡
2021/03/06 冲泡冲煮
PHP列出MySQL中所有数据库的方法
2015/03/12 PHP
php生成动态验证码gif图片
2015/10/19 PHP
PHP echo()函数讲解
2019/02/15 PHP
thinkphp5 + ajax 使用formdata提交数据(包括文件上传) 后台返回json完整实例
2020/03/02 PHP
网站被黑的假象--ARP欺骗之页面中加入一段js
2007/05/16 Javascript
利用WebBrowser彻底解决Web打印问题(包括后台打印)
2009/06/22 Javascript
用jQuery打造TabPanel效果代码
2010/05/22 Javascript
windows8.1+iis8.5下安装node.js开发环境
2014/12/12 Javascript
javascript实现限制上传文件大小
2015/02/06 Javascript
JavaScript中join()方法的使用简介
2015/06/09 Javascript
AngularJS基础 ng-class-odd 指令示例
2016/08/01 Javascript
JS文件/图片从电脑里面拖拽到浏览器上传文件/图片
2017/03/08 Javascript
vue.js实现简单轮播图效果
2017/10/10 Javascript
p5.js入门教程和基本形状绘制
2018/03/15 Javascript
vue项目创建并引入饿了么elementUI组件的步骤
2019/04/11 Javascript
JavaScript使用面向对象实现的拖拽功能详解
2019/06/12 Javascript
layui实现数据表格点击搜索功能
2020/03/26 Javascript
js 对象使用的小技巧实例分析
2019/11/08 Javascript
Python中实现对list做减法操作介绍
2015/01/09 Python
python多线程用法实例详解
2015/01/15 Python
浅谈Python中copy()方法的使用
2015/05/21 Python
Python os.access()用法实例
2019/02/18 Python
python 判断字符串中是否含有汉字或非汉字的实例
2019/07/15 Python
win10安装tensorflow-gpu1.8.0详细完整步骤
2020/01/20 Python
基于Python制作一副扑克牌过程详解
2020/10/19 Python
《陈毅探母》教学反思
2014/05/01 职场文书
反腐倡廉警示教育活动总结
2014/05/05 职场文书
体育系毕业生自荐信
2014/06/28 职场文书
2014医学院领导班子对照检查材料思想汇报
2014/09/19 职场文书
2015感人爱情寄语
2015/02/26 职场文书
生日宴会家属答谢词
2015/09/29 职场文书
五年级数学教学反思
2016/02/16 职场文书
长辈生日祝福语大全(72句)
2019/08/09 职场文书
导游词之湖北武当山
2019/09/23 职场文书
七年级作文之关于奶奶
2019/10/29 职场文书