要求:
**1. 使用jquery修改div元素的背景色(随意颜色)
2. 使用jquery修改div的子元素p的内容为"我是子元素"
3. 使用jquery修改第二个p元素的背景色为"orange"
4. 删除列表元素中最后一个li元素
5. 点击当前的p标签,弹出相对应的元素下标
6. 利用jquery中的animate()方法.点击id为btn的按钮,实现类名为box的元素,向左移动500px
源**代码:需要引用Jquery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery使用</title>
<script src="jquery-3.4.1.min.js"></script>
<script>
$(function () {
$('#one').children("p:first-child").html('我是子元素');
$('#one').css('background','blue');
$('#one').children("p:nth-child(2)").css('background-color','orange')
$('#one').children("li:last-child").remove();
$("#one").on("click","p",function(){
// 切换p列表样式
$(this).addClass("active");
$(this).siblings().removeClass("active");
// 获取当前点击p 的下标
let index = $(this).index() + 1;
alert(index);
});
$('#btn').click(function() {
$('.box').animate({
left: '500px'
})
})
});
</script>
</head>
<body>
<div id="one" onclick="" >我是第一个div
<p id="pTag1"></p>
<p id="pTag2">我是第二个子元素</p>
<li>我是li元素</li>
</div>
<div class="box" style="display: inline; width: 300px;height: 300px;background-color: orangered;position: relative">我是第二个div框</div>
<button id="btn" >点我移动Box</button>
</body>
</html>