data-*的赋值与获取

常用到获取和赋值data-属性值的方法有一下几种

1. data() 兼容ie8及以上
2. dataset 兼容ie10+
3. attr()

 <div id="tar" data-name="xxxx" data-age="23" data-h-y='hy'>1111div>

1.data()方式

 $(document).on('click','#tar',function(){
 //获取data-属性值 
 //如果是用data-h-y这种形式 多个连接符 使用驼峰的形式获取 hY
	  console.log($(this).data()); //{age: 23,hY: "hy",name: "xxxx"}
      console.log($(this).data('age')); //23
      console.log($(this).data('hY'));//hy
      console.log($(this).data('name'));//xxxx

//设置data-属性值
	  $(this).data('h-y','cat'); //cat
      $(this).data('age','66'); //66
      $(this).data('name','yyyy'); //yyyy
      console.log($(this).data()); 
})

2.dataset方式

 $(document).on('click','#tar',function(){
 //获取data-属性值 
 //如果是用data-h-y这种形式 多个连接符 使用驼峰的形式获取 hY
 //  获取data-属性值
      console.log(this.dataset); //{age: 23,hY: "hy",name: "xxxx"}
      console.log(this.dataset.age); //23
      console.log(this.dataset.hY);//hy
      console.log(this.dataset.name);//xxxx

 //设置data-属性值
      this.dataset.hY = 'cat'; //cat  
      this.dataset.age = 66; //66  
      this.dataset.name = 'yyyy'; //yyyy  
      console.log(this.dataset);
})

3.attr()方式 需要获取/设置属性全称 data-xxxx

$(document).on('click', '#tar', function () {
//获取data-属性值 
      console.log($(this).attr('data-name'))//xxxx
//设置data-属性值
      $(this).attr('data-name','yyyy')//yyyy
})

几个方式一起联用

 $(document).on('click','#tar',function(){
        this.dataset.setval = 'setval';
        $(this).attr('data-attrval','attrval')
        $(this).data('dataval','dataval');

        console.log(this.dataset);
        console.log($(this).data());
      })

data()可以获取到所有的属性值 ，dataset无法获取到通过data()设置的属性值

总结

1. dataset和data()可以直接获取data-后面的属性名直接获取和赋值属性，attr() 需要获取属性全称 data-xxxx进行属性的设置和获取。
2. data()可以获取到所有的属性值 ，dataset无法获取到通过data()设置的属性值