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条评论
点击登录参与评论