attribute & property --- jquery attr() & prop()

看了http://www.cnblogs.com/aaronjs/p/3387906.html ，总结下：

attribute: 特性

• 直接写在标签上的属性，可以通过setAttribute、getAttribute进行设置、读取
• 会随着添加或删除attribute节点动态更新
• 操作有：getAttibute, setAttribute, removeAttribute 

每个DOM元素都可以有属性：

只要在元素上写了有这个attribute，可以在浏览器中看到：

attribute是一个类似数组的容器： NameNodeMap。type, name checked等都是attribute节点。

property: 属性

• 通过“.”号来进行设置、读取的属性，就跟Javascript里普通对象属性的读取差不多

如果把DOM元素看成普通的object对象，则property是以(name = "value")形式存放在object中的属性。

---

attribute 和 property混淆的原因：

很多attibute节点还有一个相对应的property属性。

基本可以总结为attribute节点都是在HTML代码中可见的，而property只是一个普通的名值对属性

---

 jQuery中的attr和prop

和attr和prop相关的主要有：

• jQuery.prototype.attr
• jQuery.prototype.prop
• jQuery.prototype.removeAttr
• jQuery.prototype.removeProp
• jQuery.prototype.val

Attr（version: 1.9.1）

attr: function( eleversion: 1.9.1m, name, value ) {
    var hooks, notxml, ret,
        nType = elem.nodeType;

    // don't get/set attributes on text, comment and attribute nodes
    if ( !elem || nType === 3 || nType === 8 || nType === 2 ) {
        return;
    }

    // Fallback to prop when attributes are not supported
    if ( typeof elem.getAttribute === core_strundefined ) {
        return jQuery.prop( elem, name, value );
    }

    notxml = nType !== 1 || !jQuery.isXMLDoc( elem );

    // All attributes are lowercase
    // Grab necessary hook if one is defined
    if ( notxml ) {
        name = name.toLowerCase();
        hooks = jQuery.attrHooks[ name ] || ( rboolean.test( name ) ? boolHook : nodeHook );
    }

    if ( value !== undefined ) {

        if ( value === null ) {
            jQuery.removeAttr( elem, name );

        } else if ( hooks && notxml && "set" in hooks && (ret = hooks.set( elem, value, name )) !== undefined ) {
            return ret;

        } else {
            elem.setAttribute( name, value + "" );
            return value;
        }

    } else if ( hooks && notxml && "get" in hooks && (ret = hooks.get( elem, name )) !== null ) {
        return ret;

    } else {

        // In IE9+, Flash objects don't have .getAttribute (#12945)
        // Support: IE9+
        if ( typeof elem.getAttribute !== core_strundefined ) {
            ret =  elem.getAttribute( name );
        }

        // Non-existent attributes return null, we normalize to undefined
        return ret == null ?
            undefined :
            ret;
    }
}

Prop

prop: function( elem, name, value ) {
    var ret, hooks, notxml,
        nType = elem.nodeType;

    // don't get/set properties on text, comment and attribute nodes
    if ( !elem || nType === 3 || nType === 8 || nType === 2 ) {
        return;
    }

    notxml = nType !== 1 || !jQuery.isXMLDoc( elem );

    if ( notxml ) {
        // 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;

        } else {
            return ( elem[ name ] = value );
        }

    } else {
        if ( hooks && "get" in hooks && (ret = hooks.get( elem, name )) !== null ) {
            return ret;

        } else {
            return elem[ name ];
        }
    }
}

参考：http://wenzhixin.net.cn/2013/05/24/jquery_attr_prop