事件的绑定和解除

最新推荐文章于 2022-02-25 07:17:27 发布

原创最新推荐文章于 2022-02-25 07:17:27 发布 · 388 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一个使用jQuery进行事件绑定与操作的基本示例，包括按钮点击切换图片显示、事件绑定与解除绑定以及鼠标移入触发事件等功能。通过这些示例展示了jQuery简化DOM操作和事件处理的方式。

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <script src="js/jquery-1.11.0.min.js.js" charset="UTF-8"></script>
       <style>
           #img{
               width: 50px;
               height: 50px;
           }
       </style>
   </head>
   <body>
       <img id="img" src="img/android-alarm.png" />
       <br />
       <input type="button" id="toggle" value="toggle" />
       <br />
       <input type="button" id="btn1" value="绑定事件" />
       <input type="button" id="btn2" value="被绑定的按钮" />
       <input type="button" id="btn3" value="解除绑定按钮" />
       <input type="button" id="btn4" value="鼠标移入事件" />
   </body>
   <script type="text/javascript">
       $("#toggle").click(function(){
           $("#img").toggle(3000);
       })

       $("#btn1").click(function(){
           $("#btn2").bind("click",function(){
               alert("aaa")
           })
       })

       $("#btn3").click(function(){
           $("#btn2").unbind("click")
       })

       $("#btn4").mouseover(function(){
           alert("aaa")
       })

   </script>
</html>