你的位置:首页 > Java教程

[Java教程]锋利的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>按键
更多属性访问: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对表单、表格的操作及更多应用

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