jquery中prop和attr的区别

曾经终败给现在 2021-09-10 23:44 389阅读 0赞

## 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