Jquery中的事件处理(自动触发事件,禁用按钮,悬停，失焦，滑动效果)

最新推荐文章于 2021-11-28 11:21:49 发布

最新推荐文章于 2021-11-28 11:21:49 发布 · 294 阅读

文章标签：

#javascript #xhtml #ViewUI

本文介绍了通过jQuery实现网页上的自动触发事件、点击后禁用按钮、处理鼠标事件（如点击、释放、划过）、元素获得与失去焦点、应用悬停效果、链接的滑动效果替换文本以及滚动效果等动态交互功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.自动触发事件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> .Red { color:Red; } .Green { color:Green; } .buttons { text-align:center; font-weight:bold; border:2 solid; width:100px; float:left; margin:5px; background-color:Gray; } </style> <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { $('.buttons').bind('click', function () { alert('you click' + $(this).text()); $('.Green').trigger('click'); }); }); </script> </head> <body> <span class="Red buttons">Red</span> <span class="Green buttons">Green</span> <p></p> </body> </html>

2.点击之后禁用按钮

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> .Red { color:Red; } .Green { color:Green; } .buttons { text-align:center; font-weight:bold; border:2 solid; width:100px; float:left; margin:5px; background-color:Gray; } </style> <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { $('.buttons').bind('click', function () { alert('you click' + $(this).text()); $('.buttons').unbind('click'); }); }); </script> </head> <body> <span class="Red buttons">Red</span> <span class="Green buttons">Green</span> <p></p> </body> </html>

3.处理鼠标事件(鼠标点击，释放，划过)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> .Red { color:Red; } .Green { color:Green; } .buttons { text-align:center; font-weight:bold; border:2 solid; width:100px; float:left; margin:5px; background-color:Gray; } </style> <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { $('.buttons').bind('mousedown', function () { alert('you mouse button is pressed down' + $(this).text()); }); $('.buttons').bind('mouseup', function () { alert('The mouse button is released over'+$(this).text()); }); $('.buttons').bind('mouseover', function () { alert('The mouse button is over' + $(this).text()); }); }); </script> </head> <body> <span class="Red buttons">Red</span> <span class="Green buttons">Green</span> <p></p> </body> </html>

4.元素获得，失去焦点

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> </style> <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { $("#Name").focus(function () { alert('Name has been focused'); } ); $("#Name").blur(function () { alert('Name lost focus'); }); }); </script> </head> <body> Name <input id="Name" type="text" /> <p></p> </body> </html>

5.应用悬停效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> .buttons { text-align:center; font-weight:bold; border:2 solid; width:100px; float:left; margin:5px; background-color:Gray; } .hover { cursor:crosshair; color:Blue; background-color:cyan; } </style> <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { //把两个事件处理程序添加到指定的元素，一个用于当鼠标进入元素时触发， //一个用于鼠标离开触发 $('.buttons').hover( function () { $(this).addClass("hover"); }, function () { $(this).removeClass("hover"); } ); }); </script> </head> <body> <span class="buttons">Click</span> </body> </html>

6.'更多'连接

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> </style> <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { $('#Message').hide(); $("#more").toggle( function () { $("#Message").show('slow'); $(this).text('read less'); }, function () { $('#Message').hide(); $(this).text('Read More'); } ) }); </script> </head> <body> <div>Welome to My Blog</div> <span id="more">Click More</span> <div id="Message"> I'm a software engineer development,i have been work in shanghai for about 6 months.I love this job. it got a lot of potential than my old job.In order to Earning money,I need to work hard and contribute to my team. </div> </body> </html>

7.以滑动效果替换文本

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> </style> <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { $('#message1').css({ 'backgroundColor': '#f00', 'text-align': 'center','width':'200px' }).hide(); $("#message2").css({ 'backgroundColor': 'gray', 'text-align': 'center','width': '200px' }).click(function () { $(this).slideUp(); $("#message1").slideDown(); }); }); </script> </head> <body> <p id="message1">Welome to My Blog</p> <p id="message2">Welcome to My Facebook</p> </body> </html>

8.滚动效果