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