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

看了/article/4579869.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（[b]version: 1.9.1）[/b]

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