好记心不如烂笔头之JQuery学习，第四章
---恢复内容开始---
JQuery中的事件和动画
JQuery中的事件：
$(document).ready()该事件和JS中的window.load类似，但是window.load中需要等待所有资源加载完毕后才处理（例如图片下载完），而$(document).ready()是在DOM树加载完毕后就进行处理了。但是在过程中有些也是需要加载完再处理的，比如知道图片的高宽比等，这时候就可以用$(window).load(function(){})这样处理了，与window.load等价。
多次执行也可以使用，不比跟window.load = function(){fun1();fun2;}酱紫了，直接
$(document).ready(fun1()); $(document).ready(fun2()); //简写
$().ready(fun1());
$().ready(fun2());
$(function(){fun1()});
绑定事件：
$().ready($("#panel h5").bind("click",function(){fun1()}));或者
$(function(){$("#panel h5").bind("click",function(){fun1()});})合成事件：
1、hover(fun1(),fun2());
模拟光标的悬停事件，光标移到上面时，执行fun1，离开时执行fun2
也是一载入进去就能绑定
$(function(){$("#panel h5").hover(function(){$(this).next("div").show();},function(){$(this).next("div").hide();})})2、toggle方法，模拟鼠标连续点击事件，第一次点击xxx，第二次点击xxx......
toggle(fun1,fun2,fun3,......)
$(function(){$("#panel h5").toggle(function(){fun1()},function(){fun2()});})toggle方法还有一个用途：隐藏元素。使用例子如下：
$(function(){$("#panel h5").toggle( function(){$(this).next("div").toggle();},function(){$(this).next("div").toggle();});})事件冒泡和解决方案
例如，在body里有DIV，DIV里有DIV或者span，大家都定义了click事件，当点击最底层click会导致顶层的click事件也被触发。这个现象就叫做事件冒泡
为了解决这一问题，需要停止事件冒泡，做法为在绑定的function()里添加参数event，在最后的事件处理结束后，增加 event.stopPropagation();
$(function(){$("span").bind("click",function(event){var text = $("#msg").html()+"<p>内层span元素被单击</p>";$("#msg").html(text);event.stopPropagation();});$("#content").bind("click",function(event){var text = $("#msg").html()+"<p>外层DIV元素被单击</p>";$("#msg").html(text);event.stopPropagation();});$("body").bind("click",function(){var text = $("#msg").html()+"<p>body元素被单击</p>";$("#msg").html(text);});})阻止默认行为：
event.preventDefault();
同样在绑定事件的时候增加event参数，一般用于进行数据校验，当发现不对的时候停止默认行为
阻止默认行为和停止冒泡都可以使用return false;代替!!!!
移除绑定
指定元素，使用$("#test").unbind("事件名","事件方法");或者只指定事件名，当只有一个事件，什么都不用指定。
one方法，$("test").one("事件名","事件方法");绑定事件，但是这个事件只会执行一次，之后再触发事件将不会有作用
模拟事件
指定元素，使用trigger("事件名")来模拟$("test").trigger("click");
或者$("test").click();
而使用trigger在于他的广泛性，能触发任何事件，包括自定义事件，能以数组方式传递参数$("test").trigger("click",["aaa","bbbb"]);
绑定多个事件，可以为指定函数一次性绑定多个事件，例子如下：
$(function(){$("p").bind("mouseover mouseout",function(){$(this).toggleClass("over");})})可以为事件增加命名空间，为事件解绑的时候直接解绑命名空间就完事，命名空间在每个事件后加点加命名空间名：
$("div").bind("click.plus",function(){......});其中.plus为命名空间。
一个元素可以有多个相同的事件，例如click可以有带命名空间的事件
$(function(){$("div").bind("click",function(){$("body").append("<p>click event</p>");});$("div").bind("click.plus",function(){$("body").append("<p>click.plus event</p>");});$("button").click(function(){$("div").trigger("click!"); //注意！号
});});在此模拟事件中，感叹号意味着匹配不带命名空间的事件。若没有感叹号，两个事件一起触发
4.2 JQuery中的动画
1、隐藏和显示：hide() ,show()这两个属性都是在指定元素后实现的，hide（）方法会记住原先的display属性，然后将display的属性设为none，show()将还原原来的display属性。这是默认的使用方法。
在方法当中增加参数可以控制动画显示速度，可以选择slow（600ms），normal（400ms），fast（200ms）
$("button").toggle(function(){$("div").hide("fast");},function(){$("div").show(600);})2、fadeOut和fadeIn方法，这两个方法和show、hide不同在于show、hide是减少长宽来消失元素，增大长宽来显示元素，而fadeOut，fadeIn是通过透明度的变化来显示元素的
$("button").toggle(function(){$("div").fadeOut("slow");},function(){$("div").fadeIn(600);})3、slidUp，slidDown,通过改变高度来隐藏的，向上隐藏，所以UP是隐藏，down是显示
<script type="text/javascript">$("button").toggle(function(){$("div").slideUp("slow");},function(){$("div").slideDown(600);})</script>4、自定义动画，animate（params,speed,callback）params写入参数，各个变化后的CSS属性用{}括起来，两个属性间用，相隔，多个动画用多个animate可以连在一起，最好用链式操作哦。
$("button").click(function(){$("#panel").animate({left:"400px",height:"200px",opacity:"1"},3000).animate({top:"200px",width:"200px"},3000).fadeOut("slow");})---恢复内容结束---
JQuery中的事件和动画
JQuery中的事件：
$(document).ready()该事件和JS中的window.load类似，但是window.load中需要等待所有资源加载完毕后才处理（例如图片下载完），而$(document).ready()是在DOM树加载完毕后就进行处理了。但是在过程中有些也是需要加载完再处理的，比如知道图片的高宽比等，这时候就可以用$(window).load(function(){})这样处理了，与window.load等价。
多次执行也可以使用，不比跟window.load = function(){fun1();fun2;}酱紫了，直接
$(document).ready(fun1()); $(document).ready(fun2()); //简写
$().ready(fun1());
$().ready(fun2());
$(function(){fun1()});
绑定事件：
$().ready($("#panel h5").bind("click",function(){fun1()}));或者
$(function(){$("#panel h5").bind("click",function(){fun1()});})合成事件：
1、hover(fun1(),fun2());
模拟光标的悬停事件，光标移到上面时，执行fun1，离开时执行fun2
也是一载入进去就能绑定
$(function(){$("#panel h5").hover(function(){$(this).next("div").show();},function(){$(this).next("div").hide();})})2、toggle方法，模拟鼠标连续点击事件，第一次点击xxx，第二次点击xxx......
toggle(fun1,fun2,fun3,......)
$(function(){$("#panel h5").toggle(function(){fun1()},function(){fun2()});})toggle方法还有一个用途：隐藏元素。使用例子如下：
$(function(){$("#panel h5").toggle( function(){$(this).next("div").toggle();},function(){$(this).next("div").toggle();});})事件冒泡和解决方案
例如，在body里有DIV，DIV里有DIV或者span，大家都定义了click事件，当点击最底层click会导致顶层的click事件也被触发。这个现象就叫做事件冒泡
为了解决这一问题，需要停止事件冒泡，做法为在绑定的function()里添加参数event，在最后的事件处理结束后，增加 event.stopPropagation();
$(function(){$("span").bind("click",function(event){var text = $("#msg").html()+"<p>内层span元素被单击</p>";$("#msg").html(text);event.stopPropagation();});$("#content").bind("click",function(event){var text = $("#msg").html()+"<p>外层DIV元素被单击</p>";$("#msg").html(text);event.stopPropagation();});$("body").bind("click",function(){var text = $("#msg").html()+"<p>body元素被单击</p>";$("#msg").html(text);});})阻止默认行为：
event.preventDefault();
同样在绑定事件的时候增加event参数，一般用于进行数据校验，当发现不对的时候停止默认行为
阻止默认行为和停止冒泡都可以使用return false;代替!!!!
移除绑定
指定元素，使用$("#test").unbind("事件名","事件方法");或者只指定事件名，当只有一个事件，什么都不用指定。
one方法，$("test").one("事件名","事件方法");绑定事件，但是这个事件只会执行一次，之后再触发事件将不会有作用
模拟事件
指定元素，使用trigger("事件名")来模拟$("test").trigger("click");
或者$("test").click();
而使用trigger在于他的广泛性，能触发任何事件，包括自定义事件，能以数组方式传递参数$("test").trigger("click",["aaa","bbbb"]);
绑定多个事件，可以为指定函数一次性绑定多个事件，例子如下：
$(function(){$("p").bind("mouseover mouseout",function(){$(this).toggleClass("over");})})可以为事件增加命名空间，为事件解绑的时候直接解绑命名空间就完事，命名空间在每个事件后加点加命名空间名：
$("div").bind("click.plus",function(){......});其中.plus为命名空间。
一个元素可以有多个相同的事件，例如click可以有带命名空间的事件
$(function(){$("div").bind("click",function(){$("body").append("<p>click event</p>");});$("div").bind("click.plus",function(){$("body").append("<p>click.plus event</p>");});$("button").click(function(){$("div").trigger("click!"); //注意！号
});});在此模拟事件中，感叹号意味着匹配不带命名空间的事件。若没有感叹号，两个事件一起触发
4.2 JQuery中的动画
1、隐藏和显示：hide() ,show()这两个属性都是在指定元素后实现的，hide（）方法会记住原先的display属性，然后将display的属性设为none，show()将还原原来的display属性。这是默认的使用方法。
在方法当中增加参数可以控制动画显示速度，可以选择slow（600ms），normal（400ms），fast（200ms）
$("button").toggle(function(){$("div").hide("fast");},function(){$("div").show(600);})2、fadeOut和fadeIn方法，这两个方法和show、hide不同在于show、hide是减少长宽来消失元素，增大长宽来显示元素，而fadeOut，fadeIn是通过透明度的变化来显示元素的
$("button").toggle(function(){$("div").fadeOut("slow");},function(){$("div").fadeIn(600);})3、slidUp，slidDown,通过改变高度来隐藏的，向上隐藏，所以UP是隐藏，down是显示
<script type="text/javascript">$("button").toggle(function(){$("div").slideUp("slow");},function(){$("div").slideDown(600);})</script>4、自定义动画，animate（params,speed,callback）params写入参数，各个变化后的CSS属性用{}括起来，两个属性间用，相隔，多个动画用多个animate可以连在一起，最好用链式操作哦。
$("button").click(function(){$("#panel").animate({left:"400px",height:"200px",opacity:"1"},3000).animate({top:"200px",width:"200px"},3000).fadeOut("slow");})5、停止动画stop()，stop(bool clearQueue,bool gotoEnd)后面这个重载是我自己为方便加进去的。stop()不带参数的话即为停止当前动画，注意，是停止当前动画！动到哪停到哪，相当于急刹车！而带参数的即不同，第一个参数针对有多个动画的动画队列，若使用stop（）只停止正在进行的动画，要是后面还有动画还要继续执行，第一个参数设为true之后后面的动画就停止了。而gotoEnd这个参数的作用在于中途停止动画的话是否直接到动画结束后的状态，否则停在哪就是哪~
$("#panel").hover(function(){$(this).stop().animate({height:"150",width:"300"},200);},function(){$(this).stop(true,true).animate({height:"22",width:"60"},300);})但是gotoEnd是有问题的，他相当于直接无动画执行最后一步，若之前设置元素的长宽要经过两个动，透明度是第三个动画，而直接执行的话gotoend的话他就只管透明度了，长宽就不管了。
所以要注意避免动画累积，或者进行其他动画的时候做动画判断
$("element").is(":animated"){//判断元素是否完成动画//如果当前没有动画，再添加新动画
}辅助交互动画函数：toggle，slideToggle，可以加入时间参数，等同于show/hide和slideDown/slideUp交换着用
$("button").click(function(){$(this).prev("div").toggle(1000);});fadeTo(speed,to)函数，改变函数的透明度
$("button").click(function(){$(this).prev("div").fadeTo(1000,1);转载于:https://www.cnblogs.com/UliiAn/p/3305919.html
好记心不如烂笔头之JQuery学习，第四章相关推荐
- 好记心不如烂笔头之jQuery学习,第一章
jQuery对象和DOM对象的转换: 1.jquery对象是对象数组,于是乎: var $cr = $('#cr');var cr = $cr[0]; 2.使用jquery的自带函数: var $cr ...
- 好记心不如烂笔头，ssh登录 The authenticity of host 192.168.0.xxx can't be established. 的问题...
用ssh登录一个机器(换过ip地址),提示输入yes后,屏幕不断出现y,只有按ctrl + c结束 错误是:The authenticity of host 192.168.0.xxx can't b ...
- 好记心不如烂笔头，ssh登录 The authenticity of host 192.168.0.xxx can't be established. 的问题
http://blog.csdn.net/kimsoft/article/details/5865418 用ssh登录一个机器(换过ip地址),提示输入yes后,屏幕不断出现y,只有按ctrl + c ...
- jQuery学习（四）— jQuery的ready事件和原生JS的load事件的区别
jQuery学习(四)- jQuery的ready事件和原生JS的load事件的区别 jQuery的ready事件和原生JS的load事件的区别: 页面中可以有多个ready事件,而load事件会出现 ...
- [jQuery学习系列四 ]4-Jquery学习四-事件操作
[jQuery学习系列四 ]4-Jquery学习四-事件操作 前言: 今天看知乎偶然看到中国有哪些类似于TED的节目, 回答中的一些推荐我给记录下来了, 顺便也在这里贴一下: 一席 云集 听道 推酷 ...
- jQuery系列 第四章 jQuery框架的选择器
第四章 jQuery框架的选择器 4.1 jQuery选择器说明 jQuery 最核心的组成部分就是选择器引擎.它完全继承了 CSS 的风格,可以对 DOM 元 素的标签名.属性名.状态等进行快速准确 ...
- jquery学习笔记四：ajax
$.ajax ->$.get ->$.getJson ->$.getScript ->$post jquery.ajax 最底层ajax接口,参数最灵活,需要自定义的参数也最多 ...
- phpcms后台系统怎么去掉html目录_电子笔记本 | 好记性胜过烂笔头？基于python3的知识管理系统...
要记忆很多东西,感觉自己记不住,或者总是忘记细节,怎么办? 记笔记啊,最好是电子笔记,方便查找和整理. 常言道: 好记性不如烂笔头.再好的记性,随着时间的推移都会遗忘的,除非不断地巩固.所以才有烂笔头 ...
- 好记性不如烂笔头-笔记记录方法公开
见字如面,我是东北码农. 俗话说,好记性不如烂笔头,在工作学习中记笔记是很重要的.今天介绍一下自己在工作中如何记录笔记,以及给大家安利一下win10自带的OneNote. 1.记录什么 1.1.流水账 ...
最新文章
- 2021年大数据ELK（十六）：Elasticsearch SQL（职位查询案例）
- 思科OSPF辅助地址
- [游戏模版15] Win32 飞机射击
- 程序员的你是否熟练掌握Chrome开发者工具？
- 你真的会玩SQL吗？简单的数据修改
- 关于在hue当中执行定时任务，时间的设置。
- Easyui 页面访问慢解决方案，GZIP网站压缩加速优化
- asp.net中涉及子文件夹的母版页和相对路径文件引用问题(一)
- C++模板类中使用静态成员变量（例如Singleton模式）
- 服务器系统多用户怎么解决,服务器如何设置多用户登录
- 一款简单好用的动画/游戏制作软件|源码编辑器|编程猫南宁体验中心
- ureport2报表详细使用（二）-报表基础配置
- python制造童年回忆：猫和老鼠小游戏【附源码】
- 怎么改自己手机的ip地址
- 1.1 统计学习方法概论（个人笔记与随感）
- 易知大学“大数据挖掘与分析（Python）”免费学习平台
- 从日文输入法项目看心理模型和实现模型
- 电工结业试卷_修补电工结业论文
- 沈航数值统计-16-17A+B
- Qt中提示“常量中有换行符“的解决方法
热门文章
- bcb image 动态大小_论车载音箱系统Limiter（限幅器）Threshold与Image（声像）稳定度的关系...
- 安装MySql报错（This application requires .NET Framework x.x.x）
- android webview 字体被放大,Android WebView文字大小调整及页面缩放调整
- Jupyter的配置
- window10查看内存情况
- 需求处理的三个步骤：需求梳理、需求分析、需求放大
- echarts 报错问题 is null 或者未定义等问题
- 由canvas实现btn效果有感
- DNS使用的是TCP协议还是UDP协议
- 1./app/logs/ 里面的日志只保留7天的（apache每天生成一个文件）