[HTML5]H5的"data-"和JQ的".data()"

[Cuuube]

存在这样一个元素： <p data-title=“Hello”></p> 用jquery操作data：

$('p').data();
>> {title: 'Hello'}

//取出数据：
$('p').data().title;
$('p').data('title');

//设置或新增数据：
$('p').data('foo','bar')
>>相当于<p data-title="Hello" data-foo="bar"></p>

//也可以增加obj
let object = {name: 'Tom'};
$('p').data('person', object);
//取出时最好用.data()，因为会自动重组为obj
//用.attr()会取出字符串格式

//设置整个data
$(‘p’).data({a: '1',b: '2'})
//此种方法会替换全部data数据！自己原本的数据会被清除换成新的
//如上会被换成data-a="1" data-b="2"

• data-属性的好处是，可以用于储存后台模板直接生成的数据，然后前端获得并进行处理
• 往dom元素上添加临时数据用于命名和调整 注意： *let $pData = $('p').data();
  • 该变量保存的是一个obj的副本，可以随意操作而不改变原元素
  • 操作原元素也不会更新该变量保存的obj
• $('p').data('test', obj); obj.a = '1';
  • 给元素绑定obj时，绑定的是obj的引用，不是副本
  • 更改obj时候被绑定的元素内部也会改变。
• 用jq.data()修改时，dom中的data值不会变化
  • jq实质修改了缓存的副本，并之后一直使用该副本。
  • 一直使用jq时不会因数据不同出错，jq，js并用会出错
  • js改data时使用element.dataset.key = value的方法。
    • js改会dom变化