jQuery的事件处理
1.页面载入事件
| $(document).ready() -- onload |
复制
2.事件绑定(bind)
复制
- type:表示事件类型(click、mouseover、mouseout…)
- [data]:可选参数,表示传递给事件对象的额外数据
- fn:是一个函数,(事件处理函数),当事件发生时执行的函数。
| <body> |
| <button id="btn">确定</button> |
| </body> |
| <script> |
| $(function(){ |
| |
| $("#btn").bind("click",function(){ |
| |
| alert("事件绑定"); |
| }) |
| }) |
| </script> |
复制
3.反绑定事件(unbind)
| unbind([type],[data]):删除绑定的事件 |
复制
- 不带参数:删除元素上绑定的所有事件
- 带参数:[type]表示事件类型
4.一次性绑定事件(one)
一次性绑定事件(one):绑定的事件只能执行一次
| <body> |
| <img src="https://blog.csdn.net/weixin_62343228/images/p1.jpg" alt="" width="300" height="180"> |
| </body> |
| <script> |
| $(function(){ |
| |
| |
| $("img").bind("mouseover",function(){ |
| |
| $("img").attr({ |
| |
| src:"../../images/p2.jpg", |
| }) |
| }) |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| $("img").one("mouseout",function(){ |
| |
| $(this).attr({ |
| |
| src:"https://blog.csdn.net/weixin_62343228/images/p1.jpg", |
| }) |
| }) |
| }) |
| </script> |
复制
5.模拟鼠标悬停(hover)
| <body> |
| <div style="width: 200px; height: 200px; |
复制