Js练习

Js练习

2024 年 06 月 14 日

332 次浏览

5592字数

```
<!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>

```

Js练习