prop&attr

checkbox

 

说明:多选框中的checked属性除非不写,不然不论赋什么值,还是不写值,都代表选中。

attribute

html的预定义属性和自定义属性


input标签:针对的html
所以如上:checked是input标签的attribute


property

js原生对象的直接属性
每一个预定义的attribute都会有一个property与之对应


input节点:针对的是js
所以如上:checked是input节点的property


布尔值属性和非布尔值属性


    




属性使用attr还是prop的区分图

prop&attr.png

能使用attribute尽量使用attribute,性能高。

基本案例:

此时只有在第一次点击全选才有效,如果一旦第一次点击操作过property则全选无效,例如此时的水果三个全部手动选中,都是操作property,则在点击全选无效。如果在html全部给水果加上checked属性就相当于操作了property,此时即使第一次点击全选也无效。




    
    
    
    H5
    


    苹果
    栗子
    香蕉
    



对比案例:

checked属性是布尔值属性,如果使用操作property则一直有效




    
    
    
    H5
    


    苹果
    栗子
    香蕉
    



你可能感兴趣的:(prop&attr)