jQuery綁定事件及動畫效果

綁定事件

語法：jQuery對象.bind(“事件名”，可選參數，事件處理函數);
tip:1.第二個參數是可選參數，作爲event.data屬性值傳遞給事件對象的額外數據對象。
2.事件名不要加on，如單擊事件是click,不是onclick

示例：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>演示事件</title>
        <style type="text/css">
            * {
                margin: 0px;
                padding: 0px;
            }

            body {
                font-size: 13px;
                line-height: 130%;
                padding: 60px;
            }

            #panel {
                width: 300px;
                border: 1px solid #0050D0;
            }

            .head {
                padding: 5px;
                background: #96E555;
                cursor: pointer;
            }

            .content {
                padding: 10px;
                text-indent: 2em;
                border-top: 1px solid #0050D0;
                display: none;

            }
        </style>
        <script src="../../jsjava庫/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(function() {
                //需求: 點擊標題後 顯示 標題下面的div
                $("#panel h5.head").bind("click",function(){

                    //讓標題下面的div顯示
                    $(this).next().show(5000);
                    //show("fast") 0.2s;show("normal") 0.4s; show("slow") 0.6s;沒有參數沒有動畫效果，直接顯示
                });

                //取消事件
                $("#panel h5.head").unbind("click");
            });
        </script>
    </head>

    <body>

        <div id="panel">
            <h5 class="head">什麼是jQuery?</h5>
            <div class="content">
                jQuery是繼Prototype之後又一個優秀的JavaScript庫，它是一個由 John Resig 創建於2006年1月的開源項目。jQuery憑藉簡潔的語法和跨平臺的兼容性，極大地簡化了JavaScript開發人員遍歷HTML文檔、操作DOM、處理事件、執行動畫和開發Ajax。它獨特而又優雅的代碼風格改變了JavaScript程序員的設計思路和編寫程序的方式。
            </div>
        </div>
    </body>

</html>

取消綁定

語法：jQuery對象.unbind(“click”); 或 jQuery對象.unbind(“click”,函數名) jQuery對象可以綁定多個事件，第二個可以指定函數名字取消綁定。

js代碼：
$(function () {
                //可以綁定多個事件
                $("#btn1").bind("click",f1 = function () {
                    alert('111');
                }).bind("click",function () {
                    alert(222);
                });

                //只執行一次
                $("a").one("mouseover",function () {
                    alert("第一次移入有此效果，之後不再有");
                });

                //打開網頁執行，不加#，每次都加載當前網頁，只執行一次的事件執行了多次，
                //加#後，雖然網頁內內容不改變，但相當於跳轉到了另一個網頁，上面事件只執行一次
//              $("a").trigger("click");

                $("#btn2").bind("click",function () {
                    //取消綁定可以指定函數名
                    $("#btn1").unbind("click",f1);
                });

                $("#btn3").bind("click",function () {
//                  alert($(this).next());
//                  $(this).next().show(3000);
                    if($("#div1").is(":visible")){
                        $(this).next().hide(3000);
                    }else{
                        $("#div1").show(3000);
                    }
                });

            });
css代碼：
<style type="text/css">
            #div1{
                width:200px;
                height:200px;
                background-color: yellow;
                display:none;
                /*visibility: hidden;*/
            }
        </style>

html代碼：
<input type="button" name="btn1" id="btn1" value="點我" />
        <input type="button" name="btn2" id="btn2" value="移除事件，取消綁定" />
        <a href="#">超鏈接</a>
        <input type="button" name="btn3" id="btn3" value="顯示" /><div id="div1" >我是div1</div>

只執行一次事件

語法：如上例，對象.one(“事件名”，事件處理函數);

觸發某一事件

語法：對象.trigger(“click”); 相當於自動執行對象.click();

div的顯示和隱藏

顯示：div.show(“slow”) //0.6s ;”normal”是0.4s,“fast”是 0.2s。也可以傳入毫秒數作爲參數。顯示的方式是從左到右，從上到下依次增大（展開）。
隱藏：div.hide()，可以傳入動畫完成的時間：毫秒數

改變綁定事件的類型

可以級聯綁定mouseover 和 mouseout 事件。
示例：

<script type="text/javascript">
            $(function() {
                $("#panel").bind("mouseover",function () {
                    $(this).find("div.content").show();
                }).bind("mouseout",function () {
                    $(this).find("div.content").hide();
                });
            });
        </script>

兩個合成事件

一、hover( )方法
hover(enter,leave)；相當於兩個函數，第一個是移入，第二個是移出。
示例：

<script type="text/javascript">
            $(function() {
                $("#panel").hover(function () {
                    $(this).find("div.content").show();
                },function () {
                    $(this).find("div.content").hide();
                });
            });
        </script>

二、toggle( )方法
toggle(開,關)類似於開關，對單擊事件合成，1.9以後廢棄，對div的toggle()，目前版本也支持，例：$div.toggle();//點一下顯示或隱藏

$(function() {
                //加強效果，高亮顯示
                //需求: 點擊標題後 顯示 標題下面的div
                $("#panel").click(function() {

                    $(this).find("div.content").toggle();

                    $(this).find("h5").toggleClass("highlight");
                });

                //1.9以後廢棄
//              $("#panel h5.head").toggle(function(){
//                  //讓層顯示
//                  $(this).next().show();
//              },function(){
//                  //讓層隱藏
//                  $(this).next().hide();
//              });
            });

動畫

（1）內置動畫

1）show() 和 hide()

<script type="text/javascript">
            $(function() {
                $("#panel").hover(function () {
                    $(this).find("div.content").show();
                },function () {
                    $(this).find("div.content").hide();
                });
            });
        </script>

2）fadeIn() 和 fadeOut() 淡入淡出效果

<script type="text/javascript">
            $(function() {
                $("#panel").hover(function () {
                    $(this).find("div.content").fadeIn(2000);
                },function () {
                    $(this).find("div.content").fadeOut(2000);
                });
            });
        </script>

3）slideUp() 和 slideDown()收縮、展開效果

<script type="text/javascript">
            $(function() {
                //動畫積累,動畫中的效果疊加
                var $div = $("div.content");
                if(!$div.is(":animated")){//div不處於動畫狀態
                    $("#panel").hover(function () {
                        $(this).find("div.content").slideDown(3000);
                    },function () {
                        $(this).find("div.content").slideUp(3000);
                    });
                }

            });

動畫積累：當前動畫過程中觸發事件，進行其他動畫，效果疊加，可以加條件：if(!$div.is(“:animated”)) ,判斷div是否處於動畫效果，不處於動畫效果，可以顯示和隱藏。

（2）自定義動畫


1.自定義簡單動畫

animate({left:"500px"},3000,function(){alert(3);});  

參數1：讓div向右移動500px
參數2：移動所需的時間(可以省略)
參數3:  移動完成調用回調函數(可以省略)

完整演示代碼如下:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>演示事件</title>
        <style type="text/css">
            #panel {
                width:100px;
                height:100px;
                background-color:yellowgreen;
                position:relative;
                cursor:pointer;
            }
        </style>
        <script src="../../../js/jquery/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(function() {
                $("#panel").click(function(){
                    $(this).animate({left:"500px"},3000,function(){
                        $(this).fadeOut(2000);
                    });
                });
            });
        </script>
    </head>

    <body>

        <div id="panel">
            保存成功
        </div>
    </body>

</html>

2.多重動畫



(1)同時執行多個動畫

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>演示事件</title>
        <style type="text/css">
            * {
                margin: 0px;
                padding: 0px;
            }

            #img1 {
                position:relative;
            }

        </style>
        <script src="../../../js/jquery-3.1.0.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(function() {
                $("#img1").click(function(){
                    $(this).animate({left:"500px",height:"200px"},3000);
                });
            });
        </script>
    </head>

    <body>

        <img id="img1" src="../../../image/smile.png"/>
    </body>

</html>

(2)按順序執行多個動畫

上例中是移動和調整寬度同時進行,如果想按順序執行動畫,例如先向右滑動,然後再放大它的高度,只需把代碼拆開

$(function() {
                $("#img1").click(function(){
                    $(this).animate({left:"500px"},3000);
                    $(this).animate({width:"200px"},3000);
                });
});

因爲animate都是對同一個jQuery對象操作的,也可以改爲鏈式操作

$(function() {
                $("#img1").click(function(){
                    $(this).animate({left:"500px"},3000).
                             animate({width:"200px"},3000);

                });
});

像這樣動畫效果的執行具有先後順序,稱爲”動畫隊列”.
3.綜合動畫
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>演示事件</title>
        <style type="text/css">
            * {
                margin: 0px;
                padding: 0px;
            }

            #panel {
                width:100px;
                height:100px;
                background-color: burlywood;
                position:relative;
            }
        </style>
        <script src="../../../js/jquery/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(function() {

                $("#panel").css("opacity","0.5");//設置不透明度
                $("#panel").click(function(){
                    $("#panel").animate({left:"400px",height:"200px",opacity:"1"},3000)
                        .animate({top:"200px",width:"200px"},3000)
                        .fadeOut("slow");
                });
            });
        </script>
    </head>

    <body>

        <div id="panel">

        </div>
    </body>

</html>

4.動畫回調函數
如果想在最後一步切換元素的CSS樣式,而不是隱藏元素.
需要把最後fadeOut(“slow”) 改爲 .css("border","5px solid blue");
但是這樣並不能得到預期效果,預期效果是在動畫的最後一步改變元素的樣式,而實際效果是剛開始執行的時候,css()方法就執行了.出現這個問題的原因是css()方法並不會加入到動畫隊列中,而是立即執行.可以使用回調函數(callback)對非動畫方法實現排隊.只要把css()方法寫在最後一個動畫的回調函數裏即可.代碼如下:
$(function() {

                $("#panel").css("opacity","0.5");//設置不透明度
                $("#panel").click(function(){
                    $("#panel").animate({left:"400px",height:"200px",opacity:"1"},3000)
                        .animate({top:"200px",width:"200px"},3000,function(){
                            $("#panel").css("border","5px solid blue");
                        });

                });
});

5.停止動畫
$("#btn1").click(function(){
                    $("#panel").stop();//只能停止一個動畫
});

6.延遲動畫

$(function() {

                $("#panel").css("opacity","0.5");//設置不透明度
                $("#panel").click(function(){
                    $("#panel").animate({left:"400px",height:"200px",opacity:"1"},3000)
                        .delay(3000)
                        .animate({top:"200px",width:"200px"},3000,function(){
                            $("#panel").css("border","5px solid blue");
                        });

                });

                //停止動畫
                $("#btn1").click(function(){
                    $("#panel").stop();
                });
            });

（3）其它動畫方法

toggle()、slideToggle()、fadeTo()和fadeToToggle();

fadeTo() 把元素的不透明度調整到指定的值

$(function() {
                //需求: 點擊標題後 顯示 標題下面的div
                $("#panel h5.head").click(function(){
                    $(this).next().fadeTo(600,0.2);//600毫秒  不透明度調整到0.2
                });

})

在css中調整不透明度
.content {
                padding: 10px;
                text-indent: 2em;
                border-top: 1px solid #0050D0;
                background-color: rgba(255,0,0,0.5);//alpha 參數是介於 0.0（完全透明）與 1.0（完全不透明）的數字。 
}


fadeToToggle();  對應fadeIn()和fadeOut()

jQuery綁定事件及動畫效果

綁定事件

取消綁定

只執行一次事件

觸發某一事件

div的顯示和隱藏

改變綁定事件的類型

兩個合成事件

動畫

（1）內置動畫

（2）自定義動畫

（3）其它動畫方法

Spring Cloud最最基礎的入門（個人學習版--入門用）

Maven 多模塊父子工程 (含Spring Boot示例)

程序版本（分支）管理策略

一語點醒技術人：你不是Google

從大佬公開課學到的一些知識分享（1）

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結