<!DOCTYPE html> <html> <head> <title>jquery的事件函数he事件切换</title> <script type="text/javascript" src="jquery-3.3.1.min.js"></script> <style type="text/css"> div{width: 100px;height: 100px;background: #ccc;border: 1px solid yellow} </style> </head> <body> blur();当元素失去焦点 (也就是鼠标移上或移下)<br> focus();当元素获得焦点;<br> change();当元素值发生改变;<br> click()点击事件;<br> dblclick();双击事件;<br> hover(over,out);鼠标移上触发一个函数,移下触发一个函数;<br> toggle()元素可见就切换隐藏,否则相反;<br> <input type="text" name=""> <div>请叫我鲁先生</div> <div class="like"></div> <button>点击</button> <script> $(document).ready(function(){ // blur();当元素失去焦点 (也就是鼠标移上或移下) // $('input').blur(function(){ // $('input').css('background','red') // }) // focus();当元素获得焦点; $('input').focus(function(){ $('input').css('background','red') }) // change();当元素值发生改变; // $('input').change(function(){ // $('input').css('background','red') // }) // hover(over,out);鼠标移上触发一个函数,移下触发一个函数;<br> // $('div').hover( // function(){ // $(this).css('background','blue') // }, // function(){ // $(this).css('color','#fff') // } // ) $('button').click(function(){ $('.like').toggle() }) }) </script> </body> </html>