使用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
赞 (0)

相关推荐

  • jquery 获取自定义属性(attr和prop)的实现代码

    jquery 获取自定义属性(attr和prop)的实现代码

    1. attr(属性名) //获取属性的值(取得第一个匹配元素的属性值.通过这个方法可以方便地从第一个匹配元素中获取一个属性的值.如果元素没有相应属性,则返回 undefined ) 2. attr(属性名, 属性值) //设置属性的值 (为所有匹配的元素设置一个属性值.) 3. attr(属性名,函数值) //设置属性的函数值 (为所有匹配的元素设置一个计算的属性值.不提供值,而是提供一个函数,由这个函数计算的值作为属性值.) 4.attr(properties) //给指定元素设置多个属性值

  • JQuery中根据属性或属性值获得元素(6种情况获取方法)

    根据属性获得元素 1.比如要获取页面p标签中属性有id的元素 复制代码 代码如下: $("p[id]").css("color","red"); 根据属性值获得元素 1.$.在jQuery 中$("<span>"),这个语法等同于$(document.createElement("span")) ,这是一种用法,在选择元素的时候还会这样子的用:[attribute$=value],匹配给定的属性

  • jQuery获取选中内容及设置元素属性的方法

    获取选中select : $("#id option:selected").val(); 自定义radio: $("input[name=sex][value="+data.sex+"]").attr("checked",true); 获取radio: $("input[name='sex']:checked").val() 设置input不能编辑: $("#cashNum").attr

  • jquery遍历标签中自定义的属性方法

    在开发中我们有时会对html标签添加属性,如何遍历处理? <ul> <li name="li1" sortid="nav_1">aaaaaaa</li> <li name="li1" sortid="nav_2">bbbbbbb</li> <li name="li1" sortid="nav_3">cccccccc&

  • jQuery 获取页面li数组并删除不在数组中的key

    先给大家说下应用场景: 获取页面 li 下面 key的值,添加到 arr数组 删除车型不在arr 数组中的value值. 示例代码: var getSaleModels = function(brand_id){ if(brand_id){ var li = $(".pinpai-chexing"+brand_id+" li"); var arr = new Array(); if (li.length > 0){ li.each(function(index

  • jQuery中data()方法用法实例

    本文实例讲述了jQuery中data()方法用法.分享给大家供大家参考.具体分析如下: 此方法可以向匹配元素附加数据,或者从匹配元素获取数据. 语法结构一: 复制代码 代码如下: $(selector).data(name,value) 参数列表: 参数 描述 name 存储的数据名称. value 将要存储的任意数据. 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-

  • JQuery 获取多个select标签option的text内容(实例)

    根据option的id属性,修改text值 $("#sel_div .select_class option[id='-选择省-']").text(data.province).attr("selected",true); $("#sel_div .select_class option[id='-选择市-']").text( data.city).attr("selected",true); $("#sel_div

  • jquery获取复选框checkbox的值的简单实现方法

    jQuery API : each(callback) :以每一个匹配的元素作为上下文来执行一个函数. :checked :匹配所有选中的被选中元素(复选框.单选框等,不包括select中的option) js: //js获取复选框值 var obj = document.getElementsByName("interest");//选择所有name="interest"的对象,返回数组 var s='';//如果这样定义var s;变量s中会默认被赋个null值

  • js 点击a标签 获取a的自定义属性方法

    今天项目上遇到一个问题,需要在点击a标签时,将完整的内容显示出来 原先是想用jquery的click方法 <a ownattr="--" onClick="showDetail(this)">哈哈</a> 在jquery的click方法中将this的ownattr属性赋值给完整内容的div标签 然而这却一直行不通 一阵研究后发现,原来项目框架是用jquery ajax获取后台列表信息的,页面在执行到click方法时,ajax还没完成 随后决定

  • 当自定义数据属性为json格式字符串时jQuery的data api问题探讨

    jQuery 的 data API 实现方式有缓存数据的效果 使用 IE 7 (IE8+ 在控制台切换至IE7 模式),当DOM 节点有自定义数据属性时,检查 DOM 节点即可看到 形如 jQuery18305664906559272507 的属性,这便是 用于从数据存储对象中获取自定义数据的建. 当自定义数据属性是一个 json 格式字符串时,缓存的数据如果被修改, 则修改后的数据继续存在于缓存系统中, 如果不留意,这可能导致一些BUG 复制代码 代码如下: <!DOCTYPE HTML>

  • jquery获取多个checkbox的值异步提交给php的方法

    本文实例讲述了jquery获取多个checkbox的值异步提交给php的方法.分享给大家供大家参考.具体实现方法如下: html代码: <tr> <td><input type="checkbox" name="uid" value="<?=$item['mtaccount_id']?>"></td> <td><?=$item['mtaccount_id']?>&

  • jQuery获取剪贴板内容的方法

    本文实例讲述了jQuery获取剪贴板内容的方法.分享给大家供大家参考,具体如下: 这两天弄fckeditor粘贴功能,随着工作的深入和在网上查询资料,知道了在网页中一般是不允许访问"剪贴板"的,因为这样存在着很大的安全隐患,我自己也尝试着写了一个简单的demo 在IE和FF中剪贴板的访问是可控的,但是在Opera.Chrome.Safari浏览器中是不允许访问的,这样就产生了浏览器兼容的问题,怎么样才能让其他的浏览器兼容这个功能呢,在网上查找了一些资料--"使用flash去访

  • jQuery 获取多选框的值及多选框中文的函数

     DOM结构 我的多选框的dom结构,都是下面这种的.都是基础知识,不做过多阐述. <label class="input_checkbox"> <input type="checkbox" name="sell_area" vlaue="0"> <span>甘肃</span> </label> <label class="input_checkbox

  • jQuery 获取跨域XML(RSS)数据的相关总结分析

    前段时间项目,需要前端JS获取跨域XML(RSS),最先打算使用jQuery.ajax方法获取,但是在ie9以下,提示"拒绝访问的" 略尴尬,网上查找了相关资料总结了以下几种方法: 一.google的jGFeed:相信很多同学对这个应该不陌生,使用也相对简单: 源码: (function($){ $.extend({ jGFeed : function(url, fnk, num, key){ // Make sure url to get is defined if(url == n

随机推荐