前言

attr() 方法是在jQuery 1.0版本就存在的一个获取DOM元素借点上attributes的方法。从jQuery 1.6版本开始，添加了一个porp()方法，改方法用于设置或返回当前jQuery对象所匹配的元素的属性值。

在jQuery中，"attribute" 和"property"却是两个不同的概念。attribute表示HTML文档节点的属性，property表示JS对象的属性

浅析一下 jQuery-V3.1.1 源码

attr()方法部分源码

attr: function( elem, name, value ) {    var ret, hooks,        nType = elem.nodeType;    // Don't get/set attributes on text, comment and attribute nodes    if ( nType === 3 || nType === 8 || nType === 2 ) {        return;    }    // Fallback to prop when attributes are not supported    if ( typeof elem.getAttribute === "undefined" ) {        return jQuery.prop( elem, name, value );    }    // Attribute hooks are determined by the lowercase version    // Grab necessary hook if one is defined    if ( nType !== 1 || !jQuery.isXMLDoc( elem ) ) {        hooks = jQuery.attrHooks[ name.toLowerCase() ] ||            ( jQuery.expr.match.bool.test( name ) ? boolHook : undefined );    }    if ( value !== undefined ) {        if ( value === null ) {            jQuery.removeAttr( elem, name );            return;        }        if ( hooks && "set" in hooks &&            ( ret = hooks.set( elem, value, name ) ) !== undefined ) {            return ret;        }        elem.setAttribute( name, value + "" );        return value;    }    if ( hooks && "get" in hooks && ( ret = hooks.get( elem, name ) ) !== null ) {        return ret;    }    ret = jQuery.find.attr( elem, name );    // Non-existent attributes return null, we normalize to undefined    return ret == null ? undefined : ret;}

prop()方法部分源码

prop: function( elem, name, value ) {    var ret, hooks,        nType = elem.nodeType;    // Don't get/set properties on text, comment and attribute nodes    if ( nType === 3 || nType === 8 || nType === 2 ) {        return;    }    if ( nType !== 1 || !jQuery.isXMLDoc( elem ) ) {        // Fix name and attach hooks        name = jQuery.propFix[ name ] || name;        hooks = jQuery.propHooks[ name ];    }    if ( value !== undefined ) {        if ( hooks && "set" in hooks &&            ( ret = hooks.set( elem, value, name ) ) !== undefined ) {            return ret;        }        return ( elem[ name ] = value );    }    if ( hooks && "get" in hooks && ( ret = hooks.get( elem, name ) ) !== null ) {        return ret;    }    return elem[ name ];}

具体区别有哪些？

方法各自操作的对象不同

attr()方法操作的是DOM节点。我们可以从源码可以看出来， attr() 会利用 element 的 getAttribute() 方法去获取值。

prop()方法操作的是DOM对象。prop() 跟 attr() 方法稍微有所不同，prop() 方法会直接从当前调用的jQuery对象中进行取值。很显然prop的性能更高，因为attr需要访问DOM属性节点，访问DOM是最耗时的。这种情况适用于多选项全选和反选的情况。

值类型不同

attr()方法只能设置字符串类型的属性值，如果传递的值非字符串类型，也会调用toString()转换成字符串类型。

prop()方法操作的是JS对象的属性，因此设置的属性值可以为包括数组和对象在内的任意类型

什么时候该用prop？什么时候用attr？

• 对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
• 对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。

使用案例

HTML模板

    
    
     我是一个傲娇的复选框    
     我是的复选框老二
    

attr()方法案例

prop()方法案例

$(function() {    // 获取属性值    console.info($('.box').prop('class')); // box    // 设置自定义属性，值类型为字符串    $('.box').prop('cus_attr', 'custom value');    console.info($('.box').prop('cus_attr')); // custom value    // 设置自定义属性，值类型为非字符串    $('.box').prop('cus_attr', [1, 2, 3, 4]);    console.info($('.box').prop('cus_attr')); // [1, 2, 3, 4]    // 获取复选框的值    console.info($('.check_ipt_01').prop('checked')); // true    console.info($('.check_ipt_02').prop('checked')); // false});

注意

从1.6开始，使用attr()获取这些属性的返回值为String类型，如果被选中(或禁用)就返回checked、selected或disabled，否则(即元素节点没有该属性)返回undefined。并且，在某些版本中，这些属性值表示文档加载时的初始状态值，即使之后更改了这些元素的选中(或禁用)状态，对应的属性值也不会发生改变。

参考链接