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() ) | √ | ✗ |
栗子🌰
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<label>测试</label>
<input type="radio" class="radioTest1" data-Id="11" value="1">未选
<input type="radio" class="radioTest2" data-Id="12" value="2" checked>选中
</body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
var dataId = $(".radioTest1").data("Id")
var dataid = $(".radioTest1").data("id")
var attrId = $(".radioTest1").attr("data-Id")
var attrid = $(".radioTest1").attr("data-id")
var attrChecked = $(".radioTest1").attr("checked")
var propChecked = $(".radioTest1").prop("checked")
var attrChecked2 = $(".radioTest2").attr("checked")
var propChecked2 = $(".radioTest2").prop("checked")
console.log("data大写id:"+dataId,"类型为:"+ typeof(dataId))
console.log("data小写id:"+dataid,"类型为:"+ typeof(dataid))
console.log("attr大写id:"+attrId,"类型为:"+ typeof(attrId))
console.log("attr小写id:"+attrId,"类型为:"+ typeof(attrId))
console.log("attr1:"+attrChecked,"类型为:"+ typeof(attrChecked))
console.log("prop1:"+propChecked,"类型为:"+ typeof(propChecked))
console.log("attr2:"+attrChecked2,"类型为:"+ typeof(attrChecked2))
console.log("prop2:"+propChecked2,"类型为:"+ typeof(propChecked2))
$(".radioTest2").data("id","13")//在dom上看不到更改
$(".radioTest2").attr("data-id","13")//在dom上可看到更改
})
</script>
</html>
运行结果（仔细对比，你将发现它们之间的不同）：
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不会再进行小写转换，也不会对数据做类型转换
网友评论