jquery的追加元素和子元素选择器_jq添加元素子类-CSDN博客

本文链接：https://blog.csdn.net/m0_59776219/article/details/119751390

这篇博客通过一个实例展示了如何使用jQuery进行DOM元素的动态操作，包括追加元素、选择特定子元素、删除元素、清空元素内容、添加和删除样式以及在元素前后插入新元素。主要涉及jQuery的选择器、DOM操作和事件处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-3.2.1.min.js"></script>
</head>
<style>
.fire{
background: red;
}
</style>
<body>
<ul>
<li>大娃</li>
<li>二娃</li>
<li>三娃</li>
<li class="fire">四娃</li>
<li>五娃</li>
<li>六娃</li>
<li>七娃</li>
</ul>
<input type="button" value="点击一下追加一个娃娃" id="appendBtn">
<input type="button" value="子元素选择器之查找第几个儿子，类似eq" id="childBtn">
<input type="button" value="删除元素" id="delBtn">
<input type="button" value="清空标签下的所有元素" id="emptyBtn">
<input type="button" value="给四娃添加一个背景色" id="cssBtn">
<input type="button" value="给四娃删除一个背景色" id="delcssBtn">
<input type="button" value="给五娃前加一个孙悟空" id="beforeBtn">
<input type="button" value="给五娃后加一个孙悟空" id="afterBtn">
<script>
$(function() {
//追加娃娃
$("#appendBtn").click(function(){
//第一步，构建一个jquery dom元素
var liDom = $("<li>娃娃</li>"); //这叫做构建jquery的dom元素
// $("ul").append(liDom); //每次追加就在末尾增加
// liDom.appendTo("ul"); //追加
// $("ul").prepend(liDom); //前面追加
liDom.prependTo("ul"); //前面追加

});
//子元素选择器之查找第几个儿子，类似eq
$('#childBtn').click(function() {
//获取第一个li元素
console.log($("ul li:eq(0)"));
console.log($("ul li:first-child"));
console.log($("ul li:first"));
//获取最后一个元素
console.log($("ul li:last-child"));
console.log($("ul li:last"));
//获取指定元素
console.log("------------------------");
console.log($("ul li:eq(2)"));
console.log($("ul li:nth-child(1)")); //注意nth是从1开始
});

//删除一个元素
$('#delBtn').click(function(){
//比如删除第一个元素
$("ul li:first").remove();
// $("ul li:eq(2)").remove();
});

//清空一个元素
$('#emptyBtn').click(function(){
//比如删除第一个元素
$("ul").empty();

});

//给元素加属性
$('#cssBtn').click(function(){
$("ul li:eq(3)").addClass("fire");
});

//删除一个属性
$('#delcssBtn').click(function(){
$("ul li:eq(3)").removeClass("fire");
});

//给指定元素前面加入元素
$('#beforeBtn').click(function(){
$("ul li:eq(4)").before($("<li>孙悟空</li>"));
});

//给指定元素后加入元素
$('#afterBtn').click(function(){
$("ul li:eq(4)").after($("<li>孙悟空</li>"));
});
})
</script>
</body>
</html>