tips02-data 和 attr

attr 和 data :

　　attribute(特性)是dom节点自带的属性, 例如html 中的 id class 等;

　　特点:1.dataset 和 setAttribute 都是把属性设置到attribute 上;

　　　　2.data-是h5 属性, 浏览器兼容性还比较差;

　　　　3.dataset 和 setAttribute 不要混用;

　不同点:  attr   改变的dom 元素的属性值,就是显示在html 页面上;  data 改变的属性值存储在内存中, 可能视图上显示的不一样

　　

//data 设置的两种方式
//1.直接在html标签上设置
    data-large-img="images/q.jpg"

    获取方式: 去掉data-, 驼峰命名
    var imgSrc = data("largeImg");  

//2. 通过js设置

    obj.dataset.name = 'nora';
    获取方式 :console.log( obj.dataset.name); //nora

   * data- 用在css选择器的时候, 不能去掉-
     <style>
        [data-large-img]{
             100%;
        }
     </style>
    

//attribute 设置自定义属性的方式:
    obj.setAttribute('name', 'nora');
    obg.getAttribute('name');

//jquery 方法

var obj = $(".student");

//attr() 获取和设置的都是dom 元素的标签属性

 obj.attr("name", "nora");
    
//data() 获取和设置的是jq对象的属性值,可能与视图上显示的不一致

 obj.data("name", "Zhang");