JQuery高級(二)

時間 2019-11-30

標籤 jquery 高級欄目 JQuery 简体版

原文原文鏈接

3. 事件綁定
　　1. jquery標準的綁定方式
　　　　* jq對象.事件方法(回調函數)；javascript

　　　　* 注：若是調用事件方法，不傳遞迴調函數，則會觸發瀏覽器默認行爲。
　　　　　　　　* 表單對象.submit();//讓表單提交css

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">

        $(function () {
           //1.獲取name對象，綁定click事件
           /*$("#name").click(function () {
               alert("我被點擊了...")
           });*/

           //給name綁定鼠標移動到元素之上事件。綁定鼠標移出事件
            /*$("#name").mouseover(function () {
               alert("鼠標來了...")
            });

            $("#name").mouseout(function () {
                alert("鼠標走了...")
            });*/

           /* //簡化操做，鏈式編程  $(對象).mouseover(...).mouseout(...);
            $("#name").mouseover(function () {
                alert("鼠標來了...")
            }).mouseout(function () {
                alert("鼠標走了...")
            });*/
            alert("我要得到焦點了...")
            $("#name").focus();//讓文本輸入框得到焦點
            //表單對象.submit();//讓表單提交
        });
    </script>
</head>
<body>
<input id="name" type="text" value="綁定點擊事件">
</body>
</html>

　　2. on綁定事件/off解除綁定
　　　　* jq對象.on("事件名稱",回調函數)
　　　　* jq對象.off("事件名稱")
　　　　* 若是off方法不傳遞任何參數，則將組件上的全部事件所有解綁html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(function () {
           //1.使用on給按鈕綁定單擊事件  click
           $("#btn").on("click",function () {
               alert("我被點擊了。。。")
           }) ;

           //2. 使用off解除btn按鈕的單擊事件
            $("#btn2").click(function () {
                //解除btn按鈕的單擊事件
                //$("#btn").off("click");
                $("#btn").off();//將組件上的全部事件所有解綁
            });
        });
    </script>
</head>
<body>
<input id="btn" type="button" value="使用on綁定點擊事件">
<input id="btn2" type="button" value="使用off解綁點擊事件">
</body>
</html>

　　3. 事件切換：toggle
　　　　* jq對象.toggle(fn1,fn2...)
　　　　* 當單擊jq對象對應的組件後，會執行fn1.第二次點擊會執行fn2.....
　　　　* 注意：1.9版本 .toggle() 方法刪除,jQuery Migrate（遷移）插件能夠恢復此功能。
　　　　　　<script src="../js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script>java

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script>

    <script type="text/javascript">
        $(function () {
           //獲取按鈕，調用toggle方法
           $("#btn").toggle(function () {
               //改變div背景色backgroundColor 顏色爲 green
               $("#myDiv").css("backgroundColor","green");
           },function () {
               //改變div背景色backgroundColor 顏色爲 pink
               $("#myDiv").css("backgroundColor","pink");
           });
        });
    </script>
</head>
<body>
    <input id="btn" type="button" value="事件切換">
    <div id="myDiv" style="width:300px;height:300px;background:pink">
        點擊按鈕變成綠色，再次點擊紅色
    </div>
</body>
</html>

案例
　　1. 廣告顯示和隱藏jquery

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>廣告的自動顯示與隱藏</title>
    <style>
        #content{width:100%;height:500px;background:#999}
    </style>

    <!--引入jquery-->
    <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
    <script>
        /*
            需求：
                1. 當頁面加載完，3秒後。自動顯示廣告
                2. 廣告顯示5秒後，自動消失。

            分析：
                1. 使用定時器來完成。setTimeout (執行一次定時器)
                2. 分析發現JQuery的顯示和隱藏動畫效果其實就是控制display
                3. 使用  show/hide方法來完成廣告的顯示
         */

        //入口函數，在頁面加載完成以後，定義定時器，調用這兩個方法
        $(function () {
           //定義定時器，調用adShow方法 3秒後執行一次
 setTimeout(adShow,3000); //定義定時器，調用adHide方法，8秒後執行一次
 setTimeout(adHide,8000);
        });
        //顯示廣告
        function adShow() {
            //獲取廣告div，調用顯示方法
            $("#ad").show("slow");
        }
        //隱藏廣告
        function adHide() {
            //獲取廣告div，調用隱藏方法
            $("#ad").hide("slow");
        }
    </script>
</head>
<body>
    <!-- 總體的DIV -->
    <div>
        <!-- 廣告DIV -->
        <div id="ad" style="display: none;">
            <img style="width:100%" src="../img/adv.jpg" />
        </div>
        <!-- 下方正文部分 -->
        <div id="content">
            正文部分
        </div>
    </div>
</body>
</html>

————> 編程

　　2. 抽獎數組

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jquery案例之抽獎</title>
    <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>

    <script language='javascript' type='text/javascript'>
        /*
            分析：
                1. 給開始按鈕綁定單擊事件
                    1.1 定義循環定時器
                    1.2 切換小相框的src屬性
                        * 定義數組，存放圖片資源路徑
                        * 生成隨機數。數組索引


                2. 給結束按鈕綁定單擊事件
                    1.1 中止定時器
                    1.2 給大相框設置src屬性

         */
        var imgs = ["../img/man00.jpg",
                    "../img/man01.jpg",
                    "../img/man02.jpg",
                    "../img/man03.jpg",
                    "../img/man04.jpg",
                    "../img/man05.jpg",
                    "../img/man06.jpg",
                    ];
        var startId;//開始定時器的id
        var index;//隨機角標
        $(function () {
            //處理 按鈕是否能夠使用 的效果
            $("#startID").prop("disabled",false);
            $("#stopID").prop("disabled",true);

           //1. 給開始按鈕綁定單擊事件
            $("#startID").click(function () {
                // 1.1 定義循環定時器 20毫秒執行一次
                startId = setInterval(function () {
                    //處理 按鈕是否能夠使用 的效果
                    $("#startID").prop("disabled",true);
                    $("#stopID").prop("disabled",false);

                    //1.2生成隨機角標 0-6
                    index = Math.floor(Math.random() * 7);//0.000--0.999 --> * 7 --> 0.0-----6.9999
                    //1.3設置小相框的src屬性
                    $("#img1ID").prop("src",imgs[index]);
                },20);
            });
            
            //2. 給結束按鈕綁定單擊事件
            $("#stopID").click(function () {
                //處理 按鈕是否能夠使用 的效果
                $("#startID").prop("disabled",false);
                $("#stopID").prop("disabled",true);

               // 1.1 中止定時器
                clearInterval(startId);
               // 1.2 給大相框設置src屬性
                $("#img2ID").prop("src",imgs[index]).hide();
                //秒以後顯示1
                $("#img2ID").show(1000);
            });
        });
    </script>

</head>
<body>

<!-- 小像框 -->
<div style="border-style:dotted;width:160px;height:100px">
    <img id="img1ID" src="../img/man00.jpg" style="width:160px;height:100px"/>
</div>

<!-- 大像框 -->
<div
        style="border-style:double;width:800px;height:500px;position:absolute;left:500px;top:10px">
    <img id="img2ID" src="../img/man00.jpg" width="800px" height="500px"/>
</div>

<!-- 開始按鈕 -->
<input
        id="startID"
        type="button"
        value="點擊開始"
        style="width:150px;height:150px;font-size:22px">

<!-- 中止按鈕 -->
<input
        id="stopID"
        type="button"
        value="點擊中止"
        style="width:150px;height:150px;font-size:22px">
</body>
</html>

——>——>瀏覽器

插件：加強JQuery的功能
　　1. 實現方式：
　　　　1. $.fn.extend(object)
　　　　* 加強經過Jquery獲取的對象的功能，語法爲： $("#id").xxx()dom

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>01-jQuery對象進行方法擴展</title>
    <script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
       //使用jquery插件 給jq對象添加2個方法 check()選中全部複選框，uncheck()取消選中全部複選框

        //1.定義jqeury的對象插件
        $.fn.extend({
            //定義了一個check()方法。全部的jq對象均可以調用該方法
            check:function () {
               //讓複選框選中
                //this:調用該方法的jq對象
                this.prop("checked",true);
            },
            uncheck:function () {
                //讓複選框不選中
                this.prop("checked",false);
            }
        });

        $(function () {
           // 獲取按鈕
            //$("#btn-check").check();
            //複選框對象.check();

            $("#btn-check").click(function () {
                //獲取複選框對象，並調用方法
 $("input[type='checkbox']").check();

            });

            $("#btn-uncheck").click(function () {
                //獲取複選框對象，並調用方法
 $("input[type='checkbox']").uncheck();

            });
        });
        
    </script>
</head>
<body>
<input id="btn-check" type="button" value="點擊選中複選框" onclick="checkFn()">
<input id="btn-uncheck" type="button" value="點擊取消複選框選中" onclick="uncheckFn()">
<br/>
<input type="checkbox" value="football">足球
<input type="checkbox" value="basketball">籃球
<input type="checkbox" value="volleyball">排球
</body>
</html>

　　2. $.extend(object)
　　　　* 加強JQeury對象自身的功能，語法爲： $.xxx()jquery插件

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>01-jQuery對象進行方法擴展</title>
    <script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        //對全局方法擴展2個方法，擴展min方法：求2個值的最小值；擴展max方法：求2個值最大值
        
        $.extend({
            max:function (a,b) {
                //返回兩數中的較大值
                return a >= b ? a:b;
            },
            min:function (a,b) {
                //返回兩數中的較小值
                return a <= b ? a:b;
            }
        });

        //調用全局方法 
        var max = $.max(4,3);
        //alert(max);

        var min = $.min(1,2);
        alert(min);
    </script>
</head>
<body>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。