本篇教程介绍了HTML+CSS入门 HTML自定义data属性详解，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。<
可以在HTML标签上添加任意以"data-"开头的属性，这些属性页面上是不显示的，它不会影响到你的页面布局和风格，但它却是可读可写的。
例子：
testdata
如何读取自定义data属性数据呢？
jquery已经有现成的方法：
varmyData=$(".my-data")data("category");//这样就能返回对应的值
你也可以在data-*属性中使用json语法：
例如：
你可以通过js直接访问这个数据，通过json的key值，你能得到相应的value：
vargameStatus=$(".my-data").data("category").game;
通过自定义data属性，可以让交互变得更简单：
例如：
全部视频
运动视频
导航视频
舵机视频
视觉视频
jQ控制：
$(".video-aside-item").click(function(e){
var_this=e.currentTarget;
$(_this).addClass("nav-selected").siblings().removeClass("nav-selected");
vardataCategory=$(_this).data("category");
if(dataCategory==‘all‘){
$(".video-item").show();
return;
}
$(".video-item").each(function(){
varitemCategory=$(this).data("category");
if(dataCategory==itemCategory){
$(this).show();
}else{
$(this).hide();
}
});
});
这样在进行切换的时候，就不需要进行ajax数据请求，从而达到交互更流畅
本文由职坐标整理发布，欢迎关注职坐标WEB前端HTML/CSS频道，获取更多HTML/CSS知识！
