jquery和 原生两种方式 获取 html5 自定义属性

再html5中如果 你要给元素绑定自定义属性的话 前面最好加上 data-* = “”

// 下面得标准是 data-type 不标准 app-my

<div id="demo" data-type="123" app-my="222"></div>

然后我们分别通过原生和 jquery得方式进行获取

// jquery

console.log($('#demo').data().type); // 123

原生

var demo = document.querySelector('#demo'); console.log(demo.dataset['type']); // 123 以上两种方式不能获取到 app-my 自定义属性的值

还有一种方式就是 下面这种方式能获取到 app-my 自定义属性的值

var demo = document.querySelector('#demo'); console.log(demo.getAttribute('data-type'));

其实在工作中 经常会做到在 元素上绑定自定义属性来进行处理

之前 我们不给元素添加自定义属性得话 会按照元素所处的 dom数组对象中的下标进行处理

<ul> <li>00001</li> <li>00002</li> <li>00003</li> <li>00004</li> <li>00005</li> </ul> $('ul li').each(function(index, item) { switch (index) { case 0: // do something break; case 1: // do something break; case 2: // do something break; default: break; } })

如果我们按照下标来处理得把 一旦元素的位置发生变化 那么 逻辑就得重新书写了

如果按照下面的方式处理这种问题就可以避免了,哪怕顺序发生了变化 也没事了

<ul> <li data-type="0">00001</li> <li data-type="2">00002</li> <li data-type="3">00003</li> <li data-type="1">00004</li> <li data-type="4">00005</li> </ul> $('ul').on('click', 'li', function() { let type = $(this).data().type; switch (type) { case 0: // do something break; case 1: // do something break; case 2: // do something break; default: break; } })

关注我 持续更新前端知识