使用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 相关文章推荐
图片自动更新(说明)
Oct 02 Javascript
指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)
Feb 21 Javascript
从数据库读取数据后将其输出成html标签的三种方法
Oct 13 Javascript
完美实现八种js焦点轮播图(上篇)
Jul 18 Javascript
使用JS代码实现点击按钮下载文件
Nov 12 Javascript
js实现图片360度旋转
Jan 22 Javascript
vue+webpack 打包文件 404 页面空白的解决方法
Feb 28 Javascript
vue中Npm run build 根据环境传递参数方法来打包不同域名
Mar 29 Javascript
了解JavaScript中的选择器
May 24 Javascript
JS代码检查工具ESLint介绍与使用方法
Feb 04 Javascript
基于Element封装一个表格组件tableList的使用方法
Jun 29 Javascript
微信小程序弹窗禁止页面滚动的实现代码
Dec 30 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
有关JSON以及JSON在PHP中的应用
2010/04/09 PHP
PHP开发中的错误收集,不定期更新。
2011/02/03 PHP
PHP实现合并两个排序链表的方法
2018/01/19 PHP
JavaScript 匿名函数(anonymous function)与闭包(closure)
2011/10/04 Javascript
js使用正则实现ReplaceAll全部替换的方法
2014/07/18 Javascript
浅谈javascript 函数内部属性
2015/01/21 Javascript
浅谈JavaScript Math和Number对象
2015/01/26 Javascript
jquery获取url参数及url加参数的方法
2015/10/26 Javascript
jquery mobile开发常见问题分析
2016/01/21 Javascript
jQuery ajax方法传递中文时出现中文乱码的解决方法
2016/07/25 Javascript
利用百度地图API获取当前位置信息的实例
2017/11/06 Javascript
基于vue-cli vue-router搭建底部导航栏移动前端项目
2018/02/28 Javascript
详解VUE Element-UI多级菜单动态渲染的组件
2019/04/25 Javascript
Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址
2019/05/21 Javascript
[01:21:36]CHAOS vs Alliacne 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
[01:03:50]DOTA2-DPC中国联赛 正赛 CDEC vs DLG BO3 第二场 2月7日
2021/03/11 DOTA
Python XML RPC服务器端和客户端实例
2014/11/22 Python
深入学习python的yield和generator
2016/03/10 Python
python连接数据库的方法
2017/10/19 Python
python pandas cumsum求累计次数的用法
2019/07/29 Python
为什么说Python可以实现所有的算法
2019/10/04 Python
深入浅析python变量加逗号,的含义
2020/02/22 Python
Python打印不合法的文件名
2020/07/31 Python
移动端rem布局的两种实现方法
2018/01/03 HTML / CSS
网页切图的CSS和布局经验与要点
2015/04/09 HTML / CSS
突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
2013/01/31 HTML / CSS
使用HTML5和CSS3制作一个模态框的示例
2018/03/07 HTML / CSS
Canvas多边形绘制的实现方法
2019/08/05 HTML / CSS
兰蔻美国官网:Lancome美国
2017/04/25 全球购物
信息技术专业大学生职业生涯规划书
2014/01/24 职场文书
歌颂祖国演讲稿
2014/05/04 职场文书
法学专业毕业生求职信
2014/06/12 职场文书
2014年宣传工作总结
2014/11/18 职场文书
2015年社区流动人口工作总结
2015/05/12 职场文书
刑事申诉状范文
2015/05/20 职场文书
golang 语言中错误处理机制
2021/08/30 Golang