jQuery事件-div的显示隐藏及鼠标的移入移出

最新推荐文章于 2023-06-15 17:03:12 发布

刘彦民

最新推荐文章于 2023-06-15 17:03:12 发布

阅读量1.3w

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/u014740338/article/details/42845823

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery事件-div的显示隐藏及鼠标的移入移出</title>
<style>
.header{
	width:302px;
	height:40px;
	background:green;
	font-size:20px;
	margin-bottom: 0px;
}
.content{
	width:300px;
	border:1px solid #333;
	background:#CCC;
	display: none;
	margin-top:0px;
}
</style>
</head>
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript">
	$(function (){
		//显示隐藏
		$(".header").click(function (){
			var flag = $(".content").is(":hidden");
			if(flag){
				$(".content").show();
			}else{
				$(".content").hide();
			}
		});
		
		/*
		//使用bind的绑定事件,跟上上面的效果是一样的
		$(".header").bind("click", function (){
			var flag = $(".content").is(":hidden");
			if(flag){
				$(".content").show();
			}else{
				$(".content").hide();
			}
		});
		*/
		/*
		//鼠标的移入移出
		$(".header").mouseover(function (){
			$(".content").show();
		}).mouseout(function (){
			$(".content").hide();
		});
		*/
		/*
		//合成事件 hover()
		$(".header").hover(function (){
			$(".content").show();
		},function (){
			$(".content").hide();
		});
		*/
		
	});
</script>
<body>
	<h5 class="header" align="center">什么是jQuery？</h5>
	<div class="content">
		Jquery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ，
		它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），
		jQuery2.0及后续版本将不再支持IE6/7/8浏览器。
		jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，
		并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，
		而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。
		jQuery能够使用户的html页面保持代码和html内容分离，也就是说，
		不用再在html里面插入一堆js来调用命令了，只需要定义id即可。
	</div>
</body>
</html>

刘彦民

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
jQuery事件-div的显示隐藏及鼠标的移入移出

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;&lt;html&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; cha
复制链接

扫一扫