使用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 相关文章推荐
JS实现图片翻书效果示例代码
Sep 09 Javascript
JavaScript获取table中某一列的值的方法
May 06 Javascript
jquery中each方法示例和常用选择器
Jul 08 Javascript
jquery获取复选框checkbox的值的简单实现方法
May 26 Javascript
javascript实现消灭星星小游戏简单版
Nov 15 Javascript
微信小程序tabBar底部导航中文注解api详解
Aug 16 Javascript
详解从新建vue项目到引入组件Element的方法
Aug 29 Javascript
vue.js将时间戳转化为日期格式的实现代码
Jun 05 Javascript
微信小程序实现即时通信聊天功能的实例代码
Aug 17 Javascript
vue-cli 3.x 修改dist路径的方法
Sep 19 Javascript
Layui Table js 模拟选中checkbox的例子
Sep 03 Javascript
微信小程序自定义yPicker组件实现省市区三级联动功能
Oct 29 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检测图片主要颜色的方法
2015/07/01 PHP
浅析ThinkPHP缓存之快速缓存(F方法)和动态缓存(S方法)(日常整理)
2015/10/26 PHP
php实现中文转数字
2016/02/18 PHP
PHP设计模式之工厂模式详解
2017/10/24 PHP
一个加载js文件的小脚本
2007/06/28 Javascript
javascript下操作css的float属性的特殊写法
2007/08/22 Javascript
js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色
2010/05/27 Javascript
jquery下onpropertychange事件的绑定方法
2010/08/01 Javascript
使用jquery mobile做幻灯播放效果实现步骤
2013/01/04 Javascript
jquery 通过name快速取值示例
2014/01/24 Javascript
javascript生成img标签的3种实现方法(对象、方法、html)
2015/12/25 Javascript
JS清除字符串中重复值的实现方法
2016/08/03 Javascript
实例分析浏览器中“JavaScript解析器”的工作原理
2016/12/12 Javascript
微信小程序 实战程序简易新闻的制作
2017/01/09 Javascript
EasyUI为Numberbox添加blur事件的方法
2017/03/05 Javascript
JavaScript同源策略和跨域访问实例详解
2018/04/03 Javascript
jQuery实现的简单拖拽功能示例【测试可用】
2018/08/14 jQuery
解决vuejs 使用value in list 循环遍历数组出现警告的问题
2018/09/26 Javascript
JavaScript函数Call、Apply原理实例解析
2020/02/17 Javascript
vue 出现data-v-xxx的原因及解决
2020/08/04 Javascript
vue修改Element的el-table样式的4种方法
2020/09/17 Javascript
js面向对象方式实现拖拽效果
2021/03/03 Javascript
[03:34]2014DOTA2西雅图国际邀请赛 淘汰赛7月15日TOPPLAY
2014/07/15 DOTA
Python实现上下班抢个顺风单脚本
2018/02/07 Python
解决pycharm的Python console不能调试当前程序的问题
2019/01/20 Python
Python语法分析之字符串格式化
2019/06/13 Python
python conda操作方法
2019/09/11 Python
Python爬虫图片懒加载技术 selenium和PhantomJS解析
2019/09/18 Python
python3通过udp实现组播数据的发送和接收操作
2020/05/05 Python
CSS3 透明色 RGBA使用介绍
2013/08/06 HTML / CSS
澳大利亚家具和家居用品在线商店:Interiors Online
2018/03/05 全球购物
数学专业推荐信范文
2013/11/21 职场文书
党支部承诺书范文
2014/03/28 职场文书
保护环境建议书100字
2014/05/13 职场文书
四则混合运算教学反思
2016/02/23 职场文书
SpringBoot深入分析讲解监听器模式下
2022/07/15 Java/Android