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

最新推荐文章于 2023-03-16 11:33:04 发布

原创最新推荐文章于 2023-03-16 11:33:04 发布 · 1.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #.data #.prop

本文详细对比了jQuery中.attr(), .prop() 和 .data() 的使用区别，包括它们各自的操作对象、适用版本、值类型等，并提供了具体的使用场景建议。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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";

        $("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()总是最优的。