使用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实例教程(19) 使用HoTMetal(2)
Dec 23 Javascript
JavaScript 使用技巧精萃(.net html
Apr 25 Javascript
javascript jq 弹出层实例
Aug 25 Javascript
jquery实现简单易懂的图片展示小例子
Nov 21 Javascript
php和js对数据库图片进行等比缩放示例
Apr 28 Javascript
深入理解javascript中的立即执行函数(function(){…})()
Jun 12 Javascript
jQuery中outerHeight()方法用法实例
Jan 19 Javascript
js支持键盘控制的左右切换立体式图片轮播效果代码分享
Aug 26 Javascript
JavaScript焦点事件、鼠标事件和滚轮事件使用详解
Jan 15 Javascript
快速搭建vue2.0+boostrap项目的方法
Apr 09 Javascript
bootstrap 路径导航 分页 进度条的实例代码
Aug 06 Javascript
在vue项目中使用codemirror插件实现代码编辑器功能
Aug 27 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 session 预定义数组
2009/03/16 PHP
codeigniter使用技巧批量插入数据实例方法分享
2013/12/31 PHP
ThinkPHP结合AjaxFileUploader实现无刷新文件上传的方法
2014/10/29 PHP
PHP下载文件的函数实例代码
2016/05/18 PHP
再谈Yii Framework框架中的事件event原理与应用
2020/04/07 PHP
Gambit vs ForZe BO3 第一场 2.13
2021/03/10 DOTA
jQuery 点击图片跳转上一张或下一张功能的实现代码
2010/03/12 Javascript
javascript字母大小写转换的4个函数详解
2014/05/09 Javascript
jQuery插件EasyUI校验规则 validatebox验证框
2015/11/29 Javascript
js实现常用排序算法
2016/08/09 Javascript
jQuery表单事件实例代码分享
2016/08/18 Javascript
Vuejs第七篇之Vuejs过渡动画案例全面解析
2016/09/05 Javascript
ES6新特性之Symbol类型用法分析
2017/03/31 Javascript
Koa2微信公众号开发之消息管理
2018/05/16 Javascript
vue-router的HTML5 History 模式设置
2018/09/08 Javascript
NodeJs实现简单的爬虫功能案例分析
2018/12/05 NodeJs
vue读取本地的excel文件并显示在网页上方法示例
2019/05/29 Javascript
vue3.0实现插件封装
2020/12/14 Vue.js
js面向对象方式实现拖拽效果
2021/03/03 Javascript
利用Python爬取可用的代理IP
2016/08/18 Python
Python爬取附近餐馆信息代码示例
2017/12/09 Python
Windows平台Python编程必会模块之pywin32介绍
2019/10/01 Python
Python 列表的清空方式
2020/01/13 Python
jupyter notebook 的工作空间设置操作
2020/04/20 Python
Python中的全局变量如何理解
2020/06/04 Python
css3编写浏览器背景渐变背景色的方法
2018/03/05 HTML / CSS
FitFlop澳大利亚官网:英国符合人体工学的鞋类品牌
2017/06/05 全球购物
澳大利亚在线划船、露营和钓鱼商店:BCF Australia
2020/03/22 全球购物
副总经理工作职责
2013/11/28 职场文书
肯尼迪就职演说稿
2013/12/31 职场文书
网站客服岗位职责
2014/04/05 职场文书
营销部内勤岗位职责
2014/04/30 职场文书
2016大学生暑期三下乡心得体会
2016/01/23 职场文书
房屋买卖定金协议书
2016/03/21 职场文书
详解gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)
2021/11/27 Vue.js
前端实现滑动按钮AJAX与后端交互的示例代码
2022/02/24 Javascript