JQ——事件(鼠标按键)
Posted zhai1997
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JQ——事件(鼠标按键)相关的知识,希望对你有一定的参考价值。
1、鼠标事件
(1)鼠标单击:click
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>鼠标单击事件</title> <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script> <script> $(function(){ $("#button").click(function(){ alert("按键被单击了!"); }); }); </script> </head> <body> <button id="button">请点击!</button> </body> </html>
(2)鼠标双击事件:dblclick
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>鼠标单击事件</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(function(){ $("button").dblclick(function(){ alert("鼠标双击了!!"); }); }); </script> </head> <body> <button>请双击,以触发事件!</button> </body> </html>
(3)mouseenter鼠标移动到相应元素上的时候触发,mouseleave鼠标不在相应的元素上的时候触发:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>鼠标单击事件</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(function(){ $("p").mouseenter(function(){ alert("鼠标移动到了段落上!"); }); $("p").mouseleave(function(){ alert("鼠标从段落上移开了!"); }); }); </script> </head> <body> <p>Just go. Just go. I just keep going until it feels right to me.</p> </body> </html>
(4)hover():鼠标悬停在元素上的时候触发
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>鼠标悬停事件</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(function(){ $("p").hover(function(){ $("p").css("background-color","red"); },function(){ $("p").css("background-color","yellow"); }); }); </script> </head> <body> <p>Just go. Just go. I just keep going until it feels right to me.</p> </body> </html>
2、键盘事件
(1)keypress():按键被按下
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>鼠标悬停事件</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(function(){ $("input").keypress(function(){ alert("有按键按下了!"); }); }); </script> </head> <body> <input type="text"> </body> </html>
(2)keyup():按键抬起触发
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>按键事件</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(function(){ $("input").keyup(function(){ alert("按键抬起了!"); }); }); </script> </head> <body> <input type="text"> </body> </html>
按下按键没有警告框,只有按键抬起的时候对话框才会出现。
(3)keydown():按键按下有效
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>按键事件</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(function(){ $("input").keydown(function(){ alert("按键按下了!"); }); }); </script> </head> <body> <input type="text"> </body> </html>
与keypress不同,keydown是一个过程,只有在按键按下的过程中才会有对话框出现,按键抬起对话框立即消失。
以上是关于JQ——事件(鼠标按键)的主要内容,如果未能解决你的问题,请参考以下文章