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('绑定方式一') }); // 绑定方 ...
随机推荐
- 漂亮!Javascript代码模仿淘宝宝贝搜索结果的分页显示效果
分页按钮思想: 1.少于9页,全部显示 2.大于9页,1.2页显示,中间页码当前页为中心,前后各留两个页码 先看效果图: 01输入框焦点效果 02效果 模仿淘宝的分页按钮效果控件kkpager JS ...
- debian旧日笔记
18:45 2007-10-7 序 图形界面较好的Linux操作系统有三个主要的发行版本:RedHat, Debian, SuSE.自RedHat9后,RedHat以Fedora为名发行新的版本.仍然 ...
- 20155235 2016-2017-2 《Java程序设计》第5周学习总结
20155235 2016-2017-2 <Java程序设计>第5周学习总结 教材学习内容总结 第八章知识点 语法与继承结构 使用try.catch 异常继承结构 要抓还是要抛 贴心还是造 ...
- H5 键盘兼容性小结
H5 键盘兼容性小结 在 H5 项目中,我们会经常遇到页面中存在单个甚至多个 input/textarea 输入框与底部固定元素的布局情况.在 input/textarea 输入框获取焦点时,会自动触 ...
- 翻译:CommonJS的wiki
CommonJS的wiki资料原文 Modules/AsynchronousDefinition 异步定义的模块(国内一般叫AMD模块定义) STATUS: PROPOSAL 现状:提案 Implem ...
- Servlet笔记4--ServletConfig接口和ServletContext接口
ServletConfig接口: ServletContext接口: 代码详解: (1)web.xml配置文件: <?xml version="1.0" encoding=& ...
- gnuplot生成MySQL QPS图形
1.建立MySQL QPS执行脚本 #!/bin/bash mysqladmin -uroot -p' extended-status -i1|awk \ 'BEGIN{flag=0; print & ...
- MVC 视图页对数字,金额 用逗号 隔开(数字格式化)
cshtml页面代码: <tr> <th>@Model.BankName</th> <th>@Model.Month</th> <th ...
- vue总结 02指令
指令 v-text 预期:string 详细: 更新元素的 textContent.如果要更新部分的 textContent ,需要使用 {{ Mustache }} 插值. 示例: <span ...
- ArcMap2SLD添加中文支持
首先,你可以从作者提供的链接下载ArcMap2SLD.zip(支持ArcMap10.2) 1.打开LUT_sld_mapping_file.xml文件(上传文件中已经修改)修改文件<LUT> ...