C.5　DOM 操作方法

浏览 122 扫码分享打印 2019-09-22 15:14:13

C.5　DOM 操作方法

C.5　DOM 操作方法

第5章详细介绍了DOM操作方法。

C.5.1　特性与属性

表　C-21

DOM操作方法	说　　明
`.attr(key)`	取得特性`key`的值
`.attr(key, value)`	设置特性`key`的值为`value`
`.attr(key, fn)`	设置特性`key`的值为`fn`（基于每个匹配的元素单独调用）返回的结果
`.attr(obj)`	根据传入的键-值对参数设置属性的值
`.removeAttr(key)`	删除特性`key`
`.prop(key)`	取得属性`key`的值
`.prop(key,value)`	设置属性`key`的值为`value`
`.prop(key,fn)`	将设置属性`key`的值为`fn`（基于每个匹配的元素单独调用）返回的结果
`.prop(obj)`	设置属性值，以键值对形式传入
`.removeProp(key)`	删除属性`key`
`.addClass(class)`	为每个匹配的元素添加传入的类
`.removeClass(class)`	从每个匹配的元素中删除传入的类
`.toggleClass(class)`	（针对每个匹配的元素）如果传入的类存在则删除该类，否则添加该类
`.hasClass(class)`	如果匹配的元素中至少有一个包含传入的类，则返回`true`
`.val()`	取得第一个匹配元素的`value`属性的值
`.val(value)`	设置每个匹配元素的`value`属性的值为传入的`value`

C.5.2　内容

表　C-22

DOM操作方法	说　　明
`.html()`	取得第一个匹配元素的`HTML`内容
`.html(value)`	将每个匹配元素的`HTML`内容设置为传入的`value`
`.text()`	取得所有匹配元素的文本内容，返回一个字符串
`.text(value)`	设置每个匹配元素的文本内容为传入的`value`

C.5.3　CSS

表　C-23

DOM操作方法	说　　明
`.css(key)`	取得`CSS`属性`key`的值
`.css(key, value)`	设置`CSS`属性`key`的值为传入的`value`
`.css(obj)`	根据传入的键-值对参数设置`CSS`属性的值

C.5.4　尺寸

表　C-24

DOM操作方法	说　　明
`.offset()`	取得第一个匹配元素相对于视口的上、左坐标值（单位：像素）
`.position()`	取得第一个匹配元素相对于`.offsetParent()`返回元素的上、左坐标值（单位：像素）
`.scrollTop()`	取得第一个匹配元素的垂直滚动位置
`.scrollTop(value)`	设置每个匹配元素的垂直滚动位置为传入的`value`
`.scrollLeft()`	取得第一个匹配元素的水平滚动位置
`.scrollLeft(value)`	设置每个匹配元素的水平滚动位置为传入的`value`
`.height()`	取得第一个匹配元素的高度
`.height(value)`	设置每个匹配元素的高度为传入的`value`
`.width()`	取得第一个匹配元素的宽度
`.width(value)`	设置每个匹配元素的宽度为传入的`value`
`.innerHeight()`	取得第一个匹配元素的包含内边距但不包含边框的高度
`.innerWidth()`	取得第一个匹配元素的包含内边距但不包含边框的宽度
`.outerHeight(includeMargin)`	取得第一个匹配元素的包含内边距、边框及可选的外边距的高度
`.outerWidth(includeMargin)`	取得第一个匹配元素的包含内边距、边框及可选的外边距的宽度

C.5.5　插入

表　C-25

DOM操作方法	说　　明
`.append(content)`	在每个匹配元素内部的末尾插入`content`
`.appendTo(selector)`	将匹配的元素插入到`selector`选择符匹配的元素内部的末尾
`.prepend(content)`	在每个匹配元素内部的开头插入`content`
`.prependTo(selector)`	将匹配的元素插入到`selector`选择符匹配的元素内部的开头
`.after(content)`	在每个匹配元素的后面插入`content`
`.insertAfter(selector)`	将匹配的元素插入到`selector`选择符匹配的元素的后面
`.before(content)`	在每个匹配元素的前面插入`content`
`.insertBefore(selector)`	将匹配的元素插入到`selector`选择符匹配的元素的前面
`.wrap(content)`	将匹配的每个元素包装在`content`中
`.wrapAll(content)`	将匹配的每个元素作为一个单元包装在`content`中
`.wrapInner(content)`	将匹配的每个元素内部的内容包装在`content`中

C.5.6　替换

表　C-26

DOM操作方法	说　　明
`.replaceWith(content)`	将匹配的元素替换为`content`
`.replaceAll(selector)`	将`selector`选择符匹配的元素替换为匹配的元素

C.5.7　删除

表　C-27

DOM操作方法	说　　明
`.empty()`	删除每个匹配元素的子节点
`.remove([selector])`	从DOM中删除匹配的节点，也可以通过`selector`选择符筛选
`.detach([selector])`	从DOM中删除匹配的节点，也可以通过`selector`选择符筛选，但保留jQuery给它们添加的数据
`.unwrap()`	删除元素的父元素

C.5.8　复制

表　C-28

DOM操作方法	说　　明
`.clone([withHandlers],[deepWithHandlers])`	返回所有匹配元素的副本，也可以复制事件处理程序

C.5.9　数据

表　C-29

DOM操作方法	说　　明
`.data(key)`	取得与第一个匹配元素关联的`key`键的数据项
`.data(key, value)`	设置与每个匹配元素关联的`key`键的数据项为`value`
`.removeData(key)`	移除与每个匹配元素关联的`key`键的数据项

本文档使用努力网构建