<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--导入jquery文件-->
<script src="jquery-3.6.js"></script>
<title>操作综合练习题</title>
<style>
*{
margin: 0px;
padding: 0px;
background: white;
font-size: 30px;
font-weight: bold;
text-shadow: 5px 5px 5px red;
}
button{
background: #FF0000;
color: white;
font-weight: bolder;
margin: auto;
padding: 2px;
border: solid 1px dodgerblue;
height: 80px;
width: 300px;
}
div{
height: 100px;
width: 400px;
background: pink;
color:yellow ;
text-shadow: 6px 5px 5px red;
float: right;
padding: 4px;
}
article{
padding: 3px;
}
div1{
height: 200px;
width: 200px;
background-color: lightblue;
}
div2{
margin: auto;
float: left;
}
/*样式内容*/
</style>
</head>
<body>
<div style="background-color: #e5eecc;margin: auto">
<div>Happy birthday</div>
<div>中文:生日快乐</div>
<div>Happy birthday</div>
<div>Happy birthday</div>
<div>Happy birthday</div>
<div>中文:生日快乐</div>
<div>Happy birthday</div>
<div>Happy birthday to you me </div>
<div>笑一笑是年少</div>
<div>想一想今天是多少号</div>
<div1>Hello Wworld</div1>
<div1>想一想今天是多少号</div1>
</div>
<br>
<div2 style="margin: auto ; height: 200px;width: 230px" >
<button>设置单样式</button>
<button>设置多样式</button>
<button>淡入fadeIn</button>
<button>淡出fadeOut</button>
<button>切换淡入fadeToggle/淡出</button>
<button>向上slideUp</button>
<button>向下slideDown</button>
<button>切换向上/向下slideDown/Up</button>
<button>隐藏hide(4000)</button>
<button>显示show(4000)</button>
<button>显示/隐藏show/hide</button>
<button>增加类</button>
<button>删除类</button>
<button>切换类</button>
</div2>
<!--样式操作题-->
<script>
$(function () {
$('button').eq(0).click(function () {
$('div').css('width',400);
});
$('button').eq(1).click(function () {
$('div').css({
width: 500,
color: 'red',
height: 200,
backgroundColor: 'yellow',
fontSize: 46,
});
$('button').eq(2).click(function () {
$('div').fadeIn(2000)
});
$('button').eq(3).click(function () {
$('div').fadeOut(3000)
});
$('button').eq(4).click(function () {
$('div').fadeToggle(3000)
});
$('button').eq(5).click(function () {
$('div').slideUp(3000);
});
$('button').eq(6).click(function () {
$('div').slideDown(3000);
});
$('button').eq(7).click(function () {
$('div').slideToggle(4000);
});
$('button').eq(8).click(function () {
$('div').hide(4000);
});
$('button').eq(9).click(function () {
$('div').show()
});
$('button').eq(10).click(function () {
$('div').toggle(3000);
});
})
})
</script>
</body>
</html>
