目录
①使用jQuery操作CSS样式——css()、 addClass()、 removeClass()、 toggleClass()
②使用jQuery操作文本与属性值内容——html()、 text()、 val()
③使用jQuery操作DOM节点——查找、创建、插入、删除、替换、复制和遍历
⑤使用jQuery遍历DOM节点——遍历子元素、遍历同辈元素和遍历前辈元素
1、DOM操作分类
DOM操作分为三类：
- DOM Core：任何一种支持DOM的编程语言都可以使用它，如getElementById()
- HTML-DOM：用于处理HTML文档，如document.forms
- CSS-DOM：用于操作CSS，如element.style.color="green"
JavaScript用于对(x)html文档进行操作，它对这三类DOM操作都提供了支持
2、jQuery中的DOM操作
jQuery对JavaScript中的DOM操作进行了封装，使用起来也更简便
jQuery中的DOM操作可分为：
- 样式操作
- 内容及Value属性值操作
- 节点操作
- 节点属性操作
- 节点遍历
- CSS-DOM操作
①使用jQuery操作CSS样式——css()、 addClass()、 removeClass()、 toggleClass()
①使用css()为指定的元素设置样式值
②追加和移除样式
addClass(class)或addClass(class1 class2 … classN);//追加样式
removeClass(“style2 ”)或removeClass("style1 style2 ");//移除样式
③切换样式：toggleClass()模拟了addClass()与removeClass()实现样式切换的过程
toggleClass(class);
②使用jQuery操作文本与属性值内容——html()、 text()、 val()
①HTML代码操作：html()可以对HTML代码进行操作，类似于JS中的innerHTML
②文本操作：text()可以获取或设置元素的文本内容
html()和text()的区别
| 语法 | 参数 | 功能 |
| html() | 无参数 | 用于获取第一个匹配元素的HTML内容或文本内容 |
| html(content) | content参数为元素的HTML内容 | 用于设置所有匹配元素的HTML内容或文本内容 |
| text() | 无参数 | 用于获取所有匹配元素的文本内容 |
| text (content) | content参数为元素的文本内容 | 用于设置所有匹配元素的文本内容 |
③Value值操作：val()可以获取或设置元素的value属性值
③使用jQuery操作DOM节点——查找、创建、插入、删除、替换、复制和遍历
jQuery中节点操作主要分为：
- 查找节点——利用选择器和工厂函数
- 创建节点
- 插入节点
- 删除节点
- 替换节点
- 复制节点
①创建节点元素
工厂函数$()用于获取或创建节点
- $(selector)：通过选择器获取节点
- $(element)：把DOM节点转化成jQuery节点
- $(html)：使用HTML字符串创建jQuery节点
②插入子节点：元素内部插入子节点
| 语法 | 功能 |
| append(content) | $(A).append(B)表示将B追加到A中 如：$("ul").append($newNode1); |
| appendTo(content) | $(A).appendTo(B)表示把A追加到B中 如：$newNode1.appendTo("ul"); |
| prepend(content) | $(A). prepend (B)表示将B前置插入到A中 如：$("ul"). prepend ($newNode1); |
| prependTo(content) | $(A). prependTo (B)表示将A前置插入到B中 如：$newNode1. prependTo ("ul"); |
③插入同辈节点：元素外部插入同辈节点
| 语法 | 功能 |
| after(content) | $(A).after (B)表示将B插入到A之后 如：$("ul").after($newNode1); |
| insertAfter(content) | $(A). insertAfter (B)表示将A插入到B之后 如：$newNode1.insertAfter("ul"); |
| before(content) | $(A). before (B)表示将B插入至A之前 如：$("ul").before($newNode1); |
| insertBefore(content) | $(A). insertBefore (B)表示将A插入到B之前 如：$newNode1.insertBefore("ul"); |
④删除节点
jQuery提供了三种删除节点的方法
- remove()：删除整个节点
- detach()：删除整个节点，保留元素的绑定事件、附加的数据
- empty()：清空节点内容
⑤替换节点：replaceWith()和replaceAll()用于替换某个节点
⑥复制节点：clone()用于复制某个节点
可以使用clone()实现输出DOM元素本身的HTML
$("<div></div>").append($(DOM元素).clone()).html();
④节点属性操作：attr() 、removeAttr()
获取与设置节点属性
①attr()用来获取与设置元素属性
②removeAttr()用来删除元素的属性
⑤使用jQuery遍历DOM节点——遍历子元素、遍历同辈元素和遍历前辈元素
①遍历子元素：children()方法可以用来获取元素的所有子元素
②遍历同辈元素：jQuery可以获取紧邻其后、紧邻其前和位于该元素前与后的所有同辈元素
| 语法 | 功能 |
| next([expr]) | 用于获取紧邻匹配元素之后的元素， 如：$("li:eq(1)").next().css("background-color","#F06"); |
| prev([expr]) | 用于获取紧邻匹配元素之前的元素， 如：$("li:eq(1)").prev().css("background-color","#F06"); |
| slibings([expr]) | 用于获取位于匹配元素前面和后面的所有同辈元素， 如：$("li:eq(1)").siblings().css("background-color","#F06"); |
③遍历前辈元素：
jQuery中可以遍历前辈元素，方法如下：
- parent()：获取元素的父级元素
- parents()：元素元素的祖先元素
3、使用jQuery操作CSS-DOM
除css()外，还有获取和设置元素高度、宽度、相对位置等的样式操作方法
| 语法 | 功能 |
| css() | 设置或返回匹配元素的样式属性 |
| height([value]) | 设置或返回匹配元素的高度 |
| width([value]) | 设置或返回匹配元素的宽度 |
| offset([value]) | 返回以像素为单位的top和left坐标。此方法仅对可见元素有效 |