jq事件api
1.点击事件 click()、dbclick()
2.焦点事件 focus()、blur()
3.改变事件 change()
4.选择事件 select()
5.表单提交事件 submit()
6.鼠标事件
鼠标针对对象事件 mousedown()、mouseup()、mouseover()、mouseout()
事件对象事件 mousemove()
鼠标子元素事件 mouseenter()、mouseleave()
7.窗口事件 resize()
8.键盘事件 keydown()、keyup()
案例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ width: 300px; line-height: 200px; background-color: pink; cursor: pointer; } </style> </head> <body> <button class="click">点击事件</button> <button class="dbclick">双点击事件</button> <div class="box"> <p>https://blog.csdn.net/muzidigbig</p> </div> <p>你既然认准一条道路,何必去打听要走多久。</p> <form action="#" method="get"> <p>焦点事件:<input type="text" value="muzidagbig"></p> <P><input type="file"></P> <p><input type="submit" value="提交"></p> </form> </body> <script src="jquery-3.3.1.js"></script> <script> //1.页面载入事件,入口函数ready() $(document).ready(function () { //2.点击事件 $('.click').click(function () { $('.box').hide(2000,function () { console.log('点击事件结束!'); }); }); //3.双点击事件 $('.dbclick').dblclick(function () { $('.box').show(2000,function () { console.log('双点击事件结束!'); }); }); //4.获得焦点事件 $('input[type=text]').focus(function () { console.log('获取焦点事件结束!'); }); //5.失去焦点事件 $('input[type=text]').blur(function () { console.log('失去焦点事件结束!'); }); //6.改变事件;文本内容改变时触发 $('input[type=text]').change(function () { console.log('改变事件结束!'); }); //7.选择事件 $('input[type=text]').select(function () { $('input[type=text]').after("输入有误!") }); //8.form表单提交使劲按;但是表单中应该有type='submit'按钮 $('form').submit(function () { console.log('表单已提交!'); }); //9.鼠标放在元素上点击后触发 $('.box').mousedown(function () { console.log('鼠标放在元素上点击后触发!'); }); //10.mouseup事件会在鼠标点击对象释放时 $('.box').mouseup(function () { $('.box').fadeOut(2000).delay(1000).fadeIn(2000); }); //11.mouseover事件会在鼠标移入对象时触发 $('.box').mouseover(function () { $('.box').fadeTo(2000,.5); }); //12.mouseout事件在鼠标从元素上离开后会触发 $('.box').mouseout(function () { console.log('我离开了!') }); //13.mousemove 事件通过鼠标在元素上移动来触发。 //事件处理函数会被传递一个变量——事件对象,其.clientX 和 .clientY 属性代表鼠标的坐标 $('.box').mousemove(function (ev) { console.log('clientX:'+ev.clientX+'clientY:'+ev.clientY) }); //14.mouseenter()与 mouseover 事件不同,只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。 //如果鼠标指针穿过任何子元素,同样会触发 mouseover 事件。 $('.box').mouseenter(function () { console.log('mouseenter 穿过事件') }); //15.mouseleave()与 mouseout 事件不同,只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件。 //如果鼠标指针离开任何子元素,同样会触发 mouseout 事件。 $('.box').mouseleave(function () { console.log('mouseleave 离开事件') }); //16.窗口事件resize([[data],fn]) 窗口改变时触发 $(window).resize(function () { console.log('window窗口已发生变化!') }); //17.unload([[data],fn])只应用于 window 对象。 // $(window).unload(function () { // alert("Bye now!"); // }); }) </script> </html>
键盘事件:keydown()/keyup()
案例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ width: 300px; padding: 50px 0; background-color: pink; cursor: pointer; text-align: center; } </style> </head> <body> <div class="box"> <p>https://blog.csdn.net/muzidigbig</p> </div> <p>你既然认准一条道路,何必去打听要走多久。</p> </body> <script src="jquery-3.3.1.js"></script> <script> var num = 1; console.log('初始num:'+num); $(document).keydown(function (event) { console.log(event.keyCode); var key = event.keyCode; if(key == 38){ num += 1; console.log('num加1:'+num); }else if(key == 40){ num -= 1; console.log('num减1:'+num); if(num < 0 | num ==0){ num = 0; alert('已经减到最底层不能再减了!呵呵呵……bye'); } } }); </script> </html>
若有不足请多多指教!希望给您带来帮助!