信息管理实践第八周周记

最新推荐文章于 2021-06-25 18:12:08 发布

梦瑾い

最新推荐文章于 2021-06-25 18:12:08 发布

阅读量229

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/bili_meng_jin/article/details/116274870

版权

第八周周记

知识点

第八周主要学习了JQuery的事件和触发效果。 jQuery可以极大简化JavaScript 编程，jQuery 是一个 JavaScript 库。

网页展示

JQuery事件

由于之前觉得白色底有点容易混淆文章文字和图片文字，所以这次所有网页加入了浅蓝色底色。
点击运行后：
在这里插入图片描述
点击第一行文字后：

鼠标划到第二行文字后：

在这里插入图片描述
鼠标划出第三行文字后：

JQuery效果

在这里使用方块变换的方法实现JQuery效果
初始界面：
在这里插入图片描述
点击方块后方块开始变换，变换途中截图：

变换完毕恢复原状，可再次点击
点击消失按钮后：

再次点击可以使方块重新出现

代码

JQuery事件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"> 
        <title></title> 
		<style>
		    body {background-color:lightblue;}
		</style>
        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
        <script>
            $(document).ready(function(){	
	        $("p1").click(function(){
	            $(this).hide();
				});		
	        $("p2").mouseenter(function(){
	            alert('你划过了文字');
				});		
	        $("p3").mouseleave(function(){
	            alert("你划出了文字");
	            });
			});
        </script>
    </head>
    <body>
        <p1>鼠标点击这些文字消失</p1>
		<hr> 
        <p2>鼠标划到文字显示弹窗</p2>
	    <hr>
        <p3>鼠标划出文字显示弹窗</p3>
    </body>
</html>

JQuery效果

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
		<title></title> 
		<style>
		    body {background-color:lightblue;}
		</style>
        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
        <script> 
        $(document).ready(function(){
            $("div").click(function(){
			var div=$("div");
                div.animate({height:'500px',opacity:'0.4'},"slow");
                div.animate({width:'500px',opacity:'0.8'},"slow");
                div.animate({height:'150px',opacity:'0.4'},"slow");
                div.animate({width:'150px',opacity:'0.8'},"slow");
            });
		    $("button").click(function(){
			    $("div").animate({
			      height:'toggle'
		        });
			});
		});
        </script> 
    </head>
    <body>
        <p>点击方块进行移动</p>
		<button>点击使方块消失</button>
		<hr>
        <div style="background:aliceblue;height:150px;width:150px;position:absolute;">
        </div>
    </body>
</html>