使用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 相关文章推荐
File文件控件,选中文件(图片,flash,视频)即立即预览显示
Apr 09 Javascript
推荐30个新鲜出炉的精美 jQuery 效果
Mar 26 Javascript
解析John Resig Simple JavaScript Inheritance代码
Dec 03 Javascript
以jQuery中$.Deferred对象为例讲解promise对象是如何处理异步问题
Nov 13 Javascript
js编写三级联动简单案例
Dec 21 Javascript
判断滚动条滑到底部触发事件(实例讲解)
Nov 15 Javascript
jQuery NProgress.js加载进度插件的简单使用方法
Jan 31 jQuery
微信小程序单选框自定义赋值
May 26 Javascript
JavaScript缺少insertAfter解决方案
Jul 03 Javascript
vue项目使用$router.go(-1)返回时刷新原来的界面操作
Jul 26 Javascript
解决vue axios跨域 Request Method: OPTIONS问题(预检请求)
Aug 14 Javascript
解决vue-loader加载不上的问题
Oct 21 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
深入分析使用mysql_fetch_object()以对象的形式返回查询结果
2013/06/05 PHP
PHP中的命名空间相关概念浅析
2015/01/22 PHP
PHP redis实现超迷你全文检索
2017/03/04 PHP
单击和双击事件的冲突处理示例代码
2014/04/03 Javascript
jquery实现多屏多图焦点图切换特效的方法
2015/05/04 Javascript
充分发挥Node.js程序性能的一些方法介绍
2015/06/23 Javascript
基于Javascript实现弹出页面效果
2016/01/01 Javascript
网页前端登录js按Enter回车键实现登陆的两种方法
2016/05/10 Javascript
BootStrap中的table实现数据填充与分页应用小结
2016/05/26 Javascript
jQuery插件uploadify实现ajax效果的图片上传
2016/06/18 Javascript
文本框只能输入数字的实现方法(兼容IE火狐)
2016/06/25 Javascript
JavaScript中Form表单技术汇总(推荐)
2016/06/26 Javascript
jQuery删除节点用法示例(remove方法)
2016/09/08 Javascript
js 定位到某个锚点的方法
2016/11/19 Javascript
微信小程序(六):列表上拉加载下拉刷新示例
2017/01/13 Javascript
js遍历json对象所有key及根据动态key获取值的方法(必看)
2017/03/09 Javascript
Vue下的国际化处理方法
2017/12/18 Javascript
JS实现匀速与减速缓慢运动的动画效果封装示例
2018/08/27 Javascript
微信小程序实现自动定位功能
2018/10/31 Javascript
Angular7创建项目、组件、服务以及服务的使用
2019/02/19 Javascript
微信小程序整合使用富文本编辑器的方法详解
2019/04/25 Javascript
Vue实现购物车详情页面的方法
2019/08/20 Javascript
深入理解redux之compose的具体应用
2020/01/12 Javascript
[01:18:31]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第一场 1月10日
2021/03/11 DOTA
python使用urllib模块和pyquery实现阿里巴巴排名查询
2014/01/16 Python
Python的Tornado框架实现图片上传及图片大小修改功能
2016/06/30 Python
Python实现基于二叉树存储结构的堆排序算法示例
2017/12/08 Python
python实现简易版学生成绩管理系统
2020/06/22 Python
Python sublime安装及配置过程详解
2020/06/29 Python
Coach澳大利亚官方网站:美国著名时尚奢侈品牌
2017/05/24 全球购物
毕业生幼师求职自荐信
2013/10/01 职场文书
财务经理岗位职责范本
2015/04/08 职场文书
土木工程生产实习心得体会
2016/01/22 职场文书
MySQL 常见存储引擎的优劣
2021/06/02 MySQL
JavaScript流程控制(循环)
2021/12/06 Javascript
Redis 报错 error:NOAUTH Authentication required
2022/05/15 Redis