<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="bootstrap-3.3.7-dist/js/jquery-3.4.1.js"></script>
</head>
<style>
</style>
<body>
<div id="one" style="width: 300px;height: 300px">1</div>
<div id="tow">
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
</div>
<div id="san">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</div>
<button id="btn">点击</button>
<div class="box" style="width: 300px;height: 300px;background: black;position: relative">1</div>
<script>
var box=document.getElementsByClassName('box');
$(function () {
$('#one').css({
background:'red',
})
});
$(function () {
$('p').text("我是子元素")
$('p')[1].style.cssText=('background:orange')
});
$(function () {
$('#btn').click(function () {
$(box).animate({
left:'500px',
})
});
});
$('#tow').on("click","p",function(){
// 切换li列表样式
$(this).addClass("active");
$(this).siblings().removeClass("active");
// 获取当前点击li 的下标
let index = $(this).index() + 1;
console.log(index); });
$(function () {
$('#san').children('li:last-child').remove();
})
</script>
</body>
</html>
09day作业
最新推荐文章于 2022-03-25 11:12:00 发布