菜鸟篇--html5自定义属性data-*

楼主 spiderman 于 2014-04-02 18:12:47
菜鸟篇--html5自定义属性data-*
[P]偶然发现html5中自定义属性data-*所以小研究了一下。
 在html5中可以给标签自定义一个属性，例如data-name,通过jquery中的$.data("name")可以获取具有data-name属性的标签中的data-name属性值。
 也可以使用jquery设置某个标签的data-*属性以及属性值。
 下面用例子解释一下：[/P][P]
[/P][P]<!DOCTYPE HTML>
[CODE]<html lang="en-US">
<head>
       <meta charset="UTF-8">
       <title>html5中data属性</title>
       <script src="jquery-1.7.1.min.js"></script>
       <script>
       $(function(){
   $("li").each(function(v){//循环每一个li，在控制台输出当前li的data-name属性值
      console.log($(this).data("name"));
   })
       });
       </script>
       <style>
       </style>
</head>
<body>
       <ul>
               <li id="test" data-name="1">li_1</li>
               <li data-name="2">li_2</li>
               <li data-name="3">li_3</li>
               <li data-name="4">li_4</li>
               <li data-name="5">li_5</li>
       </ul>
</body>
</html>[/CODE][/P][P]
[/P][P]输出结果为：1
 2
 3
 4
 5[/P][P]
[/P][P]
[CODE]<!DOCTYPE HTML>
<html lang="en-US">
<head>
       <meta charset="UTF-8">
       <title>html5中data属性</title>
       <script src="jquery-1.7.1.min.js"></script>
       <script>
       $(function(){
               $("#test").data("name","测试1");//设置元素$("#test")的data-name属性值为"测试1"
               console.log($("#test").data("name"))
       });
       </script>
       <style>
       </style>
</head>
<body>
       <ul>
               <li id="test" data-name="1">li_1</li>
               <li data-name="2">li_2</li>
               <li data-name="3">li_3</li>
               <li data-name="4">li_4</li>
               <li data-name="5">li_5</li>
       </ul>
</body>
</html>[/CODE][/P][P]
[/P][P]删除某个标签的data-*属性使用$("").removeData("name");[/P]
回复
1 　

电脑版 Page created in 0.0469 seconds with 3 queries.