jQuery中的事件

事件绑定函数:bind(type, [, data], fn);

3个参数说明如下:

type:

blur: 元素失去焦点 a, input, textarea, button, select, label, map, area

focus:元素获得焦点 a, input, textarea, button, select, label, map, area

load: 某个页面或图像完成加载。window, img

resize: 窗口或框架被调整尺寸. window, iframe, frame

scroll: 滚动文档的可视部分。window

unload: 用户退出页面。window

click:点击事件。

dbclick:双击事件

mousedown:鼠标按键被按下。

mouseup:鼠标按键弹起。

mousemove:鼠标移动

mouseover:鼠标移入某元素,会形成事件冒泡

mouseout:鼠标移出某元素,会形成事件冒泡

mouseenter:鼠标移入某元素,不会形成事件冒泡

mouseleave:鼠标移出某元素,不会形成事件冒泡

change: 用户改变域的内容。input ,textarea, select

select: 文本被选定。document,input,textarea

submit:提交。

keydown:按键被按下

keypress:按键被按下或按住。

keyup: 按键弹起

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

第三个参数则是用来绑定的处理函数

<div >

<h5 class="head">什么是jquery</h5>

<div class="content">

jQuery是继.........

</div>

</div>

绑定单击事件

$(function(){

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

$(this).next("div content").show();

})

})

加强效果,使用jQuery中的is()方法来判断元素是否显示。jQuery代码如下:

$function(){

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

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

$(this).next("div.content").hide(); }

else{

$(this).next("div.content").show();

}

})

}

合成事件 hover(enter, leave)

用途:用于模拟光标悬停事件。当光标移动到元素上时,会触发指定的第一个函数(enter),当移出元素时会触发第二个函数(leave)

$function(){

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

function(){$(this).next("div.content").hide(); }

,function(){

$(this).next("div.content").show();

})

}

合成事件 toggle(fn1, fn2,...fnN)

用途:用于模拟鼠标连续单击事件。当第一个单击元素时,触发第一个函数,第二次触发第二个函数,然后循环。

$function(){

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

function(){$(this).next("div.content").show(); }

,function(){

$(this).next("div.content").hide();

})

}

toggle()还可用于切换元素的可见状态:

$function(){

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

function(){$(this).next("div.content").toggle(); }

,function(){

$(this).next("div.content").toggle();

})

}