使用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 个人笔记(没有整理,很乱)
Jul 07 Javascript
网络之美 JavaScript中Get和Set访问器的实现代码
Sep 19 Javascript
jQuery 插件开发指南
Nov 14 Javascript
AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录
Jan 02 Javascript
DOM基础教程之使用DOM
Jan 19 Javascript
使用HTML5+Boostrap打造简单的音乐播放器
Aug 05 Javascript
通过JS获取Request.QueryString()参数的值实现方法
Sep 27 Javascript
JS中append字符串包含onclick无效传递参数失败的解决方案
Dec 26 Javascript
微信小程序 弹框和模态框实现代码
Mar 10 Javascript
实例解析Vue.js下载方式及基本概念
May 11 Javascript
一次微信小程序内地图的使用实战记录
Sep 09 Javascript
js实现类选择器和name属性选择器的示例步骤
Feb 07 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
2.PHP入门
2006/10/09 PHP
一个SQL管理员的web接口
2006/10/09 PHP
php调用MySQL存储过程的方法集合(推荐)
2013/07/03 PHP
Eclipse的PHP插件PHPEclipse安装和使用
2014/07/20 PHP
php异常处理方法实例汇总
2015/06/24 PHP
PHP实现的超长文本分页显示功能示例
2018/06/04 PHP
PHP字符串和十六进制如何实现互相转换
2020/07/16 PHP
脚本吧 - 幻宇工作室用到js,超强推荐expand.js
2006/12/23 Javascript
javascript编程起步(第一课)
2007/01/10 Javascript
jquery 注意事项与常用语法小结
2010/06/07 Javascript
JavaScript中的Truthy和Falsy介绍
2015/01/01 Javascript
AngularJS的内置过滤器详解
2015/05/14 Javascript
Javascript对象Clone实例分析
2015/06/09 Javascript
聊一聊jQuery插件uploadify使用方法
2016/08/24 Javascript
VueJs与ReactJS和AngularJS的异同点
2016/12/12 Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
2017/03/06 Javascript
详解react关于事件绑定this的四种方式
2018/03/09 Javascript
使用原生JS实现火锅点餐小程序(面向对象思想)
2019/12/10 Javascript
ssh批量登录并执行命令的python实现代码
2012/05/25 Python
python每次处理固定个数的字符的方法总结
2013/01/29 Python
Python群发邮件实例代码
2014/01/03 Python
粗略分析Python中的内存泄漏
2015/04/23 Python
python爬虫入门教程--利用requests构建知乎API(三)
2017/05/25 Python
用pandas按列合并两个文件的实例
2018/04/12 Python
Python minidom模块用法示例【DOM写入和解析XML】
2019/03/25 Python
pyqt5利用pyqtDesigner实现登录界面
2019/03/28 Python
预订奥兰多和佛罗里达州公园门票:FloridaTix
2018/01/03 全球购物
美国基督教约会网站:ChristianCafe.com
2020/02/04 全球购物
MediaMarkt比利时:欧洲最大电器连锁店
2020/12/21 全球购物
体育专业个人求职信范文
2013/12/27 职场文书
演讲稿怎么写
2014/01/07 职场文书
产品委托授权书范本
2014/09/16 职场文书
如何判断微信付款码和支付宝付款码
2021/04/01 PHP
直播实况, OMG破敌三路五十分钟大战神技局摩托车
2022/04/01 DOTA
win11无法登录onedrive错误代码0x8004def7怎么办 ?
2022/04/05 数码科技
Java 多态分析
2022/04/26 Java/Android