使用jQuery获取data-的自定义属性

 更新时间:2015年11月10日 11:50:51   投稿:hebedich  
本文给大家分享的是使用jQuery制作的组件,实现获取data-自定义属性,并附上使用方法,非常的实用,有需要的小伙伴可以参考下

废话少说,先上代码

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

相关文章

  • jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】

    jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】

    这篇文章主要介绍了jQuery插件FusionCharts绘制的3D环饼图效果,结合完整实例形式分析了jQuery使用FusionCharts载入xml格式数据绘制图形的操作步骤与相关实现技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下
    2017-04-04
  • jQuery学习笔记之jQuery的事件

    jQuery学习笔记之jQuery的事件

    事件总是由内层开始执行,一直到最外层,不单击了那个对象,所有包含了此对象的对象所绑定的事件都将执行一次,这是我们不愿意看到的,jQuery给我们定义了一些阻止事件执行的方法。
    2010-12-12
  • 详解jquery事件delegate()的使用方法

    详解jquery事件delegate()的使用方法

    这篇文章主要详解了jquery事件delegate()的使用方法,delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数,感兴趣的小伙伴们可以参考一下
    2016-01-01
  • jquery事件重复绑定的快速解决方法

    jquery事件重复绑定的快速解决方法

    本篇文章主要是对jquery事件重复绑定的快速解决方法进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01
  • jquery zTree异步加载、模糊搜索简单实例分享

    jquery zTree异步加载、模糊搜索简单实例分享

    这篇文章主要为大家详细介绍了jquery zTree异步加载、模糊搜索简单实例,感兴趣的小伙伴们可以参考一下
    2016-03-03
  • JQuery中基础过滤选择器用法实例分析

    JQuery中基础过滤选择器用法实例分析

    这篇文章主要介绍了JQuery中基础过滤选择器用法,涉及jQuery属性选择及样式操作的相关技巧,需要的朋友可以参考下
    2015-05-05
  • jQuery实现获取当前鼠标位置并输出功能示例

    jQuery实现获取当前鼠标位置并输出功能示例

    这篇文章主要介绍了jQuery实现获取当前鼠标位置并输出功能,涉及jQuery事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
    2019-01-01
  • JQuery实现表格数据行上移与下移

    JQuery实现表格数据行上移与下移

    这篇文章主要为大家详细介绍了JQuery实现表格数据行上移与下移,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-02-02
  • jQuery版Tab标签切换

    jQuery版Tab标签切换

    网上常见的应用,用jQuery实现起来比较简单,只有几行代码。
    2011-03-03
  • jQuery前端开发35个小技巧

    jQuery前端开发35个小技巧

    这篇文章主要介绍了jQuery前端开发35个小技巧的相关资料,非常实用,需要的朋友可以参考下
    2016-05-05

最新评论