.attr(),.prop()和.data()的区别

Jquery 中 .attr()  .prop() .data()的区别

.attr()和.prop()的区别

       .attr()和.prop()都是用来设置或者获取指定函数的，参数和用法已几乎相同，用处却又很大的不同

 

1.     操作对象不同

a)      在原生JS中attrbute表示HTML文档节点属性，property表示JS对象的属性

b)      在jquery中prop()的设计用于设置或者获取指定DOM元素（指的是JS对象，Element类型）上的属性（property）。.attr()的设计目标是用于设置或获取指定DOM元素所对应的文档节点上的属性（attribute）

c)       在Jquery底层是实现中，attr()和prop()的功能都是通过js原生的Element对象实现的。Attr()主要依赖的是Element对象的getAttribute（）和setAttribute（）两个方法[$msg.attr(“属性”,”属性值”)]，prop（）主要依赖的js中原生对象的属性获取和设置的方式（）[$msg.prop(“属性”,”属性值”)]特别注意：$msg.prop("className","newTest")与$msg.attr("class","newTest")相同

2.     引用版本不同

a)      .attr()在JQuery1.0中已经存在 .prop（）jQuery1.6之后新增的函数

3.     用于设置的属性值类型不同

a)      用于attr（）操作的是文档节点的属性，因此设置的属性值只能是字符串类型，如果不是在字符串类型的，也会调用tostring()方法将其转换成字符串类型。

b)      Prop()操作的是js对象的属性，设置的属性值可以包括为数组和对象在内的任意函数

4.     其他问题（checked，selected，disabled ……）

a)      对于一些标签的属性 在jq1.6之前 attr（）获取这些属性返回的值是Boolean类型的如果选中为TRUE，否则为FALSE

b)      在jq1.6之后，使用attr（）返回的String类型，选中就返回checked ,selected disababled 否则返回undefined。

c)       而且在某些版本中，这些属性会表示文档加载时的初始状态值，即使之后更改这些元素的状态，对应的属性值也不会发生改变。及是：attribute的"checked"、"selected"、"disabled"就是表示该属性初始状态的值，property的checked、selected、disabeld才表示该属性实时状态的值(值为true或false)。

d)      对于a标签的href属性，prop取到的是绝对地址，attr取到的href中的值（字符串）

e)      Bug问题 在IE9之前，如果property没有在dom元素被移除之前删除，使用.prop（）方式设置DOM元素property的值会导致内存泄漏。解决方案：使用.data()方法

5.     对于prop和attr的使用

a)      对于HTML元素本身就带有的固有属性，在处理的时候，我们使用prop方法

b)      对于HTML元素我们定义的dom属性，在处理的时候使用attr方法，否则：此时使用prop方法设置或者获取值的时候都会返回undefined

6.     .data() 作用是吧任意的值读取/存储到DOM元素对应的jq对象上，可以使字符串，数组以及对象。

<div data-role="page"data-last-value="43" data-hidden="true"data-options='{"name":"sinweng"}'></div>

获取方式

        $("div").data("role") === "page";

        $("div").data("lastValue") === 43;

        $("div").data("hidden") === true;

        $("div").data("options").name === "sinweng";

Attribute的取值和赋值

<div id="div1" class="divClass" title="divTitle" align="left" t1="die1"></div> 

取值

var id = div1.getAttribute("id");              

var className1 = div1.getAttribute("class");

var title = div1.getAttribute("title");

var title1 = div1.getAttribute("t1");   //自定义特性

赋值

div1.setAttribute('class', 'a');

div1.setAttribute('title', 'b');

div1.setAttribute('title1', 'c');

div1.setAttribute('title2', 'd');

property的取值和赋值

取值

var id = div1.id;

var className = div1.className;

var childNodes = div1.childNodes;

var attrs = div1.attributes;

赋值

div1.className = 'a';

div1.align = 'center';

div1.A = true;

div.B = [1, 2, 3];

在性能方面 prop()>data()>attr() 不同浏览器不同版本.data()和.attr()的性能关系有差异，不过.prop()总是最优的。