鼠标事件
click
mouseover
mouseout
$(".nav li").click(function(){
$(this).addClass("redColor");
});
//鼠标放上来
$("li").mouseover(function(){
$(this).addClass("redColor");
});
//鼠标离开
$("li").mouseout(function(){
$(this).removeClass("redColor");
});
键盘事件
keydown
keyup
keypress
//事件触发顺序:keydown - > keypress - > keyup
//keydown和keyup不分大小写 keyCode都是65-90,keypress区分大小写 大写是65-90 小写97-122
$("input[name=userName]").keydown(function(event){ //鼠标按下去
$("#desc").append(event.keyCode + ",keydown、");
}).keypress(function(event){ //与keydown类似,不能对系统功能键(例如:后退、删除等,其中对中文输入法不能有效响应)进行正常的响应
$("#desc").append(event.keyCode + ",keypress、");
}).keyup(function(event){ //松开鼠标
$("#desc").append(event.keyCode + ",keyup//");
});
焦点事件
focus
blur
$(".inputName").focus(function(){
$(this).css("background-color", "orange");
});
$(".inputName").blur(function(){
$(this).css("background-color", "blue");
});
复合事件
hover
$(".myOrder").hover(
function(){
$(".menu_2").css("display", "block");
$(".menu_2").stop(true, true).show(1000);
//.stop(true, true)表示停止之前的动画
},
function(){
$(".menu_2").css("display", "none");
$(".menu_2").stop(true, true).hide(1000);
}
);
toggle
//循环切换事件
$("body").toggle(
function(){
$(this).css("background-color", "red");
},
function(){
$(this).css("background-color", "blue");
},
function(){
$(this).css("background-color", "yellow");
}
);
//切换是否可见
$('.more').click(function(){
$('tr:gt(4)').toggle();
});
动画
show()
hide()
toggle()
滑动:由左至右
slideToggle
滑动:由下至上
fadeIn()
fadeOut()
setInterval(function(){
$("div").fadeIn(500).fadeOut(500);
});
slideUp()
slideDown()
$(function(){
$("input[type=button]").click(function(){
$(".txt").slideUp("show");
$(".txt").slideDown("show");
});
});
animate
//切换可见状态:从右到左隐藏
$(".btn").click(function(){
$(".addContent").toggle("slow");
});
//切换可见状态:从下到上进行隐藏
$(".btnSlideToggle").click(function(){
$(".addContent").slideToggle("slow");
});
//切换可见:从右上角到左下角
$(".btnanimate").click(function(){
$(".addContent").animate({
"width":'0px',
"height":'0px',
"opicty":'0',
"margin-top":'300px'
}, 1000).animate({
"width":'300px',
"height":'300px',
"opicty":'1',
"margin-top":'0px'
}, 1000);
});