使用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 相关文章推荐
WordPress 插件——CoolCode使用方法与下载
Jul 02 Javascript
IE7中javascript操作CheckBox的checked=true不打勾的解决方法
Dec 07 Javascript
Vuejs第十一篇组件之slot内容分发实例详解
Sep 09 Javascript
利用transition实现文字上下抖动的效果
Jan 21 Javascript
微信小程序商城项目之侧栏分类效果(1)
Apr 17 Javascript
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
May 30 Javascript
JS仿淘宝搜索框用户输入事件的实现
Jun 19 Javascript
vue2.0全局组件之pdf详解
Jun 26 Javascript
vue.js给动态绑定的radio列表做批量编辑的方法
Feb 28 Javascript
深入浅析Vue中的slots/scoped slots
Apr 03 Javascript
VUE在for循环里面根据内容值动态的加入class值的方法
Aug 12 Javascript
jquery实现两个div中的元素相互拖动的方法分析
Apr 05 jQuery
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
外媒评选出10支2020年最受欢迎的Dota2战队
2021/03/05 DOTA
phpmyadmin 访问被拒绝的真实原因
2009/06/15 PHP
探讨如何使用SimpleXML函数来加载和解析XML文档
2013/06/07 PHP
PHP实现将标点符号正则替换为空格的方法
2017/08/09 PHP
php面试实现反射注入的详细方法
2019/09/30 PHP
遨游,飞飞,IE,空中网 浏览器无提示关闭方法
2011/07/11 Javascript
JavaScript面向对象设计二 构造函数模式
2011/12/20 Javascript
修改js Calendar日历控件 兼容IE9/谷歌/火狐
2013/01/04 Javascript
JavaScript实现N皇后问题算法谜题解答
2014/12/29 Javascript
javascript HTML5文件上传FileReader API
2020/03/27 Javascript
laydate日历控件使用方法详解
2017/11/20 Javascript
Vue代码分割懒加载的实现方法
2017/11/23 Javascript
Node.js Express安装与使用教程
2018/05/11 Javascript
vue组件name的作用小结
2018/05/23 Javascript
JavaScript事件冒泡与事件捕获实例分析
2018/08/01 Javascript
vue滚动插件better-scroll使用详解
2019/10/18 Javascript
jQuery实现鼠标拖拽登录框移动效果
2020/09/13 jQuery
python读写文件操作示例程序
2013/12/02 Python
web.py中调用文件夹内模板的方法
2014/08/26 Python
matplotlib中legend位置调整解析
2017/12/19 Python
Python+OpenCV实现车牌字符分割和识别
2018/03/31 Python
python实现指定字符串补全空格、前面填充0的方法
2018/11/16 Python
python数据挖掘需要学的内容
2019/06/23 Python
Python 循环终止语句的三种方法小结
2019/06/24 Python
Python对接六大主流数据库(只需三步)
2019/07/31 Python
python 利用matplotlib在3D空间中绘制平面的案例
2021/02/06 Python
纯CSS3制作的鼠标悬停时边框旋转
2017/01/03 HTML / CSS
通过css3的filter滤镜改变png图片的颜色的示例代码
2020/05/06 HTML / CSS
HTML5 Canvas中使用用路径描画圆弧
2015/01/01 HTML / CSS
英国折扣零售连锁店:QD Stores
2018/12/08 全球购物
Levi’s西班牙官方网站:李维斯,著名的牛仔裤品牌
2020/08/20 全球购物
年度考核评语
2014/01/19 职场文书
酒店个人求职信范文
2014/01/25 职场文书
2019年中学生的思想品德评语集锦
2019/12/19 职场文书
分享15个Webpack实用的插件!!!
2021/03/31 Javascript
python 破解加密zip文件的密码
2021/04/22 Python