使用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计算用户打开网页的停留时间
Jan 09 Javascript
七个很有意思的PHP函数
May 12 Javascript
jQuery类选择器用法实例
Dec 23 Javascript
jQuery中:nth-child选择器用法实例
Dec 31 Javascript
浅谈EasyUI中编辑treegrid的方法
Mar 01 Javascript
JavaScript中的acos()方法使用详解
Jun 14 Javascript
浅谈js键盘事件全面控制
Dec 01 Javascript
jQuery基于正则表达式的表单验证功能示例
Jan 21 Javascript
jQuery Validate表单验证插件实现代码
Jun 08 jQuery
基于zepto.js实现登录界面
Oct 09 Javascript
JavaScript的Object.defineProperty详解
Jul 09 Javascript
Vue+Element-UI实现上传图片并压缩
Nov 26 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
基于curl数据采集之正则处理函数get_matches的使用
2013/04/28 PHP
PHP中的函数-- foreach()的用法详解
2013/06/24 PHP
ThinkPHP3.2框架使用addAll()批量插入数据的方法
2017/03/16 PHP
启用OPCache提高PHP程序性能的方法
2019/03/21 PHP
laravel实现一个上传图片的接口,并建立软链接,访问图片的方法
2019/10/12 PHP
鼠标滚轴控制文本框值的JS代码
2013/11/19 Javascript
js实现带圆角的多级下拉菜单效果
2015/08/28 Javascript
深入浅析同源策略和跨域访问
2015/11/26 Javascript
jQuery添加和删除指定标签的方法
2015/12/16 Javascript
浏览器兼容的JS写法总结
2016/04/27 Javascript
json与jsonp知识小结(推荐)
2016/08/16 Javascript
js操作浏览器的参数方法
2017/01/21 Javascript
详解vuex 渐进式教程实例代码
2018/11/27 Javascript
jquery获取input输入框中的值
2019/11/13 jQuery
python生成器generator用法实例分析
2015/06/04 Python
利用Python画ROC曲线和AUC值计算
2016/09/19 Python
基于Linux系统中python matplotlib画图的中文显示问题的解决方法
2017/06/15 Python
Python中的错误和异常处理简单操作示例【try-except用法】
2017/07/25 Python
Python中作用域的深入讲解
2018/12/10 Python
Pycharm+Scrapy安装并且初始化项目的方法
2019/01/15 Python
Python实现鼠标自动在屏幕上随机移动功能
2020/03/14 Python
Windows下Anaconda和PyCharm的安装与使用详解
2020/04/23 Python
详解java调用python的几种用法(看这篇就够了)
2020/12/10 Python
美国领先的奢侈美容零售商:Bluemercury
2017/07/26 全球购物
以实惠的价格轻松租车,免费取消:Easyrentcars
2019/07/16 全球购物
怎样声明接口
2014/09/19 面试题
仓库管理制度
2014/01/21 职场文书
优秀班集体获奖感言
2014/02/03 职场文书
运动会稿件50字
2014/02/17 职场文书
店面销售职位的职责
2014/03/09 职场文书
租赁意向书范本
2014/04/01 职场文书
师德师风个人总结
2015/02/06 职场文书
学校教学工作总结2015
2015/05/19 职场文书
大学组织委员竞选稿
2015/11/21 职场文书
导游词之大雁塔景区
2019/09/17 职场文书
python playwright 自动等待和断言详解
2021/11/27 Python