data-*自定義數據屬性
首先講一下語法格式： data-* =“值”
data-* 屬性包括兩部分：
- 屬性名不應該包含任何大寫字母，並且在前綴 "data-" 之后必須有至少一個字符
- 屬性值可以是任意字符串
其實data-*加在標簽里並沒有任何含義，只不過，起到一個存放值的一個方式。
在jQuery中，有一個專門的方法可以獲得data-的值：data(參數) ，此方法參數為 data- 后面的內容，就可以得到值了
ps:JavaScript也可以得到值，用獲得屬性方法就可以了
<div data-bgcolor = "red" id="bg">
</div> <script type="text/javascript"> $(function(){ var a=$("#bg").data("bgcolor") alert(a) //彈出一個red }) </script>
重點來了，我們要去獲得data- 值干什么呢？其實就是要拿data- 的值去賦值
比如我此時的div寫red的值，應該能猜出來我想讓這個div變紅色吧。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery.js"></script> <style type="text/css"> div{ width: 100px; height: 100px; } </style> </head> <body> <div data-bgcolor = "red" id="bg"> </div> <script type="text/javascript"> $(function(){ var a=$("#bg").data("bgcolor") $("#bg").css("background-color",a) }) </script> </body> </html>
這樣我們就可以實現對data- 的應用。data- 的值還可以放圖片路徑等一系列字符串，在標簽上添加data-屬性也方便我們能夠直觀的去看和修改內容了.
比如我想讓div去變成藍色，不需要去css文件里去修改，也不需要去js文件去修改，如果css和js文件內容非常多的話就很麻煩了。但是在HTML找到對應標簽，修改data-的值就可以了。這樣就非常方便我們使用了