一..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