jQuery_事件学习
Posted NotFoundObject
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery_事件学习相关的知识,希望对你有一定的参考价值。
一、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_事件学习的主要内容,如果未能解决你的问题,请参考以下文章