jquery操作HTML5 的data-*的用法實例分享_jquery

閱讀HTML5的詳細規範後你會發現，這個自訂data屬性的用法非常的簡單，就是你可以往HTML標籤上新增任意以"data-"開頭的屬性，這些屬性頁面上是不顯示的，它不會影響到你的頁面佈局和風格，但它是可讀可寫的。

jquery 裡已經內建這個方法. 透過$('#content').data('list'); 就能取得資料. 這個方法是在jQuery1.4.3版本後出現的,它能傳回對應的data屬性.

>
<script><br /> $(function(){<br />     //讀取data-*的值<br />     $("li").each(function(v) {<br />         console.log($(this).data('name'));<br />     });<br />      <br />     //設定data-*的值<br />     $("li").eq(0).data('name','bryant');<br />     $("li").each(function(v) {<br />         console.log($(this).data('name'));<br />     });<br />      <br />     //刪除data-*的值   這裡使用的是removeAttr，測試官方的removeData是不起作用的<br />     $("li").eq(0).removeAttr('data-name');<br />     $("li").each(function(v) {<br />         console.log($(this).data('name'));<br />     });<br /> })<br /> </script>

   
• 科比

   
• 加索爾

   
• 納許

   
• 費雪