demo：

<!DOCTYPE HTML>

<html>

<head>

<title></title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta http-equiv="pragma" content="no-cache" />

<meta http-equiv="cache-control" content="no-cache" />

<meta http-equiv="expires" content="0" />

<script src="<%=path%>/js/jquery/jquery-1.8.3.min.js"> </script>

</head>

<body>

    <div id="divDom" data-name="userName" data-age="26" data-address="北京市">data-test</div>

</body>

<script type="text/javascript">

    $(function(){//$(element).data(keyName),jquery也提供了兼容方法。

        var divDom = document.getElementById('divDom'),dataSet = get_dataset(divDom);

        console.info("name:"+dataSet.name);

        console.info("age:"+dataSet["age"]);

    });

    //带兼容的函数

    function get_dataset(ele){

        if(ele.dataset)

            return ele.dataset;

        else{

        //以下是兼容代码

            var dataset = {};

            var ele_split = ele.outerHTML.split(" ");

            for(var i = 0,element; i < ele_split.length; i++)

            {

                element = ele_split[i];

                if (element.substring(0,4) == "data") {

                    if (element.indexOf(">") !=  -1) {

                        element = element.split(">")[0];

                    };

                    ele_key=element.split("=")[0].slice(5);

                    ele_value=element.split("=")[1].slice(1,-1);

                    if(ele_key.indexOf("-") ==  -1){

                        dataset[ele_key] = ele_value;

                    }else{

                        ele_keys=ele_key.split("-");

                        ele_key=ele_keys[0];

                        for(i=1;i<ele_keys.length;i++){

                            ele_key+=replaceReg(ele_keys[i]);

                        }

                    }

                };

            }

            return dataset;

        }  

    }

    //正则表达式变换首字母大写

    function replaceReg(str){

        var reg = /\b(\w)|\s(\w)/g;

        str = str.toLowerCase();

        return str.replace(reg,function(m){return m.toUpperCase()})

   }

</script>

</html>

html5 data-*自定义属性取值的更多相关文章

  1. HTML5常见的取值与单位

    HTML5常见的取值与单位     长度单位包括 相对长度单位包括:em, ex, ch, rem, vw, vh, vmax, vmin 绝对长度单位包括:cm, mm, q, in, pt, pc ...

  2. jquery data方法取值与js attr取值的区别

    <a data-v="3"></a> jquery data方法的运行机制: 第一次查找dom,使用attributes获取到dom节点值,并将其值存到缓存 ...

  3. JQuery 自定义属性取值 赋值

    <span id="status_68" data-id="0" onclick="collection(68,false);" cl ...

  4. html5 自定义标签取值

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. js方法返回多值如何取值demo

    js方法返回,如何取值?下面demo两种方法 new array 和 json 返回值 取值示例. 方法一:  new array <html> <head> <meta ...

  6. CYQ.Data 快速开发之UI（赋值、取值、绑定）原理

    昨夜园子猴子问了几个我CYQ.Data使用的小问题,经过简单解答后,他表示“妈妈再也不用担心我的学习",并于事后以资鼓励,希望这框架越走越好. 除了技术上的交流,双方在生活,S上面的问题上也 ...

  7. Data层相关问题 & JS循环取值

    第一次写博客,里面是自己工作中碰到的问题及总结的知识点,便于自己以后回顾,技术大牛们请直接忽略这篇文章,也希望能帮助到想我这样的小白! Data层相关问题总结: 1. 代码管理用的是 VSS 2005 ...

  8. ul>li中自定义属性后取值的问题

    动态赋值的li: $.ajax({ type: "POST", url: "${base}/before/subDemand/listType", succes ...

  9. ng2中 如何使用自定义属性data-id 以及赋值和取值操作

    项目环境:ng4.x 写法说明: [attr.data-nurseKey] <div [attr.data-nurseKey]="k.nurseKey"></di ...

  10. python re.findall(rule,data),根据左右边界取值url中参数的值

    import re ''' 取值postid,左边界"postid=",右边界"&" ''' url="http://wwww.baidu.c ...

随机推荐

  1. Jmeter学习（三十二）调试工具Debug Sampler（转载）

    转载自 http://www.cnblogs.com/yangxia-test 一.Debug Sampler介绍: 使用Jmeter开发脚本时,难免需要调试,这时可以使用Jmeter的Debug S ...

  2. python基础之字符串常用操作总结

    字符串的索引 s = 'ABCDLSESRF' # 索引 这两个很简单没什么说的 s1 = s[0] print(s1) # A s2 = s[2] print(s2) # C 切片 s = 'ABC ...

  3. leetcode 167 two sum II

    167. Two Sum II - Input array is sorted Given an array of integers that is already sorted in ascendi ...

  4. ORA-01555 snapshot too old

    假设有一张6000万行数据的testdb表,预计testdb全表扫描1次需要2个小时,参考过程如下: 1.在1点钟,用户A发出了select * from testdb;此时不管将来testdb怎么变 ...

  5. 二叉树中和为某一值的路径(python)

    题目描述 输入一颗二叉树的跟节点和一个整数,打印出二叉树中结点值的和为输入整数的所有路径.路径定义为从树的根结点开始往下一直到叶结点所经过的结点形成一条路径.(注意: 在返回值的list中,数组长度大 ...

  6. 侯捷STL课程及源码剖析学习3: 深度探索容器list

    一.容器概览 上图为 GI STL 2.9的各种容器.图中以内缩方式来表达基层与衍生层的关系.所谓的衍生,并非继承(inheritance)关系,而是内含(containment)关系.例如 heap ...

  7. pandas数据处理攻略

    首先熟悉numpy随机n维数组的生成方法(只列出常用的函数): np.random.random([3, 4]) #生成shape为[3, 4]的随机数组,随机数范围[0.0, 1.0) np.ran ...

  8. Unity游戏设计与实现 南梦宫一线程序员的开发实例

    图灵程序设计丛书 Unity游戏设计与实现:南梦宫一线程序员的开发实例(修订版)     加藤政树 (作者) 罗水东 (译者)  c# 游戏 unity   <内容提要>本书的作者是日本知 ...

  9. bootloader新的理解

    1.对于bootloader这样的程序,作为板卡刚开始启动的部分,大致的顺序是一致的,大部分都是分为两个部分,一部分是汇编编写的,一部分是用c语言编写的.一般在汇编部分完成各种初始化的操作,比如关闭看 ...

  10. vue项目微信分享之后路由链接被破坏怎么办

    异常现象: 多页面应用,路由采用hash模式,链接带有"#". 在微信中分享到朋友圈或好友时,分享出去的路由被破坏,打开分享的链接,路由中的“#”会被去掉并追加?fromTimel ...