欢迎来到吴小小的专栏!

对比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属性中。

posted @ 2017-10-25 15:34  吴小小  Views(1730)  Comments(0Edit  收藏  举报