使用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 相关文章推荐
window.addeventjs事件驱动函数集合addEvent等
Feb 19 Javascript
jQuery设置div一直在页面顶部显示的方法
Oct 24 Javascript
浏览器兼容性问题大汇总
Dec 17 Javascript
微信小程序项目总结之点赞 删除列表 分享功能
Jun 25 Javascript
深入了解Hybrid App技术的相关知识
Jul 17 Javascript
laypage+SpringMVC实现后端分页
Jul 27 Javascript
利用JS如何获取form表单数据
Dec 19 Javascript
js实现踩五彩块游戏
Feb 08 Javascript
bootstrapValidator表单校验、更改状态、新增、移除校验字段的实例代码
May 19 Javascript
vue flex 布局实现div均分自动换行的示例代码
Aug 05 Javascript
如何在vue中使用kindeditor富文本编辑器
Dec 19 Vue.js
elementui的el-popover修改样式不生效的解决
Jun 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
php将会员数据导入到ucenter的代码
2010/07/18 PHP
php opendir()列出目录下所有文件的实例代码
2016/10/02 PHP
JQuery读取XML文件数据并显示的实现代码
2009/12/16 Javascript
javascript下arguments,caller,callee,call,apply示例及理解
2009/12/24 Javascript
JQuery开发的数独游戏代码
2010/10/29 Javascript
javascript学习笔记(十五) js间歇调用和超时调用
2012/06/20 Javascript
jQuery.extend()的实现方式详解及实例
2013/06/29 Javascript
jquery 层次选择器siblings与nextAll的区别介绍
2013/08/02 Javascript
javascript内存管理详细解析
2013/11/11 Javascript
让IE8浏览器支持function.bind()方法
2014/10/16 Javascript
js实现飞入星星特效代码
2014/10/17 Javascript
数据分析软件之FineReport教程:[5]参数界面JS(全)
2015/08/13 Javascript
js数组去重的hash方法
2016/12/22 Javascript
VUE JS 使用组件实现双向绑定的示例代码
2017/01/10 Javascript
原生js实现商品放大镜效果
2017/01/12 Javascript
JavaScript严格模式下关于this的几种指向详解
2017/07/12 Javascript
js指定步长实现单方向匀速运动
2017/07/17 Javascript
laypage+SpringMVC实现后端分页
2019/07/27 Javascript
[43:03]LGD vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
Python做简单的字符串匹配详解
2017/03/21 Python
Python实现调度算法代码详解
2017/12/01 Python
老生常谈python中的重载
2018/11/11 Python
python读取.mat文件的数据及实例代码
2019/07/12 Python
python实现随机加减法生成器
2020/02/24 Python
python怎么判断模块安装完成
2020/06/19 Python
python使用opencv resize图像不进行插值的操作
2020/07/05 Python
Python如何读写字节数据
2020/08/05 Python
python如何利用Mitmproxy抓包
2020/10/10 Python
html5 figure和figcaption的使用方法
2018/09/10 HTML / CSS
线程同步的方法
2016/11/23 面试题
医学专业五年以上个人求职信
2013/12/03 职场文书
中学门卫岗位职责
2013/12/26 职场文书
先进事迹报告会主持词
2014/04/02 职场文书
公司活动总结怎么写
2014/06/25 职场文书
小区门卫的岗位职责
2014/09/26 职场文书
给客户的感谢信
2015/01/21 职场文书