prop()，attr()，data()区别

prop()，attr()，data()这三个aqi会频繁使用，但是它们之间的区别你真的知道吗？

attr()和data()都可以做到存储数据，区别如下：

类型	.attr()	.data()
定义	设置或返回被选元素的属性和值（着重于属性）	设置或返回被选元素的数据（着重于数据）
返回类型	始终是string型	对静态绑定的数字、布尔、对象、数组和null进行转换
命名规则	大小写不敏感	key必须全小写
取值	$(selector).attr(attribute)	$(selector).data(name)
设置	$(selector).attr(attribute,value)	$(selector).data(name,value)

prop()和attr()都可以取到属性的值，建议使用prop()来取元素固有属性（通常是由true,false来控制元素），attr()获取自定义属性，如下：

Attribute/Property	.attr()	.prop()
accesskey	√	✗
align	√	✗
async	√	√
autofocus	√	√
checked	√	√
class	√	✗
contenteditable	√	✗
draggable	√	✗
href	√	✗
id	√	✗
label	√	✗
location ( i.e. window.location )	√	√
multiple	√	√
readOnly	√	√
rel	√	✗
selected	√	√
src	√	✗
tabindex	√	✗
title	√	✗
type	√	✗
width ( if needed over .width() )	√	✗

栗子

    
    


    测试
    未选
    选中

运行结果（仔细对比，你将发现它们之间的不同）：

18D2420C-F041-4B59-8160-8411D601074F.png

问答

Q：为什么赋值时不会显示在dom元素上？
A：在js里第一调用data()时，会将HTML里静态绑定的数据，存储到jQuery.cache变量中，之后的赋值和取值都是在cache中操作

Q：为什么data区分大小写？
A：在js里第一调用data()时，存储到jQuery.cache变量中，对key做相应的小写转换，再次使用data()修改数据或添加新数据时，对key不会再进行小写转换，也不会对数据做类型转换