zoukankan      html  css  js  c++  java
  • html 5 data-* (dataset) 属性和 jquery data方法比较

    一些文章在介绍html 5 data-* (dataset)属性时,会提到jquery的data方法,认为data方法能够很好的利用html 5的这个特性。但实际上,二者的兼容性是很差的。下面给出一段测试代码:

    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <div id="e" data-v="origin"></div>
    <script>
    var log = function(msg){console.log(msg);};
    var print = function(){
        log("jquery.data    : " + je.data("v"));
        log("native dataset : " + ne.dataset["v"]);
        log("--");
    }
    
    var je = $("#e");
    var ne = document.getElementById("e");
    
    log("origin value");
    print();
    
    log("set with native dataset");
    ne.dataset["v"] = "native";
    print();
    /* reset */ ne.dataset["v"] = "origin";
    
    log("set with jquery data");
    je.data("v", "jquery");
    print();
    /* reset */ je.data("v", "origin");
    </script>

    在console的输出结果如下:

    origin value
    jquery.data    : origin
    native dataset : origin
    --
    set with native dataset
    jquery.data    : origin
    native dataset : native
    --
    set with jquery data
    jquery.data    : jquery
    native dataset : origin
    -- 

    测试的最开始,data()和dataset从html中读取的data-v值是一致的,但是当对值进行修改时,结果就不一样了。另外,通过审查元素可以发现:通过jquery.data方法设置data属性不会修改DOM;而通过dataset方法则会同步修改DOM。或许可以认为,jquery data的实现方式没有遵循html 5标准。

    鉴于这种情况的存在,在一个项目中应该不要混用两种方法。

  • 相关阅读:
    jquery toggle(listenerOdd, listenerEven)
    struts quick start
    hdu 1518 Square (dfs)
    hdu 2544 最短路 (最短路径)
    hdu 1754 I Hate It (线段树)
    hdu 1856 More is better (并查集)
    hdu 1358 Period (KMP)
    hdu 2616 Kill the monster (DFS)
    hdu 2579 Dating with girls(2) (bfs)
    zoj 2110 Tempter of the Bone (dfs)
  • 原文地址:https://www.cnblogs.com/tt-0411/p/3351545.html
Copyright © 2011-2022 走看看