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）

 1 attr: function( eleversion: 1.9.1m, name, value ) {
 2     var hooks, notxml, ret,
 3         nType = elem.nodeType;
 4 
 5     // don't get/set attributes on text, comment and attribute nodes
 6     if ( !elem || nType === 3 || nType === 8 || nType === 2 ) {
 7         return;
 8     }
 9 
10     // Fallback to prop when attributes are not supported
11     if ( typeof elem.getAttribute === core_strundefined ) {
12         return jQuery.prop( elem, name, value );
13     }
14 
15     notxml = nType !== 1 || !jQuery.isXMLDoc( elem );
16 
17     // All attributes are lowercase
18     // Grab necessary hook if one is defined
19     if ( notxml ) {
20         name = name.toLowerCase();
21         hooks = jQuery.attrHooks[ name ] || ( rboolean.test( name ) ? boolHook : nodeHook );
22     }
23 
24     if ( value !== undefined ) {
25 
26         if ( value === null ) {
27             jQuery.removeAttr( elem, name );
28 
29         } else if ( hooks && notxml && "set" in hooks && (ret = hooks.set( elem, value, name )) !== undefined ) {
30             return ret;
31 
32         } else {
33             elem.setAttribute( name, value + "" );
34             return value;
35         }
36 
37     } else if ( hooks && notxml && "get" in hooks && (ret = hooks.get( elem, name )) !== null ) {
38         return ret;
39 
40     } else {
41 
42         // In IE9+, Flash objects don't have .getAttribute (#12945)
43         // Support: IE9+
44         if ( typeof elem.getAttribute !== core_strundefined ) {
45             ret =  elem.getAttribute( name );
46         }
47 
48         // Non-existent attributes return null, we normalize to undefined
49         return ret == null ?
50             undefined :
51             ret;
52     }
53 }

 

Prop

 1 prop: function( elem, name, value ) {
 2     var ret, hooks, notxml,
 3         nType = elem.nodeType;
 4 
 5     // don't get/set properties on text, comment and attribute nodes
 6     if ( !elem || nType === 3 || nType === 8 || nType === 2 ) {
 7         return;
 8     }
 9 
10     notxml = nType !== 1 || !jQuery.isXMLDoc( elem );
11 
12     if ( notxml ) {
13         // Fix name and attach hooks
14         name = jQuery.propFix[ name ] || name;
15         hooks = jQuery.propHooks[ name ];
16     }
17 
18     if ( value !== undefined ) {
19         if ( hooks && "set" in hooks && (ret = hooks.set( elem, value, name )) !== undefined ) {
20             return ret;
21 
22         } else {
23             return ( elem[ name ] = value );
24         }
25 
26     } else {
27         if ( hooks && "get" in hooks && (ret = hooks.get( elem, name )) !== null ) {
28             return ret;
29 
30         } else {
31             return elem[ name ];
32         }
33     }
34 }

 

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