一、click事件
click事件----鼠标单击事件
$(‘.bt‘).click(function() { alert("本身的事件");})
当class为bt的div被但单击时执行函数体的内容部分
$(‘.bt‘).click(function() { ?????????$(‘.bt2‘).click(); ???????})
当class为bt的div被但单击时执行class为bt2的div的click（）事件
栗子：<!DOCTYPE html><html><head> ???<meta http-equiv="Content-type" content="text/html; charset=utf-8" /> ???<title></title> ???<style> ??.bt{ ??????background:#F00; ?????????} ??.bt2{ ??????background:#f0f; ??????display:none; ??} ???</style> ???<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script></head><body> ???<div class="bt">click（）鼠标单击事件</div> ????<div class="bt2">间接响应</div> ???<script type="text/javascript"> ???????$(‘.bt‘).click(function() { ???????????alert("本身的事件"); ?????????$(‘.bt2‘).click(); ???????}) ????????$(‘.bt2‘).click(function() { ?????????alert("调用其他对象绑定的事件"); ???????})</script></body></html>二、mousemove（）和mousemout（）
鼠标移入（当鼠标移入到该元素的内部时触发）和移出事件（当鼠标移出元素的内部时触发）
栗子：
<!DOCTYPE html><html><head> ???<meta http-equiv="Content-type" content="text/html; charset=utf-8" /> ???<title></title> ???<style> ???</style> ???<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script></head><style> ???.test{ ???????height:100px; ???????width:100px; ???????background:#F00; ???} ???</style><body> ???<h2>.mousemove()方法</h2> ???<div class="test"></div> ???<script type="text/javascript"> ????//鼠标移入事件 ???$(".test").mousemove(function(){ ????????$(".test").css({"background":"blue","width":"100px","height":"100px"}); ???}); ???//鼠标移出事件 ????$(".test").mouseout(function(){ ????????$(".test").css({"background":"yellow","width":"50px","height":"50px"}); ????}); ???</script></body></html>三、hover事件
hover()方法是同时绑定 mouseenter和 mouseleave事件。
使用：hover(function(){
鼠标移入元素时触发的内容
},function(){
鼠标移出元素时触发的内容
})
栗子：
<!DOCTYPE html><html><head> ???<meta http-equiv="Content-type" content="text/html; charset=utf-8" /> ???<title></title> ???<style> ???.test{ ???????width:100px; ???????height:100px; ???????background:#000; ???????color:#FFF; ???} ???????</style> ???<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script></head><body> ???<div class="test">hover()事件</div> ???<script type="text/javascript"> ???$(".test").hover(function(){ ???????$(".test").css("background","red"); ???},function(){ ???????$(".test").css("background","blue"); ???}); ???</script></body></html>四、focusin（）聚焦事件和focusout（）失焦事件
聚焦事件--当该元素获得聚焦时触发
失焦事件---当该元素失去焦点时触发
栗子：
<!DOCTYPE html><html><head> ???<meta http-equiv="Content-type" content="text/html; charset=utf-8" /> ???<title></title> ???<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script></head> <body> ???<p>聚焦事件：<input class="in"/></p> ???<p>失焦事件：<input class="ot"/></p> ???<script type="text/javascript"> ???????//input聚焦元素增加一个边框 ???????$(".in").focusin(function() { ????????????$(this).css(‘border‘,‘2px solid red‘); ???????}); ???????$(".ot").focusout(function(){ ???????????alert("真的要放弃填写吗?"); ???????}); ???</script></body></html>jQuery_事件学习
原文地址：http://www.cnblogs.com/soulsjie/p/7811087.html