对比jquery获取属性的方法props、attr、data

1.attr,prop

对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。对于自定义的属性是取不到的；

对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。

2.attr,data

① attr获取的属性是string

data获取的可能是string，number，boolean，object,null,array

jQuery会尝试将字符串转换为一个JavaScript值（包括布尔值（booleans），数字（numbers），对象（objects），数组（arrays）和空（null））。

② data-属性是在第一次使用这个数据属性后不再存取或改变（所有的数据值都在jQuery内部存储）。

调用 .data() 时如果不带参数，将会以 JavaScript 对象的形式获取所有数据。这个对象可以安全的存放在变量中，因为一旦这个新对象被提取出来，之后对元素进行的 .data(obj) 操作，将不会再影响这个对象。

例子：

$.attr()每次都从DOM元素中取属性的值，即和视图中标签内的属性值保持一致。

$.attr('data-foo')会从标签内获得data-foo属性值；

$.attr('data-foo', 'world')会将字符串'world'塞到标签的'data-foo'属性中；

$.data()是从Jquery对象中取值，由于对象属性值保存在内存中，因此可能和视图里的属性值不一致的情况。

$.data('foo')会从Jquery对象内获得foo的属性值，不是从标签内获得data-foo属性值；

$.data('foo', 'world')会将字符串'world'塞到Jquery对象的'foo'属性中，而不是塞到视图标签的data-foo属性中。