### jQuery中DOM常见操作实例小结知识点
#### DOM属性操作
1. **设置或返回元素属性：**
- `attr(name, value|fn)`：可以用来获取或设置属性值。如果提供值，它会设置属性；如果提供函数，那么会在每个匹配元素上执行，并用返回值设置属性。
- `prop(name, value|fn)`：此方法类似于`attr()`，但在jQuery 1.6之后推荐用于处理属性，当要处理属性名是JavaScript保留字时（如`class`、`for`、`type`等），应使用`prop()`方法。
- `removeAttr(name)`：此方法用于移除一个或多个属性。可以一次性移除多个属性，只需用空格分隔属性名即可。
- `removeProp(name)`：此方法用于移除由`prop()`方法设置的属性。
2. **操作CSS类名：**
- `addClass(class|fn)`：为每个匹配的元素添加一个或多个样式类名。
- `removeClass(class|fn)`：移除所有匹配元素上的一个或多个样式类名。
- `toggleClass(class|state, switch)`：当指定的样式类名存在时删除它，不存在时添加它。如果提供了一个布尔值参数，那么只添加或删除样式类名，而不考虑它们当前是否存在。
#### DOM文档操作
1. **添加元素：**
- `append(content|fn)`：向每个匹配元素的内部末尾追加内容。
- `prepend(content|fn)`：向每个匹配元素的内部开始位置追加内容。
- `appendTo(selector)`：将所有匹配的元素追加到另一个、指定的元素集合中的每个元素的末尾。
- `prependTo(selector)`：将所有匹配的元素插入到另一个、指定的元素集合中的每个元素的开始位置。
2. **删除元素：**
- `remove([selector])`：移除所有匹配的元素集合中的元素。
- `detach([selector])`：此方法与`remove()`类似，但`detach()`保留了所有绑定的事件、附加的数据等。
- `empty()`：移除集合中每个元素的所有子节点。
3. **替换元素：**
- `replaceWith(content|fn)`：将所有匹配的元素替换成指定的HTML或元素。
- `replaceAll(selector)`：用匹配的元素替换掉所有 selector 指定的元素。
#### DOM样式操作
1. **操作方法：**
- `css(property, value|fn)`：此方法用于设置或返回样式属性。如果提供值，则设置；如果提供函数，则返回处理后的值。
- `height([value])`：获取或设置匹配元素的高度。
- `width([value])`：获取或设置匹配元素的宽度。
- `innerHeight()`, `innerWidth()`：获取或设置匹配元素的内部高度或宽度。
- `outerHeight([includeMargin])`, `outerWidth([includeMargin])`：获取或设置匹配元素的外部高度或宽度（包括边框和可选的外边距）。
#### DOM事件操作
1. **事件绑定方法：**
- `on(events, data, handler)`：这是jQuery中绑定事件的基本方法。可以一次性绑定多个事件处理器，也可以传递额外的数据到事件处理器。
以上总结的知识点涵盖了jQuery中DOM操作的基本方法和技巧，通过实例演示了如何使用这些方法来完成具体的DOM操作任务。这些操作对于进行Web前端开发的人员来说至关重要，因为它们可以帮助开发者高效地对网页内容进行动态更改，以及响应用户的交互。在实际开发过程中，合理的使用jQuery DOM操作可以提高网页的交互性能和用户体验。
