jq方法中data，attr，prop的区别

data([key],[value])

介绍：

在元素上存放或读取数据
当参数为一个key 的时候，是读取通过data存入对应key的值，如果元素中有data-[key]的时候，可以通过data([key])来直接获取对应key的数据
当参数是两个的时候，是存储key-value 对形式的数据
参数也可以是obj对象，eg:{ a:1,b:2 }

示例:
html代码

<div id="box" data-name="myName"></div>

jq代码

$("#box").data('a',1)
$("#box").data('a')//1
$("#box").data("myobj",{ first:'one',second:'two' })
$("#box").data("myobj").first //one
$("#box").data("myobj").second //two
$("#box").data("name") //myName

attr(name|properties|key,value|fn)

介绍

设置或返回被选元素的属性值。

示例

参数是name

//返回文档中所有图像的src属性值。
$('img').attr('src')

参数是properties

//为所有图像设置src和alt属性。
$("img").attr({ src: "test.jpg", alt: "Test Image" });

参数是key，value

//为所有图像设置src属性。
$("img").attr("src","test.jpg");

参数key,回调

//把src属性的值设置为title属性的值。
$("img").attr("title", function() { return this.src });

prop(name|properties|key,value|fn)

示例

参数是name

//选中复选框为true，没选中为false
$("input[type='checkbox']").prop("checked");

参数是properties

//禁用页面上的所有复选框。
$("input[type='checkbox']").prop({
  disabled: true
});

参数是key，value

//为所有图像设置src属性。
$("img").attr("src","test.jpg");

参数key,回调

//禁用和选中所有页面上的复选框。
$("input[type='checkbox']").prop("disabled", true);
$("input[type='checkbox']").prop("checked", true);

上面的介绍都是jq官方文档里面的说法

来说一下自己的看法，首先说一下data。
data是在元素上存放数据的，可以把字符串、数组和对象，存取到dom元素对应的jq对象上。通过prop 和 attr设置的值不能通过data取，如果是data-key 的话，data可以通过$(ele).data([key])的方式取出来。

prop和attr有什么区别
在我的印象中很少用到prop的，几乎都是attr。prop操作的是js对象，attr操作的是dom元素。两者有公用的，比如class，id，title,自定义属性...。一般这些我们用attr就可以。还有一些比如checked,selected,disabled这些属性我们要用prop。