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
元素,例如调整位置,添加或者删除元素。