使用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 相关文章推荐
用JavaScrpt实现文件夹简单轻松加密的实现方法图文
Sep 08 Javascript
javascript css在IE和Firefox中区别分析
Feb 18 Javascript
javascript小组件 原生table排序表格脚本(兼容ie firefox opera chrome)
Jul 25 Javascript
JavaScript实现多维数组的方法
Nov 20 Javascript
用正则表达式替换图片地址img标签
Nov 22 Javascript
使用AmplifyJS组件配合JavaScript进行编程的指南
Jul 28 Javascript
JS实现点击事件统计的简单实例
Jul 10 Javascript
微信小程序从注册账号到上架(图文详解)
Jul 17 Javascript
vue-cli history模式实现tomcat部署报404的解决方式
Sep 06 Javascript
vuex(vue状态管理)的特殊应用案例分享
Mar 03 Javascript
JavaScript中数组去重的5种方法
Jul 04 Javascript
Vue h函数的使用详解
Feb 18 Vue.js
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
PHP详细彻底学习Smarty
2008/03/27 PHP
在MongoDB中模拟Auto Increment的php代码
2011/03/06 PHP
PHP防止表单重复提交的几种常用方法汇总
2014/08/19 PHP
PHP Header用于页面跳转时的几个注意事项
2016/10/21 PHP
php实现构建排除当前元素的乘积数组方法
2018/10/06 PHP
JavaScript 读取元素的CSS信息的代码
2010/02/07 Javascript
JS date对象的减法处理实现代码
2010/12/28 Javascript
jQuery 中ajax异步调用的四种方式
2016/06/28 Javascript
jQuery mobile的header和footer在点击屏幕的时候消失的解决办法
2016/07/01 Javascript
微信小程序开发之toast提示插件使用示例
2017/06/08 Javascript
详解vue-router和vue-cli以及组件之间的传值
2017/07/04 Javascript
react学习笔记之state以及setState的使用
2017/12/07 Javascript
微信小程序实现YDUI的ScrollTab组件
2018/02/02 Javascript
Vue 中mixin 的用法详解
2018/04/23 Javascript
Vue脚手架的简单使用实例
2018/07/10 Javascript
JS根据Unix时间戳显示发布时间是多久前【项目实测】
2019/07/10 Javascript
Vue实现点击显示不同图片的效果
2019/08/10 Javascript
Python 爬虫爬取指定博客的所有文章
2016/02/17 Python
Python调用C++程序的方法详解
2017/01/24 Python
Python正则表达式教程之三:贪婪/非贪婪特性
2017/03/02 Python
Python自然语言处理之词干,词形与最大匹配算法代码详解
2017/11/16 Python
python向已存在的excel中新增表,不覆盖原数据的实例
2018/05/02 Python
Python构建图像分类识别器的方法
2019/01/12 Python
python实现windows壁纸定期更换功能
2019/01/21 Python
使用python itchat包爬取微信好友头像形成矩形头像集的方法
2019/02/21 Python
python 中的列表生成式、生成器表达式、模块导入
2019/06/19 Python
python等待10秒执行下一命令的方法
2020/07/19 Python
Pytorch框架实现mnist手写库识别(与tensorflow对比)
2020/07/20 Python
Python高阶函数与装饰器函数的深入讲解
2020/11/10 Python
手把手教你用纯css3实现轮播图效果实例
2017/05/04 HTML / CSS
捷克母婴用品购物网站:Feedo.cz
2020/12/28 全球购物
大学生求职自我评价
2014/01/16 职场文书
学校运动会广播稿100条
2014/09/14 职场文书
学生会生活部工作总结2015
2015/03/31 职场文书
2016大一新生军训心得体会
2016/01/11 职场文书
ORACLE数据库应用开发的三十个注意事项
2021/06/07 Oracle