【JQuery框架】超详细DOM操作看这一篇就够了！

在jQuery中，我们可以使用各种方法来操作DOM元素，以下是一些常见的DOM操作以及它们的jQuery实现方式：

1. 创建元素：

var newElement = $("<p>Hello, World!</p>");

2. 插入元素：

// 在元素内部的末尾添加子元素
$("#parent").append(newElement);
 
// 在元素外部的之后添加兄弟元素
$("#sibling").after(newElement);
 
// 在元素外部的之前添加兄弟元素
$("#sibling").before(newElement);
 
// 替换元素
$("#oldElement").replaceWith(newElement);

3. 删除元素：

// 删除元素及其子元素
$("#elementToRemove").remove();
 
// 清空元素内部的所有子元素
$("#elementToEmpty").empty();

4. 获取/设置元素属性：

// 获取属性值
var attrValue = $("#element").attr("name");
 
// 设置属性值
$("#element").attr("name", "newName");

5. 获取/设置元素文本内容：

// 获取文本内容
var textContent = $("#element").text();
 
// 设置文本内容
$("#element").text("New Text Content");

6. 获取/设置元素值：

// 获取输入框的值
var inputValue = $("#input").val();
 
// 设置输入框的值
$("#input").val("New Input Value");

7. 获取/设置元素CSS样式：

// 获取CSS样式属性值
var colorValue = $("#element").css("color");
 
// 设置CSS样式属性值
$("#element").css("color", "blue");

8. 添加/移除元素类名：

// 添加类名
$("#element").addClass("newClass");
 
// 移除类名
$("#element").removeClass("existingClass");
 
// 切换类名
$("#element").toggleClass("toggledClass");

9. 显示/隐藏元素：

// 显示元素
$("#element").show();
 
// 隐藏元素
$("#element").hide();

10. 禁用/启用元素：

// 禁用元素
$("#element").prop("disabled", true);
 
// 启用元素
$("#element").prop("disabled", false);

这些是jQuery中操作DOM的基本方法，可以根据需要进行组合和嵌套以完成更复杂的操作。