标签：
1、事件绑定——bind(type,[params],fn)
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();
}
});
});
//当发现相同的选择器在代码中出现多次，用变量把它缓存起来，更多的jQuery性能优化后面的章节会再提到
2、改变绑定事件的类型
上面的例子中，给元素绑定的事件类型是click,当用户单击的时候会触发绑定的事件，然后执行时间的函数代码，现在把事件类型换成mouseover和mouseout,即当鼠标滑过的时候就触发事件
//等待Dom加载完毕，找到标题所在的元素，绑定mouseover事件，找到内容元素，显示内容，找到标题所在的元素，绑定mouseout事件，找到内容元素后，隐藏内容
$(function(){
var $content=$(this).next();
$("#panel h5.head").bind("mouseover",function(){
$content.show();
}).bind("mouseover",function(){
$content.hide();
});
});
像click,mouseover,mouseout这类事件，在程序中经常会使用到，jQuery为此也提供了简写方法，简写方法和bind()方法类似，实现的效果也相同，唯一的区别就是能够减少代码量
$(function(){
$("#panel h5.head").mouseover(function(){$content.show()}).mouseout(function($content.hide()));
});
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();
});
});
attention:css中有伪类选择符，例如“：hover”,当用户光标悬停在元素上时，会改变元素的外观，在大多数符合规范的浏览器中，伪类选择符可以用于任何元素，然而在IE6中浏览器中，伪类选择付仅可用于超链接元素，对于其他元素，可以使用jQuery中的hover(),hover()准确来说是的提到了bind("mouseenter") and bind("mouseleave"),而不是替代bind(mouseover) and bind("mouseout"),因此当需要触发hover()的第二个函数时，需要用trigger("mouseleave"),而不是trigger("mouseout")
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();
}
});
标签：
原文地址：http://www.cnblogs.com/ypcute/p/5672905.html
