2021.11.11
//Dom操作![]()
//内部插入 => 子节点
$(".append").click(function(){
//后面
$("ul").append("<li>列表 append</li>");
// $("ul").append("<li>列表 append</li>").appendTo($("ul"));
})
$(".prepend").click(function(){
//前面
$("ul").prepend("<li>列表 prepend</li>");
})
//外部插入 => 兄弟节点
//上面
$(".before").click(function(){
$("ul").before("<li>列表 before</li>");
})
//下面
$(".after").click(function(){
$("ul").before("<li>列表 after</li>");
})
//包裹 => 父节点
$(".wrap").click(function(){
$("ul").wrap("<div> style='color:red'></div>");
})
// 修改
$(".replaceWith").click(function(){
$("li:first").replaceWith("<li>列表 new</li>")
})
//删除
$(".empty").click(function(){
//清空内容
$("li:first").empty();
})
$(".remove").click(function(){
//移除元素
$("li:first").remove();
})
$(".clone").click(function(){
$("li:first").clone().appendTo($("ul"))
})
//高级事件 事件处理 事件委托
// $("ul").on("click","li",function(){
// console.log($(this).text())
// })
//多个事件
$("ul").on("click dbclick","li",function(){
console.log($(this).text())
})
//克隆
$(".clone").click(function(){
$("li:first").clone().appendTo($("ul")); //把第一个克隆到最后
})
$("li").click(function(){
console.log($(this).text());
})
$("li").on("click","li",function(){
console.log($(this).text());
})
$("li").on("click dbclick","li",function(){
console.log($(this).text());
})
})
first()
获取第一个元素
jQuery appendTo() 方法：
实例
在每个 <p> 元素的结尾插入 <span> 元素：
$("button").click(function(){
$("<span>Hello World!</span>").appendTo("p");
});
jQuery :empty 选择器：
实例
选取所有空元素：
$(":empty")
jQuery remove() 方法：
移除所有的 <p> 元素：
$("button").click(function(){
$("p").remove();
});
定义和用法
remove() 方法移除被选元素，包括所有的文本和子节点。
该方法也会移除被选元素的数据和事件。
提示：如需移除元素，但保留数据和事件，请使用 detach() 方法代替。
提示：如只需从被选元素移除内容，请使用 empty() 方法。
jQuery clone() 方法：
实例
克隆所有的 <p> 元素，并插入到 <body> 元素的结尾：
$("button").click(function(){ $("p").clone().appendTo("body"); });
定义和用法
clone() 方法生成被选元素的副本，包含子节点、文本和属性。
语法
$(selector).clone(true|false)
jQuery :last 选择器：
实例
选取最后一个 <p> 元素：
$("p:last")
定义和用法
:last 选择器选取最后一个元素。
注意：这个选择器只用于选取单个元素。使用 :last-child 选择器选取多个元素（每个父元素一个）。
最常见的用法：与其他选择器一起使用，选取指定组合中的最后一个元素（如上面的实例）。
提示：如需选取指定组合中的第一个元素，请使用 :first 选择器。
浙公网安备 33010602011771号