jQuery函数的attr()和prop()的区别

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对象的属性，因此设置的属性值可以包括数组和对对象在内的任意类型

jQuery函数的attr()和prop()的区别

猜你喜欢