第4章，jQuery中的事件和动画

注意：使用的jQuery版本为1.7.1

jQuery中的事件

JavaScript中通常使用window.onload方法，jQuery中使用$(document).ready()方法。
1、执行时机
window.onload方法在网页所有元素都加载完毕之后才执行，$(document).ready()方法在DOM完全就绪就可以被调用
由于$(document).ready()方法内注册事件，只要DOM就绪就会被执行，因此有可能此时元素的关联文件还未下载完，例如图片的宽高可能无效。为解决此问题，使用jQuery另一个方法-----load()方法。load()方**在元素的onload事件绑定一个处理函数。

$(window).load(function(){   //编写代码});

等价于：

window.onload = function(){   //编写代码};

2、多次使用
windows.onload()方法不能保存多个函数引用，而$(document).ready()可以
3、简写形式

$(document).ready(function(){   //编写代码});

简写：

$(function(){   //编写代码});

$(document)也可以简写为$()，当$()不带参数时，默认参数就是document，因此还可以简写：

$().ready(function(){   // coding});

3种方式都是一样的功能

事件绑定

使用bind()方法来对匹配元素进行特定事件绑定，调用格式：

bind(type [,datd] ,fn);

第一个参数是事件类型，包括：blur、focus、load、resize、scroll等等，当然也可以是自定义名称
第二个参数是可选参数，作为event.data属性值传递给事件对象的额外数据对象
第三个参数则是用来绑定的处理函数
使用：

$("#panel h5.head").bind("click",function(){   // coding});

合成事件

jQuery有两个合成事件---hover()、toggle()，类似ready()，hover()和toggle()都是jQuery自定义方法
1、hover()方法
hover(enter,leave)
用于模拟光标悬停事件，当光标移动到元素上，触发指定的第一个函数，移出元素，触发指定的第二个函数
2、toggle()方法
toggle(fn1,fn2,fn3.....)，在jQuery1.9被移除
用于模拟鼠标连续点击事件，第1次点击触发第一个函数，第2次点击触发第二个函数，第3次点击触发第三个，依次类推，重复调用

事件冒泡

停止事件冒泡
使用event.stopPropagation()可以停止事件冒泡
阻止默认行为
网页中的元素有自己的默认行为，例如点击超链接会跳转、单击提交按钮，表单会提交，有时需阻止事件默认行为
jQuery中提供了preventDefault()方法来阻止默认行为
event.preventDefault()
注：若想对事件对象停止冒泡和默认行为，可以在事件处理函数中返回false，这是对在事件对象上同时调用stopPropagation和preventDefault的一种简写方式

事件对象属性

1、event.type，获取事件的类型
2、event.preventDefault()，阻止默认行为
3、event.stopPropagation()，阻止事件冒泡
4、event.target，获取触发事件的元素
5、event.relatedTarget，在标准DOM中，mouseout和mouseout所发生的元素可以通过event.target来访问，相关元素可以通过event.relatedTarget访问
6、event.pageX和event.pageY，用于获取光标相对于页面的x坐标和y坐标，若页面有滚动条，还要加上滚动条的宽高
7、event.which，在鼠标事件中获取鼠标的左（1）、中（2）、右键（3），在键盘事件中获取键盘的按键
8、event.metaKey，键盘事件中获取<ctrl>按键
更多属性访问：http://docs.jquery.com/Events/jQuery.Event

移除事件

1、移除按钮元素上以前注册的事件
使用unbind()方法，语法结构：

unbind([type],[data]);

第一个参数是事件类型，第二个参数是要移除的函数
（1）若没有参数，删除所有绑定事件
（2）若提供了事件类型作为参数，则只删除该类型的绑定事件
（3）若都传递，则只有这个特定的事件处理函数会被删除
注：对于只需要触发一次，之后就解绑的情况，jQuery提供了one()方法，可以为元素绑定处理函数，触发一次之后，立即删除
one()方法的结构与bind()方法类似，使用方法也与bind()方法类似，语法结构：

one(type [,data] ,fn);

模拟操作

1、常用模拟

使用trigger()方法完成模拟操作：

$("#btn").trigger("click");   // 触发id为btn的click事件// 也可以简化：$("#btn").click();

2、触发自定义事件

trigger()方法不仅可触发浏览器支持的具有相同名称的事件，也可以触发自定义名称的事件
例：

$('#btn').bind("myClick",function(){  $('#test').append("<p>我的自定义事件</p>");});$('#btn').trigger("myClick");

3、传递数据

$('#btn').bind("myClick",function(event,message1,message2){  $('#test').append("<p>"+message1+message2+"</p>");});$('#btn').trigger("myClick",["我的自定义","事件"]);

4、执行默认操作

trigger()方法触发事件后，还会执行浏览器默认操作

$('input').trigger("focus");

不仅会触发绑定在input上的事件，也会使input元素获得焦点
使用triggerHandler()方法可以只触发事件，而不执行浏览器默认操作

$('input').triggerHandler("focus");

只会触发绑定事件，不会是input元素获得焦点

其他用法

1、绑定多个事件类型

$(function(){   $("div").bind("mouseout mouseover",function(){     //do something    });};

2、添加事件命名空间，便于管理

$(function(){  $('div').bind("click.plugin",function(){    $('body').append("<p>click事件</p>");  });  $('div').bind("mouseover.plugin",function(){    $('body').append("<p>mouseover事件</p>");  });  $('div').bind("dbclick",function(){    $('body').append("<p>dbclick事件</p>");  });  $('button').click(function(){    $('div').unbind(".plugin");  });});

在所绑定的事件后面添加命名空间，删除时只需要指定命名空间即可，单击<button>后，plugin的命名空间被删除，而不再plugin空间中的dbclick事件依然存在

3、相同事件名称，不同命名空间执行方法

$(function(){  $('div').bind("click",function(){    $('body').append("<p>click事件</p>");  });  $('div').bind("click.plugin",function(){    $('body').append("<p>click.plugin事件</p>");  });  $('button').click(function(){    $('div').trigger("click!"); //注意感叹号  });});

单击<div>元素后，会同时触发click事件和click.plugin事件，若只单击<button>则只触发click事件，不触发click.plugin事件，注意trigger("click!")后面的感叹号的作用是匹配所有不包含命名空间中的click方法
若两者都要触发，改为如下代码：

$("div").trigger("click");

jQuery中的动画

1、show()方法和hide()方法
（1）show()方法和hide()方法
调用hide()方**将该元素的display样式改为“none”
元素隐藏后可以使用show()方法将元素的display样式设置为先前的显示状态
（2）show()方法和hide()方法让元素动起来
希望调用show()方法时元素慢慢地显示出来，可以为show()方法指定一个速度参数，例如，速度关键字“slow”

$(“element”).show("slow");

元素会在600ms内慢慢显示，还有normal（400ms），fast（200ms），还可以指定一个数字（单位是毫秒）

$(function(){  $("#panel h5.head").toggle(function(){    $(this).next().show("slow");  },function(){    $(this).next().hide(1000);  });});

2、fadeIn()方法和fadeOut()方法
fadeIn(),fadeOut()只改变元素的不透明度，fadeOut()会在指定的时间内降低元素的不透明度，直至元素完全消失（display:none），fadeIn()相反。

$(function(){  $("#panel h5.head").toggle(function(){    $(this).next().fadeOut();  },function(){    $(this).next().fadeIn();  });});

也可以使用关键字和指定时间参数，单位毫秒
3、slideUp()方法和slideDown()方法
这两个方法只会改变元素的高度，若一个元素的display为none，slideDown()会将这个元素自上而下延伸显示，slideUp()正好相反

$(function(){  $("#panel h5.head").toggle(function(){    $(this).next().slideDown();  },function(){    $(this).next().slideUp();  });});

一样可以使用关键字和指定时间参数，单位毫秒

自定义动画方法animate()

animate(params, speed, callback);

（1）params：一个包含样式属性及值的映射，例：{property:"value",property:"value1",....}
（2）speed：速度参数，可选
（3）callback：动画完成时执行的函数，可选
1、自定义简单动画

<div id="panels"></div>

#panels{  position: relative;  width: 100px;  height: 100px;  border: 1px solid #0050d0;  background: #96e555;  cursor: pointer;}

$(function(){  $("#panels").click(function(){    $(this).animate({left:"500px"},3000);  });});

三秒之内，div右移500px，只会移动一次
2、累加、累减动画

$(function(){  $("#panels").click(function(){    $(this).animate({left:"+=500px"},3000);  });});

3、多重动画
（1）同时执行多个动画

$(function(){  $("#panels").click(function(){    $(this).animate({left:"500px",width:"200px",height:"200px"},3000);  });});

这是同时执行的动画
（2）按顺序执行多个动画
把多个动画拆开即可

$(function(){  $("#panels").click(function(){    $(this).animate({left:"500px"},3000);    $(this).animate({width:"200px"},3000);    $(this).animate({height:"200px"},3000);  });});

链式写法：

$(function(){  $("#panels").click(function(){    $(this).animate({left:"500px"},3000)        .animate({width:"200px"},3000)        .animate({height:"200px"},3000);  });});

4、综合动画

$(function(){  $("#panels").css("opacity","0.5");//设置不透明度  $("#panels").click(function(){    $(this).animate({left:"400px",height:"200px",opacity:"1"},3000)        .animate({top:"200px",width:"200px"},3000)        .fadeOut("slow");  });});

5、动画回调函数
若想在最后完成时改变CSS样式，而不是淡出，则需要使用回调函数，而不是将css()方法写在fadeOut()方法的位置，因为css()方法并不会加入动画队列

$(function(){  $("#panels").css("opacity","0.5");//设置不透明度  $("#panels").click(function(){    $(this).animate({left:"400px",height:"200px",opacity:"1"},3000)        .animate({top:"200px",width:"200px"},3000,function(){          $(this).css("border","5px solid blue");        });  });});

注：callback回调函数适合jQuery的所有动画效果

停止动画和判断是否处于动画状态

1、停止元素的动画
使用stop()方法

stop([clearQueue],[gotoEnd]);

参数均为可选参数，为boolean值
clearQueue表示是否清空动画队列，gotoEnd表示直接将正在执行的动画跳转到末状态
如果直接使用stop()方法，则会立即停止正在执行的动画，若还有动画等待执行，则以当前状态继续执行下一个动画
2、判断元素是否处在动画状态

if(!$("element").is(":animate")){  //do something}

3、延迟动画
使用delay()方法可以对动画进行延迟操作

$(function(){  $("#panels").css("opacity","0.5");//设置不透明度  $("#panels").click(function(){    $(this).animate({left:"400px",height:"200px",opacity:"1"},3000)        .delay(1000)   // 延迟的是下一个动画        .animate({top:"200px",width:"200px"},3000);  });});

其他动画方法

1、toggle(speed,[callback])方法
2、slideToggle(speed,[easing],[callback]);
3、fadeTo(speed,opacity,[callback]);
4、fadeToggle(speed,[easing],[callback]);
1、toggle()
可切换元素的可见状态

$("#panel h5.head").click(function(){  $(this).next().toggle();});

等价于：

$(function(){  $("#panel h5.head").toggle(function(){    $(this).next().show("slow");  },function(){    $(this).next().hide(1000);  });});

2、slideToggle()方法
通过高度变化切换匹配元素可见性
3、fadeTo()方法
把元素的不透明度以渐进方式调整到指定值，只调整元素的不透明度，
4、fadeToggle()方法
通过元素不透明度变化来切换元素的可见性，只调整元素的不透明度

第5章，jQuery对表单、表格的操作及更多应用

本章大多是使用前面介绍的方法的应用，没啥笔记

原标题：锋利的jQuery第2版学习笔记4、5章

关键词：jquery