properties
properties 是 JavaScript 对象内在的属性,可以进行动态创建,修改等操作。
attributes
指的是 DOM 元素标记出来的属性,不是实例对象的属性。
例如:<img id="my-image" src="batter.png" title="This is an image" />,id、src、title 都是 img 元素的 attributes
[二者的区别]
attributes 返回的值类型总是 string 字符串;
properties 返回的值类型有 Booleans、numbers、objects
attr()
示例,
<img id="my-image" src="butter.png" data-custorm="some value" /> $('#my-image').attr('data-custom'); $('[title]').attr('title', function(index, prevValue) { return prevValue + " " + index + " " + this.id; }); $('input').attr({ value: ' ', title: 'please enter a value' });
removeAttr()
prop() 与 attr()的方法相同,
使用 data() 方法给 jQuery() 对象设置一些缓存值,同时,也可以操作 DOM 元素标记中以“data-*”开头的属性。
例如,<input id="mado" type="text" value="I'm a ..." data-level="foo" />
可以使用 $("#mado").attr("data-level"); 获取值,
也可以使用 $("#mado").data("level"); 获取值,此时的参数名称,可以去掉“data-”,jQuery 会自动识别。
data()方法的底层解析过程,实际如下:
可以使用 jQuery.data() 或者 $.data()方法保存一些全局的缓存数据,供后期使用。
例如,$.data('daji', ['a', 'b', 'c']);
比如,要给 ID 为 book 元素保存一个缓存值,那么可以如下:
$.data(document.getElementById('book'), 'price', 10);
如果要获取 book 元素的值,则:
$("#book").data('price');
data()的相关方法如下,
jQuery.hasData()
检测元素的标签中是否定义了 “data-*” 属性? 或者是否通过 data() 方法给元素对象设置过自定义数据?