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: 用户退出页面。windowclick:点击事件。
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();
})
}