jquery增删改查
jQuery 增删改查操作指南
增加元素
使用 append()、prepend()、after() 或 before() 方法动态添加元素到 DOM 中。
// 在元素内部末尾添加
$("#container").append("<div>新内容</div>");
// 在元素内部开头添加
$("#container").prepend("<div>新内容</div>");
// 在元素之后添加
$("#target").after("<div>同级新元素</div>");
// 在元素之前添加
$("#target").before("<div>同级新元素</div>");删除元素
使用 remove() 或 empty() 方法移除元素或清空内容。
// 移除元素及其子元素
$("#element").remove();
// 清空元素内容（保留元素本身）
$("#element").empty();修改元素
通过 text()、html()、attr() 或 css() 方法修改元素属性或内容。
// 修改文本内容
$("#element").text("新文本");
// 修改HTML内容
$("#element").html("<strong>加粗文本</strong>");
// 修改属性
$("#image").attr("src", "new-image.jpg");
// 修改CSS样式
$("#box").css("background-color", "red");查询元素
使用选择器（如 $("#id")、$(".class")）获取元素，并通过方法操作或获取数据。
// 获取文本内容
var text = $("#element").text();
// 获取HTML内容
var html = $("#element").html();
// 获取属性值
var src = $("#image").attr("src");
// 获取CSS属性值
var color = $("#box").css("color");动态事件绑定
使用 on() 方法为动态添加的元素绑定事件。
// 静态元素事件绑定
$("#staticElement").on("click", function() {
alert("点击事件");
});
// 动态元素事件委托（适用于未来添加的元素）
$("#parentContainer").on("click", ".dynamicElement", function() {
alert("动态元素点击事件");
});表单操作
通过 val() 方法获取或设置表单元素的值。
// 获取输入框的值
var inputValue = $("#inputField").val();
// 设置输入框的值
$("#inputField").val("新值");
// 获取下拉框选中值
var selectedOption = $("#dropdown").val();遍历元素
使用 each() 方法遍历匹配的元素集合。
$(".items").each(function(index) {
console.log("索引: " + index + ", 内容: " + $(this).text());
});
