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

最新推荐文章于 2022-10-24 15:41:22 发布

RPIKACU

最新推荐文章于 2022-10-24 15:41:22 发布

阅读量416

点赞数

文章标签： jquery javascript ajax

本文链接：https://blog.csdn.net/RPIKACU/article/details/120616133

版权

	<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="js/jquery-1.8.3.min.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>

RPIKACU

关注

0
点赞
踩
2

收藏

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

<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: ..
复制链接

扫一扫