HTML5中的 `data--` 如何处理数据详解

详解HTML5中`data-*`是如何处理数据的清楚的同学，可以看看stupidpropertyandattribute）一文。在开发微信公众号的时候，你一定见过下图的情况：我之前做过一个微信图形编辑器，我用过很多这样的情况。我在一些电商网站的源代码中也看到过如下情况：在移动端的开发中，我们经常会用到这种情况，比如媒体资源（图片，视频）的优化，我们的前端开发。我接触过的bootstrap框架在插件参考中使用了data-*，那么它有什么魅力呢？HTML5data-*起源在HTML5出现之前，我们通过class属性或者元素自带的属性来处理一些导入的数据，或者开发者自定义一些数据属性。这样操作数据非常不方便。如何在页面中处理数据更方便，成为了开发者的难题。HTML5出现后，你就不用担心了。w3cdata-attributespecificationHowHTML5data-*works我们可以将用户的信息存储在列表项中，如下所示：lvzhenbang这些数据对于页面访问者来说用处不大，因为用户看不到，但是对于web的开发很有用applications那些很有用。这时候你可以想象添加一个删除按钮，可以删除列表中的一个用户。通过用户的数据信息data-id，可以直接向后台发送请求删除，不需要其他相关的东西或者属性。用户。delete这个简单的使用场景描述了data-*是如何工作的。什么数据-*可以用HTML5数据存储-*虽然是个好东西，但不是万能的，还是【属性】(https://github.com/lvzhenbang/article/blob/master/js/porp-attr.md)，Attribute只能存储字符串类型的数据。如果直接在里面存一个对象是不行的，但是把对象序列化之后，还是可以的。使用JavaScript读写数据-*//用户信息操作按钮varoBtn=document.getElementById('opt-btn');//删除按钮vardelBtn=document.getElementById('delte-btn');//获取informationvarid=oBtn.getAttribute('data-id');//改变数据信息delBtn.setAttribute('data-id',id);是不是很简单，然后你就可以通过AJAX向后台请求，做你现在想做的事。使用jQuery读写数据-*jQuery中有一个.attr()方法来解决读写data数据的功能。//获取用户信息操作按钮varoBtn=$('#opt-btn');//获取删除按钮vardelBtn=$('#delte-btn');//获取操作信息varid=oBtn。attr('data-id');//改变删除按钮的数据信息delBtn.attr('data-id',id);如果你熟悉jQuery，你可能会认为有一个.data()方法？虽然。attr()和.data()在操作data-*方面有一些重叠，但它们是完全不同的东西。理解不深的同学，知道.attr()就可以了。HTML5有原生API数据集读写数据-*HTML5开发方便，但存在一些兼容性问题，IE系列浏览器不支持。但时代在进步，这些精彩的浏览器终将成为历史，所以还是有必要多说几句。//获取用户信息操作按钮varoBtn=document.getElementById('opt-btn');//获取删除按钮vardelBtn=document.getElementById('delte-btn');//获取操作信息varid=oBtn.dataset.id;//更改删除按钮的数据信息delBtn.setAttribute.id=id;值得注意的是，这里没有数据前缀和-在这里，类似于我们在JavaScript中操作css属性的方式，我们使用数据集API当您在HTML中使用data-some-attribute-name时，您需要像数据集一样使用camelCase。JavaScript中的someAttributeName。HTML5data-*可以做什么？下面举几个简单的例子，仅供参考。过滤这实际上是模糊查询的简化版。我曾经在面对面使用的时候遇到过这样的问题，就问如何做一个简单的模糊查询。假设你有一个像下面这样的演示，你想通过过滤每个用户的关键字来过滤用户。只要将它们的关键字放在数据属性中，然后编写一个简短的脚本来循环显示/隐藏它们。html王明张华王力王大牛王小二张力js$('#filter').on('keyup',function(){varkeyword=$(this).val().toLowerCase();$('.person>li').each(function(){$(this).toggle(keyword.length<1||$(this).attr('data-models').indexOf(keyword)>-1);});});demo演示stylestyle毫无疑问可以使用class来定义style，但是也可以使用data-*来应用style（不管data数据的值是多少）：HTMLCSS[data-warning]{background:red;}但是如果你想依赖数据属性的值怎么办？你可以这样使用它：[data-warning*=error]{color:red;}[data-warning*=update]{color:green;}[data-warning*=modify]{color:blue;}你熟悉上面的用法吗？相信学过bootstrap的同学应该不会陌生。可以参考bootstrap中将链接转化为按钮的demo响应式开发在响应式开发过程中，我们不仅可以使用媒体查询，还可以使用data-*//htmlmobile内容