信息管理创新实践学习周记8

最新推荐文章于 2025-12-20 12:23:55 发布

原创最新推荐文章于 2025-12-20 12:23:55 发布 · 183 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #javascript #html

本文介绍了如何使用jQuery简化JavaScript编程，详细讲解了jQuery中的事件处理，包括click、dblclick、mousedown、mouseup、focus和blur事件，并给出了实际示例。同时，探讨了jQuery的各种效果，如隐藏、显示、淡入淡出和滑动效果，展示了如何通过jQuery轻松实现这些视觉变换。通过实例代码，读者可以深入理解并应用jQuery增强网页交互体验。

学习内容

本节课学习了可以极大地简化 JavaScript 编程的 jQuery
jQuery 是一个 JavaScript 库

1.jQuery 事件

包含click事件、dblclick事件、mousedown事件、mouseup事件、focus事件以及blur事件
代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
		</script>
		<script>
		$(document).ready(function(){
		  $("p").click(function(){
		    $(this).hide();
			});
		  $("p1").dblclick(function(){
		    $(this).hide();
			});
		  $("#p2").mousedown(function(){
			alert('我出现了！');
		    });
		  $("#p3").mouseup(function(){
		    alert("我消失了！");
		    });
		  $("input").focus(function(){
			$(this).css("background-color","#cccccc");
			});
		  $("input").blur(function(){
			$(this).css("background-color","#ffffff");
			});
		});
		</script>
	</head>
	<body>
		<p>点我就消失了!</p>
		<p id="p1">双击我就消失了！</p>
		<p id="p2">鼠标放在此处！</p>
		<p id="p3">鼠标离开此处！</p>
		Name: <input type="text" name="fullname"><br>
	</body>
</html>

展示：
在这里插入图片描述
点击“点我就消失了！”和“双击我就消失了！”之后，段落隐藏

当鼠标移动到“鼠标放在此处！”上方，并按下鼠标按键时，弹出窗口

当在“鼠标离开此处！”上松开鼠标按钮时，弹出窗口

当元素获得焦点时
在这里插入图片描述

2.jQuery 效果

包含隐藏和显示、淡入和淡出、向下滑动的效果
代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
		</script>
		<script>
		$(document).ready(function(){
		  $("#hide").click(function(){
		    $("#p1").hide();
		  });
		  $("#show").click(function(){
		    $("#p1").show();
		  });
		});
		</script>
		
		<script>
		$(document).ready(function(){
		  $("#button1").click(function(){
		    $("#div1").fadeIn();
		    $("#div2").fadeIn("slow");
		    $("#div3").fadeIn(3000);
		  });
		});
		</script>
		
		<script>
		$(document).ready(function(){
		  $("#button2").click(function(){
		    $("#div1").fadeOut();
		    $("#div2").fadeOut("slow");
		    $("#div3").fadeOut(3000);
		  });
		});
		</script>
		
		<script> 
		$(document).ready(function(){
		  $("#flip").click(function(){
		    $("#panel").slideDown("slow");
		  });
		});
		</script>
		
		<style type="text/css"> 
		#panel,#flip
		{
			padding:5px;
			text-align:center;
			background-color:#ffd9c2;
			border:solid 1px #ffaa7f;
		}
		#panel
		{
			padding:50px;
			display:none;
		}
		</style>	
	</head>
	<body>
		<div id="flip">点我滑下面板</div>
		<div id="panel">
			<p id="p1">我可以消失，也可以出现！</p>
			<button id="hide">隐藏</button>
			<button id="show">显示</button>
			<p>我可以变颜色！</p>
			<button id="button1">淡入</button>
			<button id="button2">淡出</button>
			<br><br>
			<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
			<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
			<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>
			</div>
	</body>
</html>