<!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>
</head>
<script src="../js/jquery-3.6.0.min.js"></script>
<style>
#d1 {
width: 100px;
height: 100px;
background-color: rgba(207, 107, 174, 0.075);
}
</style>
<body>
<button id="btn1">修改div元素背景颜色</button>
<button id="btn2">修改子元素内容</button>
<button id="btn3">修改第二个p元素背景颜色</button>
<button id="btn4">克隆p元素修改内容</button>
<button id="btn5">删除最后一个li元素</button>
<div id="d1">
<p id="p1">p1</p>
</div>
<p id="p2">p2</p>
<ul>
<li>西游记</li>
<li>三国演义</li>
<li>红楼梦</li>
</ul>
<script>
//1.使用jquery修改div元素的背景色(随意颜色)
$("#btn1").on("click", function () {
$("#d1").css("background-color", "pink")
});
// 2.使用jquery修改div的子元素p的内容为"我是子元素"
$("#btn2").on("click", function () {
$("div").children("p").text("我是子元素");
});
// 3.使用jquery修改第二个p元素的背景色为"orange"
$("#btn3").on("click", function () {
$("p").eq(1).css("background-color", "green");
});
// 4.使用jquery克隆方法.请克隆p元素并且修改"克隆的p元素"内容为"我是克隆体"，
// 并添加到"被克隆p元素"的后面
$("#btn4").on("click", function () {
$("p").clone().text("我是克隆体").insertAfter("p:last");
});
// 5.删除列表元素中最后一个li元素
$("#btn5").on("click", function () {
$("li:last").remove();
});
</script>
</body>
</html>
0
点赞
收藏
分享
2022-4-20
相关推荐
0 条评论
