jQuery学习笔记（四）：attr()与prop()的区别

这一节针对attr()与prop()之间的区别进行学习。

先看看官方文档是如何解释二者之间功能差别的：

attr()

Get the value of an attribute for the first element in the set of matched elements or set one or more attributes for every matched element.
获取匹配的元素集合中第一个元素的attribute，或者为每一个选定的元素添加一个至多个attribute

prop()

Get the value of a property for the first element in the set of matched elements or set one or more properties for every matched element.
获取匹配的元素集合中第一个元素的property，或者为每一个选定的元素添加一个至多个property

能够观察到，二者之间的功能是十分相近的，只是二者操做的对象不一样。

这样，咱们将问题缩小为attribute与property之间的区别。

attribute与propery都有属性的意思，为了以示区分，咱们约定命名attribute为属性，命名property为特性

先说attribute

在javascript中有getAttribute()，专门用来获取节点的属性值。

节点的属性值，咱们指的是<img id='test' src='test.jpg'>中的src的值

<img id='test' src='test.jpg'>
    <script type='text/javascript'>
        var image = document.getElementById('test');
        console.log(image.getAttribute('src'));
    </script>

 

以及setAttribute(),设置节点的属性值。

<img id='test' src='test.jpg'>
    <script type='text/javascript'>
        var image = document.getElementById('test');
        image.setAttribute('src', 'another.jpg');
    </script>

能够看到，节点的属性值发生了改变。经过setAttribute设置的属性值改变的就是节点的属性值。

attr()的功能即是结合javascript中的getAttribute()与setAttribut()，操做的对象是节点的属性值。

再说property

property是DOM元素的特性，和日常使用对象的方法相同，能够经过对象.特性获取对象的特性值，也能够经过对象.特性=特性值的方法来设置对象的特性值。

<img id='test' src='test.jpg'>
    <script type='text/javascript'>
        var image = document.getElementById('test');
        console.log(image.src);
    </script>

能够看到获取了DOM元素的特性值。虽然与节点的属性值内容所指相同，可是形式上仍是有区别的。

再看看设置DOM元素特性值：

<img id='test' src='test.jpg'>
    <script type='text/javascript'>
        var image = document.getElementById('test');
        image.src='another.jpg';
    </script>

 

发现改变了DOM元素的特性值，节点元素的属性值随着发生了改变。再经过getAttribute()方法，看是否能获取刚刚设定的特性值。

<img id='test' src='test.jpg'>
    <script type='text/javascript'>
        var image = document.getElementById('test');
        image.src='another.jpg';
        console.log(img.getAttribute('src'));
    </script>

证明改变DOM的特性值，元素的属性值也一样发生了改变。

 

难道说attribute与property是同样的吗？

其实不尽然，真实状况是attribute与property引用了相同的数据来源。

1. 于build-in属性，attribute和property共享数据，attribute更改了会对property形成影响，反之亦然，可是二者的自定义属性是独立的数据，即便name同样，也互不影响，看起来是下面这张图，可是IE六、7没有做区分，依然共享自定义属性数据。

2. 并非全部的attribute与对应的property名字都一致。好比attribute中的class，在property中对应的名称为className。

3. 对于值是true/false的property，相似于input的checked等，attribute取得值是HTML文档里面的值（checked），property是取得计算结果（true/false），property改变并不影响attribute字面量，但attribute改变会影响property计算。

4. 对于一些和路径相关的属性，二者取得值也不尽相同，可是一样attribute取得是字面量，property取得是计算后的完整路径，就像上面例子中src的返回值。

 

如何选择

整体来讲，对于内建属性使用prop(),自定义属性时使用attr()，另外的参数能够参照下面这张表。