使用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 相关文章推荐
HTML颜色选择器实现代码
Nov 23 Javascript
jQuery简单tab切换效果实现方法
Apr 08 Javascript
JavaScript中使用concat()方法拼接字符串的教程
Jun 06 Javascript
jQuery+PHP+MySQL二级联动下拉菜单实例讲解
Oct 27 Javascript
AngularJS实现表单手动验证和表单自动验证
Dec 09 Javascript
详解Bootstrap创建表单的三种格式(一)
Jan 04 Javascript
JavaScript必知必会(二) null 和undefined
Jun 08 Javascript
修改jquery中dialog的title属性方法(推荐)
Aug 26 Javascript
如何使用angularJs
May 08 Javascript
jQuery读取本地的json文件(实例讲解)
Oct 31 jQuery
Node使用Sequlize连接Mysql报错:Access denied for user ‘xxx’@‘localhost’
Jan 03 Javascript
详解vue路由篇(动态路由、路由嵌套)
Jan 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
星际争霸, 教主第一视角, ZvT经典龙蛇演义
2020/03/02 星际争霸
php session 预定义数组
2009/03/16 PHP
PHP中register_globals参数为OFF和ON的区别(register_globals 使用详解)
2012/02/05 PHP
php读取文件内容的三种可行方法示例介绍
2014/02/08 PHP
Yii框架中用response保存cookie,用request读取cookie的原理解析
2019/09/04 PHP
PHP http请求超时问题解决方案
2020/11/13 PHP
My Desktop :) 桌面式代码
2008/12/29 Javascript
event.keyCode键码值表 附只能输入特定的字符串代码
2009/05/15 Javascript
在JavaScript中监听IME键盘输入事件
2011/05/29 Javascript
jQuery实现form表单reset按钮重置清空表单功能
2012/12/18 Javascript
使用js 设置url参数
2013/07/08 Javascript
jquery幻灯片插件bxslider样式改进实例
2014/10/15 Javascript
AngularJS延迟加载html template
2016/07/27 Javascript
Angular ng-class详解及实例代码
2016/09/19 Javascript
详解如何在你的Vue项目配置vux
2018/06/04 Javascript
vue2使用keep-alive缓存多层列表页的方法
2018/09/21 Javascript
vue的三种图片引入方式代码实例
2019/11/19 Javascript
Python实现设置windows桌面壁纸代码分享
2015/03/28 Python
python版学生管理系统
2018/01/10 Python
Python绘制3D图形
2018/05/03 Python
Tensorflow实现AlexNet卷积神经网络及运算时间评测
2018/05/24 Python
不到40行代码用Python实现一个简单的推荐系统
2019/05/10 Python
Python在cmd上打印彩色文字实现过程详解
2019/08/07 Python
Python hmac模块使用实例解析
2019/12/24 Python
pycharm sciview的图片另存为操作
2020/06/01 Python
Python如何将字符串转换为日期
2020/07/31 Python
Sasa莎莎海外旗舰店:香港莎莎美妆平台
2018/03/21 全球购物
学校食堂采购员岗位职责
2013/12/05 职场文书
党务公开方案
2014/05/06 职场文书
课外访万家心得体会
2014/09/03 职场文书
购房委托书范本
2014/09/18 职场文书
关于运动会广播稿50字
2014/10/18 职场文书
我们的节日中秋节活动总结
2015/03/23 职场文书
2015年学生会工作总结范文
2015/03/31 职场文书
Java实现二维数组和稀疏数组之间的转换
2021/06/27 Java/Android
vue-cil之axios的二次封装与proxy反向代理使用说明
2022/04/07 Vue.js