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

本文详细对比了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"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()总是最优的。

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值