使用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 相关文章推荐
asp 的 分词实现代码
May 24 Javascript
excel操作之Add Data to a Spreadsheet Cell
Jun 12 Javascript
JavaScript Event学习补遗 addEventSimple
Feb 11 Javascript
js计算精度问题小结
Apr 22 Javascript
基于JQuery实现滚动到页面底端时自动加载更多信息
Jan 31 Javascript
javascript模拟post提交隐藏地址栏的参数
Sep 03 Javascript
Node.js的包详细介绍
Jan 14 Javascript
javascript框架设计之框架分类及主要功能
Jun 23 Javascript
javascript实现圣旨卷轴展开效果(代码分享)
Mar 23 Javascript
vue2.0多条件搜索组件使用详解
Mar 26 Javascript
Node.js 使用AngularJS的方法示例
May 11 Javascript
浅谈React之状态(State)
Sep 19 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 section简介与用法分析
2008/10/03 PHP
PHP面向对象概念
2011/11/06 PHP
php命令行用法入门实例教程
2014/10/27 PHP
thinkphp5 加载静态资源路径与常量的方法
2017/12/24 PHP
JavaScript的目的分析
2007/01/05 Javascript
jquery 文本上下无缝滚动,鼠标放上去就停止 小例子
2013/06/05 Javascript
Javascript中的默认参数详解
2014/10/22 Javascript
javascript禁止访客复制网页内容的实现代码
2015/08/05 Javascript
自动完成的搜索框javascript实现
2016/02/26 Javascript
浅析在javascript中创建对象的各种模式
2016/05/06 Javascript
教你用十行node.js代码读取docx的文本
2017/03/08 Javascript
vue-router路由参数刷新消失的问题解决方法
2017/06/17 Javascript
vue绑定事件后获取绑定事件中的this方法
2018/09/15 Javascript
从零开始在NPM上发布一个Vue组件的方法步骤
2018/12/20 Javascript
JavaScript 反射和属性赋值实例解析
2019/10/28 Javascript
vue-resource:jsonp请求百度搜索的接口示例
2019/11/09 Javascript
使用konva和vue-konva库实现拖拽滑块验证功能
2020/04/27 Javascript
vue递归获取父元素的元素实例
2020/08/07 Javascript
javascript实现数字时钟效果
2021/02/06 Javascript
Django中URLconf和include()的协同工作方法
2015/07/20 Python
python机器学习之决策树分类详解
2017/12/20 Python
Python numpy 提取矩阵的某一行或某一列的实例
2018/04/03 Python
Python迭代器定义与简单用法分析
2018/04/30 Python
python实现人民币大写转换
2018/06/20 Python
python 以16进制打印输出的方法
2018/07/09 Python
Python3中在Anaconda环境下安装basemap包
2018/10/21 Python
python中的反斜杠问题深入讲解
2019/08/12 Python
从pandas一个单元格的字符串中提取字符串方式
2019/12/17 Python
python使用建议与技巧分享(二)
2020/08/17 Python
python通过函数名调用函数的几种场景
2020/09/23 Python
IE兼容css3圆角的实现代码
2011/07/21 HTML / CSS
高一新生军训方案
2014/05/12 职场文书
2014年保密工作总结
2014/11/22 职场文书
详解Java ES多节点任务的高效分发与收集实现
2021/06/30 Java/Android
SpringBoot整合Mybatis Generator自动生成代码
2021/08/23 Java/Android
pycharm安装深度学习pytorch的d2l包失败问题解决
2022/03/25 Python