三、使用特性、属性和数据

1.导语

本节内容：

• 获取和设置元素属性
• 使用元素特性
• 在元素上存储自定义数据

2.元素的特性(Property)和属性(Attribute)是什么？

其实Attribute和Property这两个单词，翻译出来都是“属性”，《js高级程序设计》书中翻译为“特性”和“属性”，以示区别

简单理解，Attribute就是dom节点自带的属性，例如html中常用的id、class、title、align等:

<div id="div1" class="divClass" title="divTitle">

而Property是这个DOM元素作为对象，其附加的内容，例如childNodes、firstChild等：

另外，常用的Attribute，例如id、class、title等，已经被作为Property附加到DOM对象上，可以和Property一样取值和赋值。但是自定义的Attribute，就不会有这样的特殊优待，例如：

<div id="div1" class="divClass" title="divTitle" title1="divTitle1">100</div>

这个div里面的title1就不会变成Property。

即，只要是DOM标签中出现的属性（html代码），都是Attribute。然后有些常用特性（id、class、title等），会被转化为Property。可以很形象的说，这些特性/属性，是“脚踏两只船”的。

最后注意：“class”变成Property之后叫做“className”，因为“class”是ECMA的关键字。以下代码等价：

var className = div1.className;var className1 = div1.getAttribute("class");

3.操作属性

• 对属性的操作包括：获取属性值，设置属性值，删除属性

方法 描述 attr(name) 获取匹配集合中第一个元素的属性值 attr(name, value) 为jQuery对象中的所有属性设置命名的属性和值 attr(attribute) 使用传入的多个属性和值来设置元素的对应属性 removeAttr(name) 删除指定的属性，或者删除所有匹配集合元素的属性

4.操作元素特性

方法 描述 prop(name) 获取匹配集合中的的一个元素的属性值 prop(name, value) 为jQuery集合中的所有元素设置给定命名的属性和值 prop(properties) 通过给定的对象来为匹配集合中的每个元素设置特定的特性和值 removeProp(name) 删除jQuery集合中每个元素的属性

5.元素中存储自定义数据

方法 描述 data(name, value) 使用jQuery方法为集合中的所有元素添加传递的数据 data(object) 为集合中的每个元素添加键-值对对象数据 data([name]) 使用指定的名称来查询存储的数据或者HTML5 data-* 属性。如果没有指定名字，则会返回所有存储的数据 removeData() 使用指定的名称删除jQuery对象中所有元素之前存储的数据，参数可以是数组。加空格的名称，没有参数，删除所有 $.hasData(element) 确定元素是否包含相关的数据，参数是要检查的DOM元素

* data()方法不区分驼峰命名法的变量名字的大小写，与虚线和横线连接的名字一样对待
* jQuery也为jQuery对象提供了工具方法，jQuery.data()或者$.data()属于低级别的方法，因为它是一个DOM元素操作，而不是jQuery对象
* 用data()方法取值，会有很有趣的事情，与attr()相比，最主要的原因是data()先找xxx数据名，找不到再找data-xxx属性。

$.data(document.getElementById('book'), 'price', 10)

总结

本节学习了如何用jQuery操作属性和特性，以及如何在元素中存储数据。更新或者删除特性，数据和属性是非常有用的，接下我们学习如何在页面上操作DOM元素，例如调整位置，添加或者删除元素。