<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>修改div背景色</title>
<script src="jquery/jquery-3.4.1.min.js"></script>
<style>
#one{
width: 300px;
height: 100px;
border: 1px solid red;
}
#two{
margin-top: 30px;
width: 300px;
height: 200px;
border: 1px solid red;
}
#three{
margin-top: 30px;
width: 300px;
height: 200px;
border: 1px solid lightcoral;
}
</style>
<script type="text/javascript">
$(function () {
$("#one").click(function () {
$("#one").css("background-color","blue");
});
});
$(function () {
$("#btnAddp").click(function () {
$("#p1").text("我是一个P标签");
});
});
$(function () {
$("#btnBianse").click(function () {
$('P:eq(1)').css("background-color","blue");
});
});
</script>
</head>
<body>
<div id="one">第一题第一题</div>
<div id="two">
<p id="p1">第二题</p>
<p style="width: 200px;height: 40px;background-color: burlywood;">第三题变色1</p>
<p style="width: 200px;height: 40px;background-color: palegreen;">第三题变色2</p>
<p style="width: 200px;height: 40px;background-color: lightslategrey;">第三题变色3</p>
</div>
<button id="btnAddp" style="width: 150px;height: 50px;background-color: lightcoral;margin-top: 20px;"></button>
<button id="btnBianse" style="width: 150px;height: 50px;background-color: cornflowerblue;margin-top: 20px;"></button>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后三题</title>
</head>
<body>
<!--第四题-->
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
<button id="deleteBtn">点我删除最下面的li</button>
<!--第五题-->
<div>
<p>弹出下标0</p>
<p>弹出下标1</p>
<p>弹出下标2</p>
<p>弹出下标3</p>
<p>弹出下标4</p>
</div>
<!--第六题-->
<div id="Box" style="height: 100px;width: 100px;background-color: orangered;position: absolute;left: 700px"></div>
<button id="Btn" style="margin-top: 100px;">向左移动按钮</button>
<script src="jQuery/jquery-3.4.1.min.js"></script>
<script>
<!--第四题-->
$('#deleteBtn').click(function () {
$('ul li:last').remove();
});
<!--第五题-->
$('p').on('click',function () {
alert($(this).index());
});
<!--第六题-->
$('#Btn').click(function () {
$('#Box').animate({
"left":"-=500px",
});
});
</script>
</body>
</html>
116
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
