4.20作业--jQuery
姬昀
1.使用jquery修改div元素的背景色(随意颜色)
2.使用jquery修改div的子元素p的内容为"我是子元素"
3.使用jquery修改第二个p元素的背景色为"orange"
4.使用jquery克隆方法.请克隆p元素并且修改"克隆的p元素"内容为"我是克隆体"，并添加到"被克隆p元素"的后面
5.删除列表元素中最后一个li元素
<!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>作业</title>
<style>
div {
width: 200px;
height: 210px;
background-color: aqua;
margin: auto;
margin-top: 20px;
text-align: center;
}
button {
background-color: aqua;
}
</style>
</head>
<body>
<button id="change1">点击改变背景颜色</button>
<button id="change2">点击修改子元素内容</button>
<button id="change3">点击修改p元素背景</button>
<button id="cv">点击克隆p元素</button>
<button id="del">点击删除最后的li元素</button>
<div>
<p>关关雎鸠，在河之洲。</p>
<p>窈窕淑女，君子好逑。</p>
<p>参差荇菜，左右流之。</p>
<p>窈窕淑女，寤寐求之。</p>
<p>求之不得，寤寐思服。</p>
<p>悠哉悠哉，辗转反侧。</p>
<ul>
<li>《西游记》</li>
<li>《红楼梦》</li>
<li>《水浒传》</li>
<li>《三国演义》</li>
<li>《金瓶梅》</li>
</ul>
</div>
<script src="D:/web/study/day07/js/jquery-3.6.0.min.js"></script>
<script>
$("#change1").click(function () {
$("div").css("background-color", "red");
});
$("#change2").click(function () {
var str = "我是子元素";
$("p").text(str);
});
$("#change3").click(function () {
$("p").eq(1).css("background-color", "orange");
});
$("#cv").click(function () {
var c = $("p:first").clone().text("我是克隆体")
$("p:first").after(c);
});
$("#del").click(function () {
$("li").last().remove();
// var arr = $("li").siblings();
// $("li").eq(arr.length-1).remove();
});
</script>
</body>
</html>
类似资料：