jQuery中的事件与动画

1.简单的单击事件

<script type="text/javascript">$(function(){$("#btn").click(function(){alert($(this).val());});});</script>

2.事件绑定

type:事件类型，包括blur,focus,load,resize,scroll,unload,click,dbclick,mousedouwn,mouseup,mousemove,mouseover,mouseout,mouseenter,mouseleave,change,select,submit,keydown,keypress,keyup,error,

params:可选参数，作为event.data属性值传递给事件对象的额外数据对象

fn:绑定的处理函数

*jQuery中的时间绑定类型比普通的javascript少了on,如onclick()——click()

<div id="panel"><h5 class="head">jQuery的事件绑定</h5><div class="content">It's a ......</div></div>

//当Dom加载完毕，找到标题所在的元素，绑定click事件，找到内容元素，将内容元素显示

$(function(){$("#panel").bind("click",function(){$(this).next().show();})});

与ready()方法一样，bind()方法也可以多次调用，this引用的是相应行为的Dom元素，为了使Dom 元素能够使用jQuery中的方法，可以使用$(this)将其转换为jQuery对象

//承上，显示内容后，再点击标题后，内容被隐藏

//当Dom加载完毕，找到标题所在的元素，绑定click事件，找到内容元素，如果内容元素是显示的，则隐藏，如果内容是隐藏的，则显示

$(function(){

$("#panel h5.head").bind("click",

function(){

if($(this).next().is(":visible")){

$(this).next().hide();}

else{$(this).next().show();

}});

});

//$(this).next()被多次使用，因此可以为它定义一个局部变量

var $content=$(this).next();

$(function(){

$("#panel h5.head").bind(function(){

var $content=$(this).next();

if($content.is(":visible"))

{

$content.hide();

}

else

{

$content.show();

}

});

});

3.合成事件

jQuery有两个合成事件——hover()和toggle(),类似前面的ready()，hover()，toggle()方法都属于jQuery自定义方法

hover：用于模拟鼠标光标悬停事件，当光标移动到元素上时，会触发指定的第一个函数——enter,当鼠标移出这个元素时，会触发指定的第二个函数——leave

$(function(){

$("#panel h5.head").hover(function(){

$content.show();

}).function(){

$content.hide();

}

});

==>代码运行效果与下面代码运行效果是一样的

$(function(){

$("#panel h5.head").mouseover(function(){

$content.show();

}).mouseout(function(){

$(this).next().hide();

});

});

4.toggle(fnN):toggle()

用来模拟鼠标连续单击事件，第一次单击元素时，触发指定的第一个函数，当在此点击同一个元素时，则触发第二个函数，如果有更多的函数，则依次触发，知道最后一$("#panel h5.head").toggle(

function(){$content.show();},

function(){$content.hide();});

toggle()在jQuery中还有另外一个作用：切换元素的可见状态，如果元素是可见的，单击切换后则为隐藏，如果元素是隐藏的，单击切换后则为可见的，则上面的代码可写成如下jQuery代码：

$(function(){

$("#panel h5.head").toggle(function(){

$content.toggle();

$(this).addClass("highlight");

}),function(){

$(this).removeClass("highlight");

$content.toggle();

}

});