1.attr()和prop()操作对象不同
attr即attribute,prop即property,两者都是属性却是两个不同的概念,attribute表示HTML文档的属性,property表示js的属性。
举个栗子:
<!--这里的id、class、data_id都是该div元素的attribute--> <div id="attr" class="attr" data_id="122"></div> <script type="text/javascript"> var obj = { name:"property", age:100, url:"http:www.baidu.com" } //这里的name、age、url都是obj的property。 </script>在jQuery中,prop()函数是用于设置和获取指定DOM元素(指js对象,element类型)上的属性(property);
attr()用于设置和获取指定DOM元素所对应的文档节点上的属性(attribute)。
举个栗子:
<!--attr()函数操作的是该文档节点的attribute--> <div id="attr" class="attr" data_id="122"></div> <script type="text/javascript"> //prop()函数操作的是该DOM元素自身的property var msg = document.getElementById("message"); var $msg = $(msg); </script>
在jQuery的底层实现中,函数attr()和prop()的功能都是通过js原生的Element对象实现的,attr()函数主要依赖的是Element对象的getAttribute()和setAttribute()两个方法,prop()函数主要依赖的是js原生的对象属性的获取和设置的方法。
举个栗子:
<div id="message" class="test" data_id="123"></div> <script type="text/javascript"> var msg = document.getElementById("message"); var $msg = $(msg); /*attr()依赖的是element对象的element.getAttribute(attribute)和element.setAttribute(attribute,value)*/ //相当于msg.setAttribute("data_id",134); $msg.attr("data_id",134); /*prop()依赖的是js原生的element[property]和element[property] = value;*/ //相当于msg["pid"]; var testProp = $msg.prop("pid"); //pid的值 </script>
2.应用版本不同
attr()是jQuery1.0版本的函数,prop()是jQuery1.6版本新增的函数
3.用于设置的属性值类型不同
attr()操作的是文档节点的属性,因此设置的属性值只能是字符串类型,如果不是字符串类型,会调用其toString()方法,将其转为字符串类型
prop()函数操作的是js对象的属性,因此设置的属性值可以包括数组和对对象在内的任意类型