一..attr()和prop()的區別 

1.兩者都是設定屬性,但是又有所不同..

attr()實際上是對html元素上的屬性進行設定或者獲取.

而prop()是對我們用js/jq獲取到的DOM元素物件進行屬性設定或者獲取.

比如:常見的表單標籤:

<input type='text' class='username' name='username'>

以上的input標籤有3個屬性,type,class,name,在jq中我們可以通過attr()方法來獲取/設定這些屬性,而當我們試圖用prop()方法來獲取這些屬性時,我們發現,只能獲取到class的屬性,而type和name的屬性都為undefined !

這是為什麼?

因為在attr()屬性的底層:

使用get/setAttribute()實現的 !

對於prop()來說,他是對 物件 進行屬性設定/獲取 !

如對於一個input物件來說  獲取如下:

$('input').prop('checked')  值為 fasle.

$('input').prop('autofocus')  值為 fasle.

而在以上的屬性中顯然沒有 name / type 這些個屬性, 所以是undefined..........而之所以能獲取到 class 是因為如:id/title/class這些個常用屬性已經被附加到DOM物件上去了,直接獲取就行!

二.....對於自定義屬性

1.在html上的自定義屬性,如:

<input type='text' class='username' name='username' name111='name111'>

可以看出,name111是我們自定義的一個屬性,對於這種自定義的屬性,我們可以通過 .attr() 來獲取,使用prop()是獲取不到的.

2.在元素物件上的自定義屬性,如:

先獲取dom物件: var oInput = $('input').get(0);

向dom物件中新增一個自定義屬性: oInput['name222'] = 'name222';

這裡注意的是 js原生的 向物件中 新增自定義屬性的方式為:  elem['name'] = value

這時候我們使用jq的prop方法:

$('input').prop('name222')  ----> 能得到 'name222',

而使用$('input').attr('name222') 得到的就為undefined !

由此我們能夠知道,jq的prop()方法的底層為:

elem[name]   就是原生的js新增自定義屬性.

為什麼 checked / selected / disabled 要使用prop()方法? 

因為這些方法都在 DOM物件中,prop()方法能夠獲取dom物件中的屬性.

如果沒有在html中設定 checked / selected / disabled 這些屬性,name用attr()獲取到的全是undefined !

但是如果設定了以上屬性,那麼呼叫attr()方法,會返回相應的 ''字串'' :

如:

//在H5中 如果 屬性名=屬性值,那麼只用寫屬性名就行
//如 checked = 'checked',那麼只需要寫checked
<input type='checkbox' class='hobby' checked>

對於以上程式碼  

$('.hobby').attr('checked')  返回的是 ''checked'' (字串形式);

$('.hobby').prop('checked) 返回的是 true (boolean形式);

而:

$('.hobby').attr('disabled') 返回的是undefined

$('.hobby').prop('disabled') 返回的是false