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.简单的动画函数 简单的动画函数 input{ border:1px solid #060; font-size:14px; padding:4px; ...
  • linhaiyun_ytdx
  • linhaiyun_ytdx
  • 2016年11月10日 12:06
  • 287

JQuery插件写法练习Demo

做项目都是用的别人写的插件,然后还瞎几把改,看过这篇文章后,终于自己动手理解了一把。 GO -> JQuery插件写法 (f...
  • chanzig
  • chanzig
  • 2015年06月07日 12:56
  • 597

JQuery小练习

1、加法计算器。两个文本框中输入数字,点击【=】按钮将相加的结果放到第三个文本框中。             $(function () {             $('#btn').c...
  • qizhichao110
  • qizhichao110
  • 2015年01月23日 00:45
  • 6355

JQuery编程demo练习

JQuery练习demo:     编写程序,实现:     1、选中其中一列的复选框时,该复选框所在行的背景色高亮显示(黄色)。     2、取消选中复选框时,所在行的背景色恢复。 ...
  • xie_xiansheng
  • xie_xiansheng
  • 2016年03月13日 17:50
  • 2164

jQuery练习实例(四)

最近写的jquery实例--jQuery图片九宫格样式鼠标悬停图片滑动切换效果          有兴趣的同学可以参考一下,这幅效果,个人觉得挺不错的 Insert title he...
  • u010363836
  • u010363836
  • 2013年10月10日 09:15
  • 1757

几个简单的jquery知识点练习

三、jquery对象和dom对象             //页面的基本元素加载后         $(function () {             var btnObjDom ...
  • qizhichao110
  • qizhichao110
  • 2015年01月21日 20:52
  • 2101

jquery实战训练

JQuery实战训练,1.5秒返回页面,2.鼠标滑过显示内容,3.轮展图,4.返回顶部,5.右击显示菜单,6.内容编辑,7.购物车结算,实时更新。...
  • qq_19558705
  • qq_19558705
  • 2015年11月15日 20:24
  • 12805

jQuery练习5——val()练习

XXX
  • cckevincyh
  • cckevincyh
  • 2016年11月14日 20:33
  • 486

20170726 jQuery练习题 表格操作练习题

html lang="en"> head> meta charset="UTF-8"> title>title> script src="../js/jquery...
  • xcwc1995
  • xcwc1995
  • 2017年07月26日 18:40
  • 151

JQuery 常见选择器详解练习1

1.常见基本选择器代码 Insert title here $(function(){ //alert($("#ID").val());//查找ID并显示其内容 //ale...
  • linhaiyun_ytdx
  • linhaiyun_ytdx
  • 2016年11月06日 12:22
  • 356
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery事件练习
举报原因:
原因补充:

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