jQ中的attr() 和 prop() 的区别,以及底层探讨!

一..attr()和prop()的区别 

1.两者都是设置属性,但是又有所不同..

attr()实际上是对html元素上的属性进行设置或者获取.

而prop()是对我们用js/jq获取到的DOM元素对象进行属性设置或者获取.

比如:常见的表单标签:

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

以上的input标签有3个属性,type,class,name,在jq中我们可以通过attr()方法来获取/设置这些属性.

这是为什么?

因为在attr()属性的底层:

使用get/setAttribute()实现的 !

 

 

对于prop()来说,他是对 对象 进行属性设置/获取 !

如对于一个input对象来说  获取如下:

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

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

而之所以能获取到 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