你的位置:首页 > Java教程

[Java教程]【锋利的jQuery】学习笔记04


第四章 jQuery中的事件和动画

一、jQuery中的事件

  • 加载DOM

在JS中等待页面加载完成通常使用window.onload方法,而在jQuery中则使用$(document).ready()方法来替代传统的window.onload方法。这两者有很大的不同:

  1. 执行时机

window.onload方法是在网页所有的元素(包括元素关联的文件)完全加载到浏览器后才能执行。而Query中的$(document).ready()方法,在DOM载入就绪就可以对其操纵并调用它绑定的函数,此时网页中的所有元素可能并没有下载完毕。

有时我们需要的图片没有加载完毕,我们需要的图片宽高可能不一定有效。这种情况可以使用jQuery的load()方法。load()方法会在元素的onload中绑定一个处理函数。如果处理函数绑定给window对象,则会在所有内容加载完毕后触发。如果处理函数绑定在元素上,则会在元素内容加载完毕后触发。

$(window).load(function({}))等价于js的window.onload=function(){}

2. 多次使用

window.onload方法只能使用一次,否则后面的window.onload会覆盖前面的。这点在引入多个·js时尤其困扰,但是jQuery中的$(document).ready()方法每次调用都会在现有的行为上追加新的行为,并按照注册顺序依次执行。

3.简写方式

$(document).ready()方法可以简写为$(function(){})或者$().ready(),这点在jQuery源码中已经进行过处理,他们的功能是一样的。

  • 事件绑定

使用bind()方法给匹配元素进行特定事件的绑定。

格式为bind(type [.data] fn);

第一个参数是事件类型,包括:blur、focus、load、resize、scroll、unload、click、dbclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup、error等。也可以自定义名称。

第二个参数为可选参数,作为event.data属性值传递给事件对象的额外数据对象。

第三个参数是用来绑定事件的处理函数。

 1 $(function () { 2   $(".head").bind("click",function(){ //给.head元素添加一个点击事件 3     var $content=$(this).next();   //定义一个局部变量保存$(this).next 4     if($content.is(":visible")){    //实现点击显示再点击隐藏的切换 5       $content.hide(); 6     }else{ 7       $content.show(); 8     } 9   })10 });

像blur、focus、load、resize、scroll、unload、click、dbclick、mousedown、mouseup、 mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、 keydown、keypress、keyup、error等常用事件jQuery提供了简写,eg: $(".head").mouseover(function(){}).mouseout(function(){});

PS: bind()方法的其他用法
  1. 绑定多个事件类型
1 $(function(){2   $("div").bind("mouseover mouseout",function(){3     $(this).toggleClass("over");4   });5 });

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

 1 $(function(){ 2   $("div").bind("mouseover.plugin",function(){ 3     $("body").append("<p>mouseover事件</p>"); 4   }); 5   $("div").bind("click.plugin",function(){ 6     $("body").append("<p>click事件</p>"); 7   }); 8   $("div").click(function(){ 9     $("div").unbind(".plugin");10   });11 });

3.相同事件名称,不同命名空间执行方法

 1 $(function(){ 2   $("div").bind("click",function(){ 3     $("body").append("<p>click事件</p>"); 4   }); 5   $("div").bind("click.plugin",function(){ 6     $("body").append("<p>click.plugin事件</p>"); 7   }); 8   $("button").click(function(){ 9     $("div").trigger(".click!");  //!作用是匹配所有不包含在命名空间中的click方法10   });11 });

 

  • 合成事件

  1. hover()

hover()方法用于模拟光标悬停效果,鼠标移上触发第一个函数,鼠标移除触发第二个函数。用来替代jQuery中的bind("mouseenter")和bind("mouseleave")。

格式: hover(enter,leave);

以上代码通过hover()事件就可以简写为:

1 $(function () {2   $(".head").hover(function(){3     $(this).next().show();4   },function(){5     $(this).next().hide();6   });7 });

PS:hover()方法必须传入2个function,即时有一个操作函数没有也要写上。

2. toggle()

toggle()方法用于模拟鼠标的连续单击事件。第一次单击触发第一个函数,第二次单击触发第二个函数。如果有更多函数则依次触发,然后每次单击都重复对这几个函数的轮番调用。

PS:toggle()方法还可以实现切换元素的可见状态。

 

1 $(function () {2   $(".head").toggle(function(){3     $(this).next().toggle();4   },function(){5     $(this).next().toggle();6    });7 });

 

  • 事件冒泡与事件捕获

当页面元素触发事件的时候,该元素的容器以及页面都会按照特定顺序响应该元素的触发事件,事件的传播顺序就叫事件的流程。事件流分为冒泡型和捕获型。冒泡型事件流所有浏览器都支持,它是从明确的事件源到不明确的事件源依次向上触发。由于事件流的存在,我们有必要对时间的作用范围进行限制。捕获型事件流不是所有主流浏览器都支持,它是从不明确的事件源到明确的事件源依次向下触发,这种缺陷无法通过JS解决,因此jQuery不支持事件捕获。

  1. 事件对象

jQuery事件对象创建只需要为函数添加一个参数即可。创建的事件对象只有事件处理函数才能访问到。事件执行完毕后,事件对象就被销毁。

1 $("element").bind("click",function(e){  //e:事件对象2    //...3 });

2.停止事件冒泡

使用stopPropagation()方法停止事件冒泡。

1 $("span").bind("click",function(e){           //e是事件对象2   var txt=$("#msg").html()+"<p>内层span元素被单击</p>";3   $("#msg").html(txt);4   e.stopPropagation();                 //停止事件冒泡5 });

3.阻止默认行为

通过preventDefault()阻止元素的默认行为。

1 $("input").bind("click",function(e){           //e是事件对象2   var txt=$("#msg").html()+"<p>内层span元素被单击</p>";3   $("#msg").html(txt);4   e.preventDefault();                 //阻止事件默认行为5 });

如果想同时对事件对象停止冒泡和默认行为,可以在事件处理函数中返回false。这是对在事件对象上同时调用stopPrapagation()方法和preventDefault()方法的简写方式。e.preventDefault()可以改为return false;

  • 事件对象属性

  1. e.type  获取事件的类型。
  2. e.preventDefault()方法   阻止浏览器默认行为。
  3. e.stopPropagation()方法  阻止事件的冒泡。
  4. e.target  获取触发事件的元素。
  5. e.relatedTarget  获取相关元素。
  6. e.pageX和pageY  获取光标相对于页面的x坐标和y坐标。
  7. e.which  单击事件中获取鼠标的左、中、右键;键盘事件获取键盘的按键。
  8. e.metaKey 键盘事件中获取ctrl键。
  • 移除事件

通过unbind()方法移除事件。

unbind([type],[data]);

第一个参数是事件类型,第二个参数是将要移除的函数。如果没有参数,则删除所有绑定的事件。如果提供了事件类型作为参数,则只删除该类型的绑定事件。如果把绑定时传递的处理函数作为第二个参数,则只有这个特定的事件处理函数会被删除。

1 $("p").click(function(){2   $("#btn").unbind();3 });

只需要触发一次随后就立即删除绑定的情况,可以使用one()方法。one()方法可以为元素绑定处理函数。当处理函数触发一次后,立即被删除。

  • 模拟操作

  1. 常用模拟

使用trigger()方法完成模拟操作。 eg:   $("#btn").trigger("click"); 也可以简写为$("#btn").click();

2. 触发自定义事件

1 $(function(){2   $("div").bind("myclick",function(){3     $("body").append("<p>我的自定义事件</p>");4   });5   $("div").trigger("myclick");6 });

3. 传递数据

trigger(type,[data])方法有两个参数,第一个参数是触发的事件类型,第二次参数是要传递给事件处理函数的附加数据,以数组形式传递。

4. 执行默认操作

trigger()方法触发事件后,会执行浏览器默认操作。如果只想触发绑定事件,而不想执行浏览器默认操作,使用triggerHandler()方法。

二、jQuery中的动画

  • 动画类型

方法说明
hide()和show()同时修改高度宽度不透明度
fadeIn()和fadeOut()改变不透明度
slideUp()和slideDown()改变高度
fadeTo()改变不透明度
toggle()用来代替hide()和show()
slideToggle()用来代替slideUp()和slideDown()
fadeToggle()用来代替fadeIn()和fadeOut()
animate()自定义动画以上动画内部其实都是调用了animate方法
  •  停止动画

如果需要在某处停止动画,需要使用stop()方法。

stop([clearQueue],[gotoEnd]);

clearQueue和gotoEnd都是可选参数,为Boolean值。clearQueue是是否要清空未执行完的动画队列,gotoEnd是是否直接将正在执行的动画跳转至末状态。

  • 判断元素是否处于动画状态

为避免动画累积造成的动画与用户行为不一致,首先判断元素是否处于动画状态,如果元素不处于动画状态,才为元素添加新的动画,否则不添加。

1 if($(element).is(":animated")){  //判断元素是否处于动画状态2      //如果没有进行动画,则添加新的动画3 }

  • 延迟动画

使用delay()方法对动画进行延迟操作。delay()方法既可以推迟动画队列中函数的执行,也可以用于自定义队列。

$(this).animate({left:"400px"},3000)     .delay(1000);

  • 动画队列

当一个animate()方法中应用多个属性时,动画是同时发生的。当链式的写法应0用动画方法时,动画是按顺序发生的(除非queue选项值为false)。