你的位置:首页 > Java教程

[Java教程]【jQuery基础学习】03 jQuery中的事件与动画


关于jQuery中的事件

js与HTML之间的交互是通过用户和浏览器操作页面时引发的事件来处理的。

jQuery增加并扩展了基本的事件处理机制,jQuery不仅提供了更加优雅的事件处理方法,而且极大地增强了事件处理能力。

$(document).ready()只需要等文档结构加载完就能执行,而window.onload还要等到文档元素所关联的元素(比如图片)加载完才行。

而因为图片未加载完时ready()事件就执行了,因此图片的长宽属性未必有效,要想解决这个问题可以用$(document).load()方法,其等价于window.onload。

jQuery的事件可以多次使用,而window.onload只能使用一次。

$(document)也可以简写为$()

$().load(){ alert("Hello world!"); }

事件绑定

也就是bind()方法,有三个参数,调用格式:bind(type[,data],fn).

type参数:

表示事件类型。类型包括:blur,focus,load,resize,scroll,unload,click,dbclick,mousedown,mouseup,mousemove,mouseover,mouseout,mouseenter,mouseleave,change,select,submit,keydown,keypress,keyup,和error等,当然也可以自定义名称。

data参数:

作为event的属性值传递给事件对象的额外数据对象,为可选值。

fn参数:

用来绑定的处理函数

举个使用例子:

$(function(){  $("#myDiv").bind("click",function(){    $(this).hide();//这里this表示绑定了此行为的元素,即Id为mydiv的元素  })})

当然像一些经常用到的比如click,mouseover这类事件,在程序里经常会使用到,所以jQuery提供了一套简写的方法。

$(function(){  $("#myDiv").click(function(){    $(this).hide();//这里this表示绑定了此行为的元素,即Id为mydiv的元素  });})

合成事件

jQuery有两个合成事件:hover()和toggle().好吧,你可以理解为又封装了一层.

前面已经讲过toggle()了,相当于一个开关。这里的hover()差不多,相当于同时运用了mouseenter和mouseleave。

$("#myDiv").hover(function(){  $(this).next.show();},function(){  $(this).next.hide();})

而toggle类似的用法,懒得讲了。不过toggle还有另一种玩法,如下:

$("#myDiv").toggle(function(){  $(this).next.toggle();//如果元素隐藏,调用toggle()就显示},function(){  $(this).next.toggle();//如果元素显示,调用toggle()就隐藏})

事件冒泡

在页面上可以有多个事件,也可以在多个元素上响应同一事件。

那么现在比如一个div里嵌套了一个span,这两个同时都有click事件,那么当你点击了span的同时,div上的click事件也会在span的点击事件执行之后被执行。

而之所以把这种情况称为事件冒泡,就是因为事件会按照DOM的层次结构像水泡一样不断向上,直到顶端。

  • 关于事件对象的使用
    $(function(){  $("#headDiv").click(function(event){    alert(event.pageX);//event只有事件处理函数能够访问到,事件处理函数执行完毕,此对象被销毁  })})

  • 关于停止事件冒泡(简单来说就是我点了span请不要触发div的点击事件)。
    $(function(){  $("#headDiv").click(function(event){    event.stopPropagation();//阻止事件冒泡,也可以用return false;这种方法阻止,虽然js也有这个方法,但是js的在IE里无效,而jQuery封装了的这个兼容IE  })})

  • 阻止默认行为,默认行为包括单击链接会跳转,单击提交按钮表单会提交。
    $(function(){  $("a").click(function(event){    event.preventDefault();//阻止默认行为,虽然js也有这个方法,但是js的在IE里无效,而jQuery封装了的这个兼容IE     //return false;//也可以用这种方法阻止  })})

    看到了吧,阻止事件冒泡和阻止默认行为都可以用return false;来解决,所以记住return false就好了。

  • 事件捕获,并非所有浏览器都支持事件捕获,所以jQuery也不支持。只能用JS实现,然而我的意思是算了吧,我选择不知道。就知道事件捕获的顺序和冒泡顺序相反就好了。

事件对象的属性

  • event.type                          会得到事件的类型,比如click会得到“click”
  • event.preventDefault()         阻止默认行为
  • event.stopPropagation()       阻止冒泡
  • event.target                       获取触发事件的元素
  • event.relatedTarget             触发事件的元素的相关元素,比如mouseover的之前的元素,mouseout之后的元素
  • event.pageX和event.pageY   获取光标相对于页面的X坐标和Y坐标
  • event.which                        在鼠标单击事件中获取鼠标的左、中、右键
    $("a").mousedown(function(e){ alert(e.which);//1=左键,2为中键,3为右键})

  • event.metaKey                   获取ctrl键是否按下

移除事件

  • unbind() 移除按钮元素上以前注册的事件
    $(function(){  $("div").click(function(event){   $("#btn").unbind("click");//移除btn上绑定的click事件,如果不带参数,那么就移除btn上所有的事件。如果把绑定的事件函数对象当做第二个参数传入,那么就只删除这个事件函数  });})

  • one()  绑定事件函数,当处理函数触发一次后,立即被删除
    $(function(){  $("div").one("click",function(){    alert("one的用法和bind一样");  });})

模拟操作

以上的事件例子多半是用户操作去触发事件,但是有时我们自己也会去模拟用户操作以达到相同效果。

在jQuery中,可以使用trigger方法完成模拟操作。

$("$btn").trigger("click");//模拟操作$("$btn").click();//效果同上

当然trigger也可以触发自己定义的事件

$(function(){  $("div").bind("troyClick",function(){    alert("我是自定义事件");  });  $("div").trigger("troyClick");})

trigger方法的第二个参数为数组类型,加上后表示传递的参数数组

$(function(){  $("div").bind("troyClick",function(event,msg1,msg2){    alert("我是自定义事件,我的参数为:"+msg1+","+msg2);  });  $("div").trigger("troyClick",["参数1","参数2"]);})

trigger方法触发事件后,会执行浏览器默认操作。如:$("input").trigger("focus")后不仅仅会执行focus操作,还会执行input本身的获取焦点操作。那么这个时候用triggerHandler就只触发focus操作,不执行获取焦点的默认操作。

其他玩法

一次性绑多个事件:

 $("div").bind("mouseover mouseout",function(){    $(this).toggleClass("over"); });

添加事件命名空间,利于管理:

  $("div").bind("click.myNamespace",function(){    alert("1");  });  $("div").bind("dbclick.myNamespace",function(){    alert("2");  });  $("div").unbind(".myNamespace");//执行后上面两个事件都被解绑了

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

$("div").bind("click.myNamespace",function(){  alert("1");});$("div").bind("click",function(){  alert("2");});$("div").trigger("click!");//感叹号的作用是匹配所有不包含在命名控件中的click方法

关于jQuery中的动画

  • show()和hide()    显隐操作,改变元素高宽和不透明度
    $("#mydiv").show(1000);//div会在一秒之类慢慢显示出来

  • fadeIn()和fadeOut()  改变元素透明度
    $("#headDiv").click(function(){  $(this).next().fadeOut();//逐渐消失});

     

  • slideUp()和slideDown  改变元素高度
    $("#headDiv").click(function(){  $(this).next().slideDown();//元素由上向下显示,});

  • animate()   自定义动画,语法结构为animate(params,speed,callback )
  • 好吧,未完待续好了,明天继续