<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-3.7.1.min.js"></script>
<style>
div{
background-color: purple;
width: 200px;
height: 200px;
color:white;
position:relative;
}
button{
margin-top: 10px;
}
</style>
</head>
<body>
<div class="t1">Hello!</div>
<button class="show">显示</button>
<button class="hide">隐藏</button>
<button class="showHide">显示/隐藏</button>
<button class="fadeIn">淡入</button>
<button class="fadeOut">淡出</button>
<button class="fadeToggle">淡入/淡出</button>
<button class="fadeTo">淡入/淡出 透明度</button>
<button class="slideDown">下滑</button>
<button class="slideUp">上滑</button>
<button class="slideToggle">上滑/下滑</button>
<button class="animation">动画队列</button>
<button class="actionLinks">方法链接</button>
<button class="delay">延迟动画2000ms</button>
<button class="stop">停止</button>
<button class="reset">复位</button>
<script>
$(function(){
$('.show').click(function(){
$('.t1').show();
})
$('.hide').click(function(){
$('.t1').hide();
})
$('.showHide').click(function(){
$('.t1').toggle();
})
$('.fadeToggle').click(function(){
$('.t1').fadeToggle(1000);
})
$('.fadeIn').click(function(){
$('.t1').fadeIn(1000);
})
$('.fadeOut').click(function(){
$('.t1').fadeOut(1000);
})
$('.fadeTo').click(function(){
$('.t1').fadeTo(1000,0.5);
})
$('.slideDown').click(function(){
$('.t1').slideDown(1000);
})
$('.slideUp').click(function(){
$('.t1').slideUp(1000);
})
$('.slideToggle').click(function(){
$('.t1').slideToggle(1000);
})
$('.animation').click(function(){
$('.t1').animate({
opacity:0.25
},1000);
$('.t1').animate({
top:'+=100',
opacity:1
},1000);
$('.t1').animate({
right:'-=100',
opacity:1
},1000);
$('.t1').animate({
top:'-=100',
opacity:1
},1000);
$('.t1').animate({
right:'+=100',
opacity:1
},1000);
})
$('.actionLinks').click(function(){
$('.t1').animate({
opacity:0.25
},1000)
.animate({
opacity:1
},1000)
.animate({
left:'+=100'
},1000);
})
$('.stop').click(function(){
$('.t1').stop(true);
})
$('.reset').click(function(){
$('.t1').css({
top:'0px',
left:'0px',
})
})
$('.delay').click(function(){
$('.t1').animate({
width:'400px',
height:'400px'
},2000)
})
})
</script>
</body>
</html>
练习 2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-3.7.1.min.js"></script>
<style>
div{
background-color: purple;
width: 200px;
height: 200px;
color:white;
position:relative;
border:2px solid red;
margin-top: 10px;
}
button{
margin-top: 10px;
}
.style01{
background-color: aqua;
}
.style02{
width: 600px;
}
</style>
</head>
<body>
<div class="t1">
<h1 id="text">滚滚长江东流水</h1>
<input id="inputValue"/>
</div>
<button class="getValue">getValue</button>
<button class="getText">getText</button>
<button class="setText">setText</button>
<button class="getHtml">getHtml</button>
<button class="setAttr">setAttr</button>
<button class="setCss">setCss</button>
<button class="prepend">prepend</button>
<button class="append">append</button>
<button class="addAfter">addAfter</button>
<button class="addBefore">addBefore</button>
<button class="remove">remove</button>
<button class="empty">empty</button>
<button class="rmAttr">rmAttr</button>
<button class="addClass">addClass</button>
<button class="removeClass">removeClass</button>
<button class="toggleClass">add/removeClass</button>
<button class="getSize">getSize</button>
<script>
$(function(){
$('.getValue').click(function(){
let inputVal=$('#inputValue').val();
alert(inputVal)
})
$('.getText').click(function(){
let getText=$('#text').text();
alert(getText)
})
$('.setText').click(function(){
$('#text').text('滚滚长江');
})
$('.getHtml').click(function(){
let getHtml=$('.t1').html();
alert(getHtml)
})
$('.setAttr').click(function(){
$('#inputValue').attr('value','设置的值');
})
$('.setCss').click(function(){
$('.t1').css({
width:'300',
background:'red'
});
})
$('.prepend').click(function(){
$('.t1').prepend('add')
})
$('.append').click(function(){
$('.t1').append('end')
})
$('.addAfter').click(function(){
$('.t1').after('after')
})
$('.addBefore').click(function(){
$('.t1').before('before')
})
$('.remove').click(function(){
$('#text').remove()
})
$('.empty').click(function(){
$('.t1').empty()
})
$('.rmAttr').click(function(){
$('#inputValue').removeAttr('value')
})
$('.addClass').click(function(){
$('.t1').addClass('style01 style02')
})
$('.removeClass').click(function(){
$('.t1').removeClass('style01')
})
$('.toggleClass').click(function(){
$('.t1').toggleClass('style01 style02')
})
$('.getSize').click(function(){
let size='width：'+$('.t1').width();
size+='\n height：'+$('.t1').height();
size+='\n innerHeight ：'+$('.t1').innerHeight();
size+='\n innerWidth：'+$('.t1').innerWidth();
size+='\n outerWidth：'+$('.t1').outerWidth();
size+='\n outerHeight：'+$('.t1').outerHeight();
alert(size)
})
})
</script>
</body>
</html>
