html5之data-属性

这是我第一次发现data-这个属性，记录下来也算是工作中的积累（不积跬步无以至千里嘛）。  

------------------------------------------------------------------------------------------------------------------------------------------------------

今天在修改代码的时候发现以下代码（代码并不是我写的）：

<a href="#" class="dropdown-toggle"  data-toggle="dropdown"></a>

刚开始我以为这仅仅是标签自定义属性，为了之后的代码使用，但继续调查看到下面的代码后，我觉得没这么简单：

$(this).data('toggle')

疑问1：如果是自定义属性,用jquery的常用该属性的值得访问方式应该是这样：$(this).attr("data-toggle")

疑问2：跟jquery的data()方法有什么关系？

             jquery的data方法是用于向元素存键值对，以及取键对应的值的。例如

            $("div").data("blah", "hello");     // 将blah设置为hello

            $("div").data("blah");                 // hello       去除blah的值

------------------------------------------------------------------------------------------------------------------------------------------------------

经过调查对以上问题进行一一回答：

回答1：摆渡上搜索了一下，大致了解到时html5的东西，所以继续到w3school查看。

      w3school网站（http://www.w3school.com.cn）上对html5的属性列表中有这么一项

属性	值	描述
data-yourvalue	value	创作者定义的属性。 HTML 文档的创作者可以定义他们自己的属性。 必须以 "data-" 开头。

      所以明白了以下内容：

       ①html5才有的属性，也就意味着如果在非html5场合中使用，那就完全是一个自定义属性了。

       ②因为本身也是自定义属性，所以用$(this).attr("data-toggle")的方式取值是完全没问题的。

       ③必须以data-   开头

回答2：在html5的环境下，有两种访问data的方式，

还是以最初的例子<a id="testA"  href="#" class="dropdown-toggle"  data-toggle="dropdown" data-role-name="arolename"></a>作为说明，我们新添加一个data-属性（data-role-name）

       ①：不采用html5，采用dataset的方式。

       应用了data-属性的元素含有dataset的属性，可以直接访问dataset的各项，如下：

         var testA =  document.getElementById("testA");

         alert(testA.dataset.toggle);     //dropdown

          细心的话会发现访问data-属性时并没有加上前缀，如上例访问的是toggle而不是data-toggle，这就是规则1。

         规则1：data-属性访问时不能带前缀；

         再把第二个data-属性也alert出来  ：alert(testA.dataset.roleName);     //arolename 

         会发现data-后面明明是”role-name“怎么变成了roleName，这就是规则2。

         规则2：访问data-属性时，其后面的用-分割的字符要采用驼峰的写法。

          ②：用jquery调用data-属性的方式。

          jquery的data方法能完美的支持data-属性，但同样要使用上面两个规则，如：

          $("#testA").data("toggle");             //dropdown     

          $("#testA").data("roleName");      // arolename 

------------------------------------------------------------------------------------------------------------------------------------------------------

以上问题回答完了，因为查询了资料还学习到其他东西，所以做个额外补充：

<a id="testA"  href="#" class="dropdown-toggle"  data-toggle="dropdown"data-role-name="arolename"></a>

data-属性的增删改

var testA =  document.getElementById("testA");

①data-属性的删除       delete   testA.dataset.toggle;

②data-属性的增加       testA.dataset.newAdd = "123";

③data-属性的修改       testA.dataset.roleName= "brolename";

浏览器支持情况：

• Internet Explorer 11+
• Chrome 8+
• Firefox 6.0+
• Opera 11.10+
• Safari 6+