jquery中的事件是对javascript事件的封装
基础事件
鼠标事件 --当用户在文档上移动或单击鼠标时产生的事件
|
方法 |
描述 |
执行时机 |
|
click( ) |
触发或将函数绑定到指定元素的click事件 |
单击鼠标时 |
|
mouseover( ) |
触发或将函数绑定到指定元素的mouseover事件 |
鼠标指针移过时 |
|
mouseout( ) |
触发或将函数绑定到指定元素的mouseout事件 |
鼠标指针移出时 |
|
mouseenter( ) |
触发或将函数绑定到指定元素的mouseenter事件 |
鼠标指针进入时 |
|
mouseleave( ) |
触发或将函数绑定到指定元素的mouseleave事件 |
鼠标指针离开时 |
示例：
$("#panel .head").mouseover(function(){
$(this).next().show();
})
$("#panel .head").mouseout(function(){
$(this).next().hide();
})
鼠标事件方法的区别
|
方法 |
相同点 |
不同点 |
|
mouseover( ) |
鼠标进入被选元素时会触发 |
鼠标在其被选元素的子元素上来回进入时： 触发mouseover( ) 不触发mouseenter( ) |
|
mouseenter( ) |
||
|
mouseout( ) |
鼠标离开被选元素时会触发 |
鼠标在其被选元素的子元素上来回离开时： 触发mouseout( ) 不触发mouseleave( ) |
|
mouseleave( ) |
键盘事件 --用户每次按下或释放键盘上的键时都会产生事件
|
keydown( ) |
触发或将函数绑定到指定元素的keydown事件 |
按下键盘时 |
|
keyup( ) |
触发或将函数绑定到指定元素的keyup事件 |
释放按键时 |
|
keypress( ) |
触发或将函数绑定到指定元素的keypress事件 |
产生可打印的字符时 |
示例：实现按键时特效
$("[type=password]").keyup(function () {
$("#content").append("keyup");
}).keydown(function (e) {
$("#content").append(" keydown");
}).keypress(function () {
$("#content").append(" keypress");
});
$(document).keydown(function (event) {
if (event.keyCode == "13") {//按回车键
alert("确认要提交么？");
}
});
window事件
表单事件
绑定时间与移除事件
绑定事件使用bind（）方法 语法：bind（type，data，fn）；=（类型，可选函数，处理函数）
示例： --绑定单个事件
$(document).ready(function(){
$(".on").bind("mouseover",function(){
$(".topDown").show();
});
});
示例： --绑定多个事件
$(".top-m .on").bind({
mouseover:function(){
$(".topDown").show();
},
mouseout:function(){
$(".topDown").hide();
}
});
移除事件
使用unbind（）方法
语法：unbind（type，fn；）=（事件类型，处理函数）
当unbind（）不带参数时，表示移除所有绑定的全部时间
示例：$("#del").click(function(){
$("#nav li:first").unbind("click", content1)
});
复合事件
hover（）方法
mouseover与mouseout事件的结合
示例：$(".top-m .on").hover(function(){
//光标移入时触发
$(".topDown").show();
},
function(){
//光标移除时触发
$(".topDown").hide();
}
);
toggle（）方法
不带参数时，相当于show（）和hide（）方法的作用
语法：toggle（fn1，fn2，...，fnN）；
示例：$("input").toggle(
function(){$("body").css("background","#ff0000");},
function(){$("body").css("background","#00ff00");},
function(){$("body").css("background","#0000ff");}
)
动画
元素的显示与隐藏
show（）控制元素的显示，hide（）控制元素的隐藏
语法：$(selector).show([speed],[callback]); --speed：表示速度，callback：show函数执行完，要执行的函数
$(selector).hide([speed],[callback]);
改变元素透明度
fadeIn（）淡入 fadeOut（）淡出
语法：$(selector).fadeIn([speed],[callback]);
$(selector).fadeOut([speed],[callback]);
改变元素高度
slideDown（）可以使元素逐步延伸显示
slideUp（）使元素逐步缩短直至隐藏
语法：$(selector).slideUp ([speed],[callback]);
$(selector).slideDown ([speed],[callback]);
示例：$(document).ready(function() {
$("h2").click(function(){
$(".txt").slideUp("slow");
$(".txt").slideDown("slow");
});
});
自定义动画
语法：$(selector). animate({params},speed,callback);
示例：$(this).animate({left: "400px", height:"200px" ,opacity: "1"},
3 3000).animate({top: "200px" , width :"200px"},
3 3000 ).fadeOut("slow");