jQuery事件处理

最新推荐文章于 2022-01-09 22:29:25 发布

JamesZYW

最新推荐文章于 2022-01-09 22:29:25 发布

阅读量400

点赞数

分类专栏： jQuery 文章标签： jQuery事件处理

本文链接：https://blog.csdn.net/zhanyouwen/article/details/51591290

版权

jQuery 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery事件处理</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
	$(function(){
		// 设置点击事件
		/*
		$(".title").click(function(){
			var flag = $(".content").is(":hidden");
			if(flag){
				$(".content").show();
			}else{
				$(".content").hide();
			}
		});
		*/
		// 绑定事件
		/*
		$(".title").bind("click",function(){
			var flag = $(".content").is(":hidden");
			if(flag){
				$(".content").show();
			}else{
				$(".content").hide();
			}
		});
		*/
		// 鼠标移动到title上方，content显示；鼠标移开，content隐藏
		/*
		$(".title").mouseover(function(){
			$(".content").show();
		}).mouseout(function(){
			$(".content").hide();
		});
		*/
		// hover 合成事件(mouseover:执行第一个函数,mouseout:执行第二个函数,)
		/*
		$(".title").hover(function(){
			$(".content").show();
		},function(){
			$(".content").hide();
		});
		*/
		// toggle 合成事件(鼠标点击第一次：执行第一个函数；鼠标点击第两次：执行第二个函数)
		$(".title").toggle(function(){
			$(".content").show();
		},function(){
			$(".content").hide();
		});
	});
</script>
</head>
<body>
	<br/><br/><br/><br/><br/>
	<div class="title" style=" background-color:#CCC;color:#00C; width:200px;">jQuery1.7chm手册</div>
    <hr/>
	<div class="content" style="color:#F00;width:200px; display:none;">EasyCHM非常适合个人和单位制作高压缩比的带有全文检索及高亮显示搜索结果的网页集锦、CHM帮助文件、产品说明、公司介绍、CHM电子书等等。</div>
</body>
</html>