使用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 中的类和闭包
Jan 08 Javascript
JQuery上传插件Uploadify使用详解及错误处理
Apr 27 Javascript
在JavaScript中获取请求的URL参数
Dec 22 Javascript
javascript之querySelector和querySelectorAll使用说明
Oct 09 Javascript
JavaScript对象的property属性详解
Apr 01 Javascript
解决Angular.Js与Django标签冲突的方案
Dec 20 Javascript
JScript实现表格的简单操作
Aug 15 Javascript
windows下更新npm和node的方法
Nov 30 Javascript
Vue批量图片显示时遇到的路径被解析问题
Mar 28 Javascript
基于webpack4+vue-cli3项目实现换肤功能
Jul 17 Javascript
Node.js API详解之 timer模块用法实例分析
May 07 Javascript
JS实现简单打字测试
Jun 24 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
phpnow php探针环境检测代码
2014/11/04 PHP
php实现图片上传并利用ImageMagick生成缩略图
2016/03/14 PHP
PHP实现四种基础排序算法的运行时间比较(推荐)
2016/08/11 PHP
ThinkPHP实现附件上传功能
2017/04/27 PHP
PHP实现向关联数组指定的Key之前插入元素的方法
2017/06/06 PHP
TP - 比RBAC更好的权限认证方式(Auth类认证)
2021/03/09 PHP
插件:检测javascript的内存泄漏
2007/03/04 Javascript
仅IE9/10同时支持script元素的onload和onreadystatechange事件分析
2011/04/27 Javascript
JavaScript实现QueryString获取GET参数的方法
2013/07/02 Javascript
js实现顶部可折叠的菜单工具栏效果实例
2015/05/09 Javascript
详细解读JavaScript编程中的Promise使用
2015/07/27 Javascript
Google 地图获取API Key详细教程
2016/08/06 Javascript
jQuery Ztree行政地区树状展示(点击加载)
2016/11/09 Javascript
js实现开启密码大写提示
2016/12/21 Javascript
使用nodejs爬取前程无忧前端技能排行
2017/05/06 NodeJs
Javascript之图片的延迟加载的实例详解
2017/07/24 Javascript
Node.js中使用mongoose操作mongodb数据库的方法
2017/09/12 Javascript
35个Python编程小技巧
2014/04/01 Python
python设计模式大全
2016/06/27 Python
django基于存储在前端的token用户认证解析
2019/08/06 Python
使用Python测试Ping主机IP和某端口是否开放的实例
2019/12/17 Python
pytorch读取图像数据转成opencv格式实例
2020/06/02 Python
Pandas的Apply函数具体使用
2020/07/21 Python
波兰香水和化妆品购物网站:Notino.pl
2017/11/07 全球购物
味多美官网:蛋糕订购,100%使用天然奶油
2017/11/10 全球购物
苹果台湾官网:Apple台湾
2019/01/05 全球购物
日本整理专家Marie Kondo的官方在线商店:KonMari
2020/06/29 全球购物
别名指示符是什么
2012/10/08 面试题
求职信写作要突出重点
2014/01/01 职场文书
2014学年自我鉴定
2014/02/23 职场文书
电焊工岗位工作职责
2014/07/09 职场文书
党员个人自我评价
2015/03/03 职场文书
雾霾停课通知
2015/04/24 职场文书
初二数学教学反思
2016/02/17 职场文书
导游词之太行山青龙峡
2020/01/14 职场文书
vue使用echarts实现折线图
2022/03/21 Vue.js