jQuery in action 3rd - Working with properties, attributes, and data

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() 方法给元素对象设置过自定义数据？