click 单机鼠标时
dblclick 鼠标双击时
mousedown()/up 鼠标按下/弹起时
mouseover/out 鼠标移入/移出时
hover 相当于 mouseover 与 mouseout 事件的组合
toggle 鼠标连续单机事件
<script language="javascript" src="../js/jquery-1.8.2.js"></script> <script language="javascript"> $(function(){ //鼠标点击双击 $("input[type='button']").click(function(){ $(this).css("background-color","#ff0000") }) $("input[type='button']").dblclick(function(){ $(this).css("color","#0000ff") }) //鼠标按下按起 $("li:first").mousedown(function(){ $(this).css("background-color","#00ff00") }) $("li:first").mouseup(function(){ $(this).css("background-color","#bbbbbb") }) //鼠标移入移出 $("li").mouseover(function(){ $(this).addClass("c1"); }) $("li").mouseout(function(){ // $(this).removeClass("c1")//删除指定样式 $(this).removeClass()//删除所有的样式 }) //hover mouseover 与 mouseout 事件的组合 $("li:last").hover( function(){ $(this).css("color","#ff0000") }, function(){ $(this).css("font-size","32px") } ) //toggle 鼠标连续单机事件 $("li:even").toggle( function(){ $(this).css("height","40px") }, function(){ $(this).css("width","300px") }, function(){ $(this).css("font-size","40px") } ) }) </script> <body> <ul> <li>首页</li> <li>学院介绍</li> <li>专业介绍</li> <li>就业</li> </ul> <input type="button" value="鼠标点击" /> </body>keydown 按下键盘时
keyup 放开键盘时
keypress 产生可打印的字符时
<script language="javascript" src="../js/jquery-1.8.2.js"></script> <script language="javascript"> $(function(){ //按下键盘时 $("input[type='text']").keydown(function(event){ if(event.keyCode=="13"){ if(confirm("确认要提交嘛")){ } } }) //放开键盘时 $("input[type='text']").keyup(function(event){ if(event.keyCode=="13"){ alert("提交成功"); } }) //放开键盘时 $("input[type='text']").keypress(function(event){ alert("产生可打印的字符"); }) }) </script> <body> <input type="text" value="默认值"/> </body>focus 获得焦点时
blur 失去焦点时
submit 提交时
<script language="javascript" src="../js/jquery-1.8.2.js"></script> <script language="javascript"> $(function(){ //获取和失去焦点触发的事件 $("input[type='text']").focus(function(){ $(this).css("background-color","#ff0000") }) $("input[type='text']").blur(function(){ $(this).css("background-color","#00ff00") }) }) </script> <body> <h2>用户登录</h2> <form action="" method="post"> 输入姓名:<input type="text" name="uname" id="nm1"/> <br/><input type="submit" value="提交"/> </form> </body>格式
bind(type,fn)
多个事件绑定一个函数
<script language="javascript"> $(function(){ $("h2").bind("click mouseover",function(){ $(this).css({"color":"#ff0000"}) }) }) </script> <body> <h2>标题二</h2> </body>多个事件绑定多个函数
<script language="javascript"> $(function(){ $("h2").bind("click mouseover",function(){ $(this).css({"color":"#ff0000"}) }) }) </script> <body> <input type="button" value="单击"/> </body显示隐藏元素
show(long millions) 通过时间控制元素渐变显示速度
hide(long millions) 通过时间控制元素渐变隐藏速度
淡入淡出元素
fadeIn(long millions) 通过时间控制元素渐变淡入速度
fadeOut(long millions) 通过时间控制元素渐变淡出速度
缩进展开元素
slideUp(long millions) 通过时间控制元素渐变缩进速度
slideDown(long millions) 通过时间控制元素渐变展开速度
<script language="javascript" src="../js/jquery-1.8.2.js"></script> <script language="javascript"> $(function(){ //通过时间控制元素渐变显示/隐藏速度 $("input[value='显示']").click(function(){ $("img:hidden").show(3000) }) $("input[value='隐藏']").click(function(){ $("img:visible").hide(3000) }) // 通过时间控制元素渐变淡入/淡出速度 $("input[value='淡入']").click(function(){ $("img:hidden").fadeIn(3000) }) $("input[value='淡出']").click(function(){ $("img:visible").fadeOut(3000) }) //通过时间控制元素缩进/展开速度 $("input[value='缩进']").click(function(){ $("img:hidden").slideDown(3000) }) $("input[value='展开']").click(function(){ $("img:visible").slideUp(3000) }) }) </script> <body> <img src="../QQ图片20190530124206.gif" width="300" height="350" /> <br/> <input type="button" value="显示" /><input type="button" value="隐藏" /><br/> <input type="button" value="淡入" /><input type="button" value="淡出" /><br/> <input type="button" value="缩进" /><input type="button" value="展开" /><br/> </body> </html>也可指定关键字fase,slow,normal入参控制速度
