首頁 >web前端 >js教程 >JQuery綁定事件與移除事件、動畫

JQuery綁定事件與移除事件、動畫

巴扎黑
巴扎黑原創
2017-06-30 11:37:021398瀏覽


綁定事件:bind()、on()、live()、delegate()、keyup();
觸發事件:trigger( 'keyup')、keyup();
解綁事件:unbind()、off()、die()、undelegate();
符合事件:hover() 、toggle();
事件綁定:bind();


JQuery綁定事件與移除事件、動畫

一、綁定事件

       #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



二、移除事件

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

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

三、JQuery動畫

#在Jquery 中,提供了一系列顯示動畫效果的方法,其中,

  1. show() ——— 方法控制元素的顯示;

  2. hide() — ——-方法控制元素的顯示;

  3. toggle() ——-方法切換元素的可見光狀態

  4. fadeIn() ——-方法淡入;

  5. fadeOut() ——方法淡出;

  6. slideUp()——方法實作元素的縮略

  7. slideDown()—方法實作元素的展開


綁定事件:bind()、on()、live()、delegate()、keyup();
觸發事件:trigger('keyup')、keyup();
解綁事件:unbind()、off()、die()、undelegate();
符合事件:hover() 、toggle ();
事件綁定:bind();


JQuery綁定事件與移除事件、動畫





      JQuery綁定事件,除bing() 方法之外,還有

on()

live()

one ()

事件的綁定方法。
  1. 綁定事件分類:

    (a) 綁定單一事件
  2. $("#btn").bind("click",function(){
        //代码块
        console.log(123);
    });
  3. (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

  4. 二、移除事件

  5. (a)使用unbind() 方法移除事件

    <pre class="prettyprint"> $(&quot;button&quot;).click(function(){ $(&quot;p&quot;).unbind(); });</pre>

    三、JQuery動畫
  6. 在Jquery 中,提供了一系列顯示動畫效果的方法,其中,

  7. show()

    ——— 方法控制元素的顯示;

  8. hide()

    ———-方法控制元素的顯示;

toggle()
——-方法切換元素的可見狀態;##############fadeIn()### — —-方法淡入;###############fadeOut()### ——方法淡出;###############slideUp()# ##——方法實作元素的縮略###############slideDown()###—方法實作元素的展開式############

以上是JQuery綁定事件與移除事件、動畫的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn