jquery中prop和attr的区别

jquery中prop和attr的区别

prop:

prop(name|properties|key,value|fn)

**概述**

    获取在匹配的元素集中的第一个元素的属性值。
    随着一些内置属性的DOM元素或window对象，如果试图将删除该属性，浏览器可能会产生错误。
    jQuery第一次分配undefined值的属性，而忽略了浏览器生成的任何错误

**参数**

    name                        String                  V1.6
    属性名称

    properties                  Map                     V1.6
    作为属性的“名/值对”对象

    key,value                   String,Object           V1.6
    属性名称，属性值

    key,function(index, attr)   String,Function         V1.6
    1:属性名称。
    2:返回属性值的函数,第一个参数为当前元素的索引值，第二个参数为原先的属性值。

**示例**

    参数name 描述:
    选中复选框为true，没选中为false

    jQuery 代码:
    $("input[type='checkbox']").prop("checked");

    参数properties 描述:
    禁用页面上的所有复选框。

    jQuery 代码:
    $("input[type='checkbox']").prop({
      disabled: true
    });

    参数key,value 描述:
    禁用和选中所有页面上的复选框。

    jQuery 代码:
    $("input[type='checkbox']").prop("disabled", false);
    $("input[type='checkbox']").prop("checked", true);

    参数key,回调函数 描述:
    通过函数来设置所有页面上的复选框被选中。

    jQuery 代码:
    $("input[type='checkbox']").prop("checked", function( i, val ) {
      return !val;
    });

---

attr

attr(name|properties|key,value|fn)

概述
设置或返回被选元素的属性值。

参数

name                        String                                  V1.0
属性名称

properties                  Map                                     V1.0
作为属性的“名/值对”对象

key,value                   String,Object                           V1.0
属性名称，属性值

key,function(index, attr)   String,Function                         V1.1
1:属性名称。
2:返回属性值的函数,第一个参数为当前元素的索引值，第二个参数为原先的属性值。

示例

参数name 描述:
返回文档中所有图像的src属性值。

jQuery 代码:
$("img").attr("src");

参数properties 描述:
为所有图像设置src和alt属性。

jQuery 代码:
$("img").attr({ src: "test.jpg", alt: "Test Image" });

参数key,value 描述:
为所有图像设置src属性。

jQuery 代码:
$("img").attr("src","test.jpg");

参数key,回调函数 描述:
把src属性的值设置为title属性的值。

jQuery 代码:
$("img").attr("title", function() { return this.src });

prop和attr的区别：

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

<input id="test3" type="checkbox"/>

    var t=document.getElementById('test3');
    console.log(t.getAttribute('checked'));//null
    console.log(t.checked);//false;

    t.setAttribute('checked','checked');
    console.log(t.getAttribute('checked'));//checked
    console.log(t.checked);//true

    t.checked=false;
    console.log(t.getAttribute('checked'));//checked
    console.log(t.checked);//false

参考网址：

http://www.cnblogs.com/dolphinX/p/3348582.html