jquery事件练习

原创 2012年03月27日 20:12:45
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<script type="text/javascript" language="JavaScript" src="../include/jquery-1.7.1.min.js"></script>
		<script type="text/javascript" language="JavaScript">
			
			$(document).ready(function(){
				
				$("#btn0").click(function(){
					
					$("#toggl").toggle("slow");
					

				});
				
				$("#btn1").click(function(){
					
					$("#toggl").slideToggle("slow");
					
				});
				
				
				$("#btn2").click(function(){
					
					$("#toggl").fadeIn("slow");
					
				});

				$("#btn3").click(function(){
					
					$("#toggl").fadeOut("slow");
					
				});
				
				$("#btn4").hover(function(){
					
					$("#toggl").fadeOut("slow");
					
				},function(){
					
					$("#toggl").fadeIn("slow");
				});

				$("#btn5").toggle(function(){
					
					//使用toggle
					$("#toggl").toggle("slow");
					
				},function(){
					//滑动效果
					$("#toggl").slideToggle("slow");
					
				},function(){
					//淡出
					$("#toggl").fadeOut("slow");
									
				},function(){
					//淡入
					$("#toggl").fadeIn("slow");
					
				});
				

			});
			
			
		</script>
		
		
	</head>
	<body>
		
		<div id="toggl" style="width:100px; height:80px; background-color:#95b3d7"></div>
		
		<input type="button" id="btn0" value="显示/隐藏div">
		
		<input type="button" id="btn1" value="div滑动效果">
		
		<input type="button" id="btn2" value="div淡入">
		<input type="button" id="btn3" value="div淡出">
		
		<input type="button" id="btn4" value="使用hover事件执行淡入淡出">
		
		<input type="button" id="btn5" value="toggle效果集合">
		
	</body>
</html>


相关文章推荐

JQuery 事件相关内容练习1

1.$(document).ready()和window.onload方法的比较 $()和window.onload区别 /* window.onload=function(){...

jQuery-事件委托案例练习

这是一个按钮控制文字大小的案例,使用了事件委托机制。 jQuery Button and Animate *{ margin:0; padding:0; } ...

jquery事件学习练习(CRUD and 滚动公告)

learn_jQueryDemo2--查看删除修改-CRUD #table_crud { border: 1px solid #abcdef; border-collapse: c...

jquery-事件冒泡

  • 2011年07月08日 14:53
  • 1KB
  • 下载

jquery事件

  • 2012年04月27日 23:53
  • 17.56MB
  • 下载

完美实现鼠标拖拽事件,解决各种小bug,基于jquery

鼠标拖拽事件是web中使用频率极高的事件,之前写过的代码包括网上的代码,总存在各种各样的问题,包括拖拽体验差,松开鼠标后拖拽效果仍存在以及代码冗余过大等 本次我才用jQuery实现一个尽可能高效的拖拽...

jquery阻止事件冒泡

  • 2012年11月25日 12:53
  • 227KB
  • 下载

3jquery中的事件及动画

  • 2013年12月06日 14:08
  • 1.08MB
  • 下载

Jquery处理table中每行中某个td的click事件

如何相应html table中每个td的click事件呢?如果是使用Jquery的话,可以像下面这样做。 html table 截图 html table 源代码 ...

jQuery事件处理

  • 2013年04月01日 10:51
  • 2.84MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery事件练习
举报原因:
原因补充:

(最多只允许输入30个字)