使用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 相关文章推荐
Firefox中autocomplete=&quot;off&quot; 设置不起作用Bug的解决方法
Mar 25 Javascript
Javascript模块化编程(三)require.js的用法及功能介绍
Jan 17 Javascript
js 使FORM表单的所有元素不可编辑的示例代码
Oct 17 Javascript
JavaScript设计模式之外观模式实例
Oct 10 Javascript
Javascript实现单张图片浏览
Dec 18 Javascript
jQuery滚动条插件nanoscroller使用指南
Apr 21 Javascript
js简单倒计时实现代码
Apr 30 Javascript
返回函数的JavaScript函数
Jun 14 Javascript
详解vue2.0组件通信各种情况总结与实例分析
Mar 22 Javascript
Vuejs实现购物车功能
Nov 05 Javascript
javascript数组去重方法总结(推荐)
Mar 20 Javascript
小程序中的箭头函数的具体使用
Jun 19 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
Laravel 5框架学习之Laravel入门和新建项目
2015/04/07 PHP
修改Laravel5.3中的路由文件与路径
2016/08/10 PHP
js模拟点击事件实现代码
2012/11/06 Javascript
JavaScript中的继承之类继承
2016/05/01 Javascript
基于JS实现省市联动效果代码分享
2016/06/06 Javascript
require简单实现单页应用程序(SPA)
2016/07/12 Javascript
jQuery设置聚焦并使光标位置在文字最后的实现方法
2016/08/02 Javascript
JS仿京东移动端手指拨动切换轮播图效果
2020/04/10 Javascript
JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome
2017/01/05 Javascript
动态加载JavaScript文件的3种方式
2018/05/05 Javascript
微信小程序实现天气预报功能
2018/07/18 Javascript
Angular2中监听数据更新的方法
2018/08/31 Javascript
详解JS浏览器事件循环机制
2019/03/27 Javascript
详解ES6 Promise的生命周期和创建
2019/08/18 Javascript
将RGB值转换为灰度值的简单算法
2019/10/09 Javascript
js实现倒计时秒杀效果
2020/03/25 Javascript
深入解读VUE中的异步渲染的实现
2020/06/19 Javascript
Vue 禁用浏览器的前进后退操作
2020/09/04 Javascript
js实现拖拽与碰撞检测
2020/09/18 Javascript
如何手写简易的 Vue Router
2020/10/10 Javascript
Python实现统计给定字符串中重复模式最高子串功能示例
2018/05/16 Python
python文本数据处理学习笔记详解
2019/06/17 Python
Django中create和save方法的不同
2019/08/13 Python
python 画3维轨迹图并进行比较的实例
2019/12/06 Python
pyspark给dataframe增加新的一列的实现示例
2020/04/24 Python
python属于跨平台语言码
2020/06/09 Python
详解解决jupyter不能使用pytorch的问题
2021/02/18 Python
荷兰街头时尚之家:Funkie House
2019/03/18 全球购物
2014新生大学四年计划书
2014/09/21 职场文书
党员教师个人对照检查材料范文
2014/09/25 职场文书
幼儿园感恩节活动方案
2014/10/06 职场文书
购房协议书范本(无房产证)
2014/10/07 职场文书
2016年圣诞节义工活动总结
2016/04/01 职场文书
纪念建国70周年演讲稿
2019/07/19 职场文书
教你用Python+selenium搭建自动化测试环境
2021/06/18 Python
nginx容器方式反向代理实战
2022/04/18 Servers