锋利的jQuery第2版学习笔记4、5章
第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>按键
移除事件
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对表单、表格的操作及更多应用
本章大多是使用前面介绍的方法的应用，没啥笔记
世界 -- 因技术而精彩
