首頁 > web前端 > js教程 > 主體

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

巴扎黑
發布: 2017-06-30 11:37:02
原創
1365 人瀏覽過


綁定事件: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() 方法移除事件

    <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="prettyprint"> $(&quot;button&quot;).click(function(){ $(&quot;p&quot;).unbind(); });</pre><div class="contentsignin">登入後複製</div></div><div class="contentsignin">登入後複製</div></div>三、JQuery動畫<li><p>在Jquery 中,提供了一系列顯示動畫效果的方法,其中,<code>

  6. show()

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

  7. hide()

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

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

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

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板