jQuery事件和动画

1、toggle事件

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>toggle事件</title>
	<!-- toggle事件： 1.9之后的版本之后废除了该事件！
	01.是一个循环事件！
	02.显示和隐藏-->
	</head>
	<body>

	<input type="button" id="hidebtn" value="toggle循环">
	<input type="button" id="showbtn" value="toggle显示和隐藏">
	<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
	<script type="text/javascript">
	$(function(){
	//设置按钮的toggle事件
	$("input[type='button']").toggle(
	function(){ //第1次触发的事件
	$("body").css("background","red");
	},
	function(){//第2次触发的事件
	$("body").css("background","pink");
	},
	function(){//第3次触发的事件
	$("body").css("background","yellowgreen");
	}
	);
	//显示和隐藏
	$("#showbtn").click(function(){
	$("#hidebtn").toggle();
	})

	})


	</script>

	</body>
	</html>

2、事件绑定

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>事件绑定on</title>
	</head>
	<body>
	<button type="button" id="add">添加商品</button>

	<button type="button" id="btnClose">解除绑定</button>

	<ul>
	<li>手机</li>
	<li>充电器</li>
	<li>耳机</li>
	</ul>
	<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
	<script type="text/javascript">

	$(function(){
	/*01.鼠标移入和移出li的事件! 这种方式后面增加的节点没有事件
	$("li").hover(function(){ //mouseover
	$(this).css({"background":"red"});
	},function(){//mouseout
	$(this).css({"background":"pink"});
	})*/

	/02.当我们点击按钮的时候动态的增加li/
	$("#add").click(function(){
	$("ul").append("<li>吹风机</li>");
	})
	/*针对于我们新增的li 没有事件解决方案！绑定事件
	$("ul").on("mouseover","li",function(){
	$(this).css({"background":"red"});
	});
	$("ul").on("mouseout","li",function(){
	$(this).css({"background":"pink"});
	});*/
	$("ul").on({ //同时绑定多个事件
	mouseover:function(){
	$(this).css({"background":"red"});
	},
	mouseout:function(){
	$(this).css({"background":"pink"});
	}},"li");

	/解除绑定事件/
	$("#btnClose").click(function(){
	$("ul").off("mouseover");
	})



	})



	</script>
	</body>
	</html>

3、事件绑定bind

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>事件绑定bind</title>
	</head>
	<body>
	<button type="button" id="add">添加商品</button>

	<button type="button" id="btnClose">解除绑定</button>

	<ul>
	<li>手机</li>
	<li>充电器</li>
	<li>耳机</li>
	</ul>
	<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
	<script type="text/javascript">
	//增加节点
	$("#add").click(function(){
	$("ul").append("<li>吹风机</li>");
	})

	/事件bing 绑定解除绑定 unbind/
	$("li").bind({
	mouseover:function(){
	$(this).css({"background":"red"});
	},
	mouseout:function(){
	$(this).css({"background":"pink"});
	}
	})
	/事件live 绑定解除绑定 die/
	$("li").live({
	mouseover:function(){
	$(this).css({"background":"red"});
	},
	mouseout:function(){
	$(this).css({"background":"pink"});
	}
	})




	</script>
	</body>
	</html>

4、键盘事件

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>键盘事件</title>
	</head>
	<body>

	<form action="#" method="get" id="myForm">
	用户名：<input name="userName" placeholder="请输入用户名">
	密码：<input type="password" name="pwd" placeholder="请输入密码">
	<button type="submit">登录</button>
	</form>

	<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
	<script type="text/javascript">
	/点击回车键触发表单的提交事件 key用户的按键/
	$(document).keypress(function(key){
	if(key.keyCode==13){
	//表单提交
	$("#myForm").submit();
	}
	})

	</script>
	</body>
	</html>

5、silde事件

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>silde事件</title>
	<style type="text/css" >
	ul{
	list-style:none;
	padding:5px;
	width:210px;
	border:1px solid red;
	}
	a{
	text-decoration:none;
	line-height: 30px;
	}
	.menu_style li{
	border-bottom:1px solid #666;
	}
	</style>
	</head>
	<body>
	<div id="menu" class="menu_style">
	<ul>
	<li><a href="#">手机通讯、数码电器</a></li>
	<li><a href="#">食品饮料、酒水、果蔬</a></li>
	<li><a href="#">进口食品、进口牛奶</a></li>
	<li><a href="#">美容化妆、个人护理</a></li>
	<li><a href="#">母婴用品、个人护理</a></li>
	<li><a href="#">厨卫清洁、纸、清洁剂</a></li>
	<li id="menu_07" class="element_hide"><a href="#">家居家纺、锅具餐具</a></li>
	<li id="menu_08" class="element_hide"><a href="#">生活电器、汽车生活</a></li>
	<li id="menu_09" class="element_hide"><a href="#">电脑、外设、办公用品</a></li>
	<li class="btn">
	<input name="more_btn" type="button" value="展开或关闭菜单项" />
	</li>
	</ul>
	</div>

	<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
	<script type="text/javascript">
	/让li下标大于5的但是不包含最后一个显示或者隐藏/
	$(function(){
	$("input").toggle(
	function(){
	//$("li:gt(5):not(:last)").slideUp(1000); 毫秒数
	$("li:gt(5):not(:last)").slideUp("fast");
	},
	function(){
	$("li:gt(5):not(:last)").slideDown("slow");
	}
	);


	})

	</script>
	</body>
	</html>

6、fade事件

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title></title>
	</head>
	<body>
	<button type="button" id="showImg">淡入</button>
	<button type="button" id="hideImg">淡出</button>
	<img src="../images/cat.jpg">

	<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
	<script type="text/javascript">
	$(function(){
	/其实就是对元素的透明度进行修改/
	$("#showImg").click(function(){ //淡入
	$("img").fadeIn(3000);
	})
	$("#hideImg").click(function(){//淡出
	$("img").fadeOut("slow");
	})

	})

	</script>
	</body>
	</html>

7、animate动画事件

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>animate动画事件</title>
	</head>
	<body>


	<button type="button" id="showAnimate">开始动画</button>
	<img src="../images/cat.jpg">

	<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
	<script type="text/javascript">
	/*
	* animate(prop,speed,easing,callback)
	* prop:我们需要设置的css属性，可以是0-N个
	* speed:动画执行的速度
	* easing:速度曲线
	* callback: 指的是我们动画完成所有动作之后的回调函数（function）
	* */
	$(function(){
	//点击按钮
	$("#showAnimate").click(function(){
	//图片发生变化
	$("img").animate( // start animate
	{
	"height":200,
	"width":200,
	"marginRight":50
	},
	"slow",
	"swing",
	function(){
	alert("动画已经完成！");
	}); // end animate
	})
	})

	</script>
	</body>
	</html>

jQuery事件和动画的更多相关文章

jQuery事件以及动画
jQuery事件以及动画一.jQuery事件加载DOM 在页面加载完毕后, 浏览器会通过 JavaScript 为 DOM 元素添加事件. 在常规的 JavaScript 代码中, 通常使用 wi ...
jQuery事件与动画
一事件 1 加载DOM事件 $(document).ready():执行时机:DOM元素准备就绪执行次数:多次简单写法:原:$(document).ready(function(){}) ...
JQuery 事件与动画
第一大部分提纲事件与动画一.事件 1.在JavaScript语法中的事件,把onxxxxx中的on去掉,就是JQuery中的事件. onclick - click ondblclick - db ...
第三章 jQuery事件和动画
1.什么是事件:事件指的是用于对网页操作的时候,网页做出的一个回应. 2.JQuery中的事件:JQuery事件是对JavaScript事件的封装,常用事件的分类如下:(1)基础事件:window事件 ...
JavaScript jQuery 事件、动画、扩展
事件因为JavaScript在浏览器中以单线程模式运行,页面加载后,一旦页面上所有的JavaScript代码被执行完后,就只能依赖触发事件来执行JavaScript代码. 浏览器在接收到用户的鼠标或 ...
初学jQuery之jQuery事件与动画
今天我们就谈谈jquery中的事件和简单动画吧,它们毕竟基础是进阶华丽的根本!! 1.事件 1.window事件 ready 准备就绪 2.鼠标事件方法 ...
JQuery事件与动画总结
1.加载DOM 1.1.window事件 window.onload=function(){}.... 时机:其他资源都加载完毕后,再执行 $(function(){}) ……:只是等待标签完毕,即可 ...
jquery事件和动画操作集锦
一,事件 1,加载事件 1 2 3 4 5 6 $(document).ready(function(){ //todo }); //dom准备就绪后执行ready里面的函数,此时dom对应的相关 ...
python 之前端开发（ jQuery事件、动画效果、.each()、 .data()）
11.58 事件 11.581 事件绑定方法与解绑绑定事件: // 绑定方式一: $('.box1').click(function () { alert('绑定方式一') }); // 绑定方 ...

随机推荐

20155231 2016-2017-2 《Java程序设计》第8周学习总结
20155231 2016-2017-2 <Java程序设计>第8周学习总结教材学习内容总结学习目标了解NIO 会使用Channel.Buffer与NIO2 会使用日志API.国际化 ...
STL-pair
每个pair 可以存储两个值.这两种值无限制. 定义 pair<int,char> p; pair<string,int> p; pair<int,int> p; ...
UNIX环境高级编程第2章 UNIX标准及实现
在过去的将近25年时间,人们为了UNIX的标准化做出了种种努力,这使得程序在不同版本的UNIX系统之间的移植相当容易. ISO C 1989年,C语言首个标准得到批准,其为C89.次年,一个带有小改动 ...
IE的双边距Bug以及解决办法
display:inline和display:block区别一.什么是双边距Bug? 先来看图: 我们要让绿色盒模型在蓝色盒模型之内向左浮动,并且距蓝色盒模型左侧100像素.这个例子很常见,比如在网 ...
os._exit()， sys.exit()， exit()
1. sys.exit(n) 退出程序引发SystemExit异常, 可以捕获异常执行些清理工作. n默认值为0, 表示正常退出. 其他都是非正常退出. 还可以sys.exit("sorry ...
【Git】Git与GitHub 入门【转】
转自:http://www.cnblogs.com/lcw/p/3394545.html GitHub GitHub是一个基于git的代码托管平台,付费用户可以建私人仓库,我们一般的免费用户只能使用公 ...
【内核】几个重要的linux内核文件【转】
转自:http://www.cnblogs.com/lcw/p/3159394.html Preface 当用户编译一个linux内核代码后,会产生几个文件:vmlinz.initrd.img, 以及 ...
金蝶K3WISE常用数据表
K3Wise 14.2 清空密码update t_User set FSID=') F ", ,P T #8 *P!D &D 80!N &@ <0 C '+''''+' ...
pip安装遇到问题
安装pip之后,在cmd下输入 pip --version始终提示: Unknown option:versionDid not provide a command自己安装步骤没错,怎么想也不明白,无 ...
十一、springcloud之链路追踪Sleuth
一.背景随着微服务的数量增长,一个业务接口涉及到多个微服务的交互,在出错的情况下怎么能够快速的定位错误二.简介 Spring Cloud Sleuth 主要功能就是在分布式系统中提供追踪解决方案, ...

jQuery事件和动画

1、toggle事件

2、事件绑定

3、事件绑定bind

4、键盘事件

5、silde事件

6、fade事件

7、animate动画事件

jQuery事件和动画的更多相关文章

随机推荐

热门专题