牛叔叔 的笔记

好好学习

2024-07-31 17:29

JQuery DOM操作文本思维导图

牛叔叔

WEB前端

(274)

(0)

收藏

JQuery的DOM(文档对象模型)操作是JQuery库的核心功能之一,它允许你以简洁的方式读取、修改、添加或删除HTML元素及其内容、属性和样式。以下是一个详细的文本思维导图,列出了JQuery中常见的DOM操作:

JQuery DOM操作
├── 读取内容
│   ├── html():获取/设置元素的HTML内容
│   ├── text():获取/设置元素的文本内容
│   ├── val():获取/设置表单字段的值
│
├── 属性操作
│   ├── attr(name|properties|key,value|fn):获取/设置元素的属性值
│   ├── removeAttr(name):移除元素的属性
│   ├── prop(name|properties|key,value|fn):获取/设置元素的属性值(对于布尔属性更有效)
│   ├── removeProp(name):移除元素的属性(不推荐,主要用于内部属性)
│   ├── data(key|key-value):获取/设置存储在元素上的数据
│   └── removeData(key):移除存储在元素上的数据
│
├── CSS类操作
│   ├── addClass(className|fn):为每个匹配的元素添加指定的类名
│   ├── removeClass(className|fn):从所有匹配的元素中删除全部或指定的类
│   ├── toggleClass(className|fn[,switch]):在匹配的元素集合中的每个元素上添加或删除一个或多个类
│   ├── hasClass(className):检查当前元素是否含有某个特定的类
│
├── CSS样式操作
│   ├── css(propertyName|properties):获取/设置匹配的元素集合中的一个或多个样式属性
│
├── DOM树操作
│   ├── append(content|fn):向每个匹配的元素内部追加内容
│   ├── prepend(content|fn):向每个匹配的元素内部前置内容
│   ├── after(content|fn):在每个匹配的元素之后插入内容
│   ├── before(content|fn):在每个匹配的元素之前插入内容
│   ├── wrap(wrappingElement):把每个匹配的元素用指定的HTML结构包裹起来
│   ├── unwrap():移除元素的父元素
│   ├── wrapAll(wrappingElement):将所有匹配的元素用单个HTML结构包裹起来
│   ├── wrapInner(wrappingElement):将每个匹配元素的子内容(inner HTML)用指定的HTML结构包裹起来
│   ├── replaceWith(content|fn):将所有匹配的元素替换成指定的HTML或DOM元素
│   ├── replaceAll(selector):用匹配的元素替换掉所有selector匹配到的元素
│   ├── empty():移除集合中每个元素内部的所有子节点(包括文本和子元素)
│   ├── remove([selector]):从DOM中移除匹配的元素及其子元素
│   ├── detach([selector]):从DOM中移除匹配的元素,但保留其在内存中的jQuery对象,以便将来使用
│
├── 遍历
│   ├── each(function(index, Element)):遍历一个jQuery对象,为每个匹配元素执行一个函数
│   ├── map(callback):将一组元素转换成其他数组(不论是否是元素数组)
│   ├── filter(selector|function(index)):筛选出与选择器或函数匹配的元素
│   ├── not(selector|elements|function(index)):从匹配的元素集合中排除某些元素
│   ├── children([selector]):获取匹配元素集合中每个元素的直接子元素
│   ├── find(selector):在匹配的元素集合中的每个元素内查找匹配的元素
│   ├── siblings([selector]):获取匹配元素集合中每个元素的兄弟元素
│   ├── closest(selector|object|elements):获取匹配元素集合中每个元素的最近的祖先元素
│
└── 尺寸和位置
    ├── width():获取匹配元素集合中第一个元素的当前计算宽度值
    ├── height():获取匹配元素集合中第一个元素的当前计算高度值
    ├── innerWidth():获取匹配元素集合中第一个元素的内部宽度(包括内边距)
    ├── innerHeight():获取匹配元素集合中第一个元素的内部高度(包括内边距)
    ├── outerWidth([margin]):获取匹配元素集合中第一个元素的外部宽度(包括边框、内边距,可选地包括外边距)
    ├── outerHeight([margin]):获取匹配元素集合中第一个元素的外部高度(包括边框、内边距,可选地包括外边距)
    ├── offset():获取匹配元素在当前视口中的相对偏移
    ├── position():获取匹配元素相对于其偏移父元素的偏移

这个文本思维导图详细地列出了JQuery中用于DOM操作的各种方法,包括读取内容、属性操作、CSS类操作、CSS样式操作、DOM树操作、遍历以及尺寸和位置相关的方法。在实际开发中,你可以根据需要选择合适的方法来操作DOM。


0条评论

点击登录参与评论