JQuery绑定事件与移除事件、动画

迷南。 2022-07-29 11:58 301阅读 0赞

绑定事件：bind()、on()、live()、delegate()、keyup()；  
触发事件：trigger(‘keyup’)、keyup()；  
解绑事件：unbind()、off()、die()、undelegate()；  
符合事件：hover() 、toggle()；  
事件绑定：bind()；

--------------------

![这里写图片描述][20160417152007431]

**一、绑定事件**

JQuery绑定事件，除 `bing()` 方法之外，还有 `on()`、`live()`、`one()` 等  
事件的绑定方法。

**绑定事件分类：**

（a） 绑定单个事件

$("#btn").bind("click",function(){ 
        //代码块
        console.log(123);
    });

（b） 同时绑定多个事件

$("#btn").bind({
        mouseover:function(){ 
            $(this).css("background","red");
            console.log("代码块1");
        },
        mouseout:function(){ 
            console.log("代码块2");
        },
        click:function(){ 
            console.log("点击事件");
        }
    });

JQuery中的 bind()、live()、delegate()事件方法的区别，请查阅：  
[http://www.php100.com/html/program/jquery/2013/0905/5993.html][http_www.php100.com_html_program_jquery_2013_0905_5993.html]

**二、移除事件**

**（a）使用 unbind() 方法 移除事件**

$("button").click(function(){ 
        $("p").unbind();
      });

**三、JQuery动画**

在Jquery 中，提供了一系列显示动画效果的方法，其中，

1.  `show()` ——— 方法控制元素的显示；
2.  `hide()` ———-方法控制元素的显示；
3.  `toggle()` ——-方法切换元素的可见状态；
4.  `fadeIn()` ——-方法淡入；
5.  `fadeOut()` ——方法淡出；
6.  `slideUp()`——方法实现元素的收缩
7.  `slideDown()`—方法实现元素的展开

--------------------

[20160417152007431]: /images/20220724/10689e066480499e9b61a6ef31e255d4.png
[http_www.php100.com_html_program_jquery_2013_0905_5993.html]: http://www.php100.com/html/program/jquery/2013/0905/5993.html