JQuery高級筆記

主要內容

JQuery高級
1. 動畫
2. 遍歷
3. 事件綁定
4. 案例
5. 插件

JQuery高級

動畫
- 有三種方式顯示和隱藏元素
  1. 默認方式
    - show([speed,[easing],[fn]])
      參數
      1. speed :動畫的速度；三個預定義的值(“slow”,“normal”, or “fast”)，或者是表示動畫時常的毫秒數值(如，1000)
      2. easing :用來指定切換效果，默認是"swing"，可用參數"linear"
      * swing ：動畫執行的效果是先慢，中間快，最後再慢
      * linear ：動畫執行時，速度是勻速的
      3. fn :在動畫完成時執行的函數，每個元素執行一次。
    - hide([speed,[easing],[fn]])
    - toggle([speed,[easing],[fn]])
  2. 滑動方式
    - slideDown([speed,[easing],[fn]])
    - slideUp([speed,[easing],[fn]])
    - slideToggle([speed,[easing],[fn]])
  3. 淡入淡出方式
    - fadeIn([speed,[easing],[fn]])
    - fadeOut([speed,[easing],[fn]])
    - fadeToggle([speed,[easing],[fn]])

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
        <script>
            // 顯示與隱藏動畫

            // <input type="button" value="點擊按鈕隱藏div" οnclick="hideFn()">
            function hideFn() {
                // 默認方式
               /* $("#showDiv").hide("normal","swing",function () {
                    alert("隱藏了...");
                });*/
               // $("#showDiv").hide("fast","swing");
    
                // 滑動方式
                // $("#showDiv").slideUp("slow");
    
                // 淡入淡出方式
                $("#showDiv").fadeOut("slow");
            }
            // <input type="button" value="點擊按鈕顯示div" οnclick="showFn()">
            function showFn() {
                // 默認方式
                /*$("#showDiv").show("normal","swing",function () {
                    alert("顯示了...");
                });*/
                // $("#showDiv").show("slow","linear");
    
                // 滑動方式
                // $("#showDiv").slideDown("slow");
    
                // 淡入淡出方式
                $("#showDiv").fadeIn("slow");
            }
            // <input type="button" value="點擊按鈕切換div顯示和隱藏" οnclick="toggleFn()">
            function toggleFn() {
                // 默認方式
                // $("#showDiv").toggle(3000);
    
                // 滑動方式
                // $("#showDiv").slideToggle("slow");
    
                // 淡入淡出方式
                $("#showDiv").fadeToggle("slow");
            }
        </script>
    </head>
    <body>
        <input type="button" value="點擊按鈕隱藏div" onclick="hideFn()">
        <input type="button" value="點擊按鈕顯示div" onclick="showFn()">
        <input type="button" value="點擊按鈕切換div顯示和隱藏" onclick="toggleFn()">
        <div id="showDiv" style="width:300px;height:300px;background:pink">
            div顯示和隱藏
    </div>
    </body>
    </html>

遍歷
1. js的遍歷方式
  - for(初始化值;循環結束條件;步長)
2. JQuery的遍歷方式
  - jq對象.each(callback)
  - $.each(object,[callback])
  - for…of: JQuery3.0版本之後提供的方式

    <!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 () {
                // 先獲取ul下的所有li
                var citys = $("#city li");
    
                /*// 1.js遍歷文本內容
    
                for (var i=0; i<citys.length; i++){
                    // 此方法中可以使用break,continue方法
                    if ("上海" == citys[i].innerHTML){
                        // break;
                        continue;
                    }
                    // 獲取內容
                    alert(i + citys[i].innerHTML);
                }*/
    
                /*// 2.JQuery 遍歷文本內容 jq對象.each(callback)
                citys.each(function (index,element) {
                    // 2.1 直接用this，函數不傳參
                    // alert(this.innerHTML);
    
                    // 2.2 給函數傳參，index(索引),element(元素對象)
                    // alert(index + element.innerHTML);
                    // element是js對象，可以轉爲jq對象
                    // alert(index + $(element).html());
    
                    // function中不能使用break,continue方法；但是可以返回false或true
                    // 若當前function返回false，則結束循環，相當於break
                    // 若當前function返回true，則結束本次循環，繼續下次循環，相當於continue
                    if ("上海" == $(element).html()){
                        return true;
                    }
    
                    alert(index + $(element).html());
                });*/
    
                /*// 3.JQuery 遍歷文本內容 $.each(object,[callback])
                // 此方法的其餘均與方法2相同，只不過調用方式有所區別
                $.each(citys,function (index,element) {
                    // alert($(this).html());
                    alert(index+$(element).html());
    
                })*/
    
                // 4.JQuery遍歷文本內容 for..of:  此方法只能在JQuery3.0版本之後使用
                for (li of citys){
                    alert($(li).html());
                }
    
            });
    
        </script>
    </head>
    <body>
    <ul id="city">
        <li>北京</li>
        <li>上海</li>
        <li>天津</li>
        <li>重慶</li>
    </ul>
    </body>
    </html>

事件綁定
1. JQuery標準的綁定方式
  - jq對象.事件方法(回調函數)；

    <!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">
            // JQuery標準的綁定方式
            $(function () {
    
                /*$("#name").click(function () {
                    alert("我被點擊了...")
                });
    
                $("#name").mousemove(function () {
                    alert("鼠標來了...")
                });
    
                $("#name").mouseout(function () {
                    alert("鼠標走了...")
                });*/
    
                // 鏈式編程
                $("#name").mousemove(function () {
                    alert("鼠標來了...")
                }).mouseout(function () {
                    alert("鼠標走了...")
                });
    
                // $("#name").focus(); //讓文本框獲得焦點
                //表單對象.submit();    提交表單
            });
    
        </script>
    </head>
    <body>
    <input id="name" type="text" value="綁定點擊事件">
    </body>
    </html>

on綁定事件/off解除綁定
- jq對象.on(“事件名稱”,回調函數)
- jq對象.off(“事件名稱”)

    <!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">
            // 使用on/off進行綁定/解綁事件
            $(function () {
                // 爲按鈕1綁定事件
               $("#btn").on("click",function () {
                   alert("我被點擊了....")
               });
    
               // 點擊按鈕2時，爲按鈕1解除綁定
                $("#btn2").click(function () {
                    $("#btn").off("click");
                });
            });
    
        </script>
    </head>
    <body>
    <input id="btn" type="button" value="使用on綁定點擊事件">
    <input id="btn2" type="button" value="使用off解綁點擊事件">
    </body>
    </html>

事件切換：toggle
- jq對象.toggle(fn1,fn2…)
  **注意：**1.9版本 .toggle() 方法刪除,jQuery Migrate（遷移）插件可以恢復此功能。

    <!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">
            // 使用toggle進行事件的切換
    
            $(function () {
               $("#btn").toggle(function () {
                   //設置myDiv的背景色爲綠色
                   $("#myDiv").css("backgroundColor","green");
               },function () {
                   //設置myDiv的背景色爲紅色
                   $("#myDiv").css("backgroundColor","red");
               });
            });
            
        </script>
    </head>
    <body>
        <input id="btn" type="button" value="事件切換">
        <div id="myDiv" style="width:300px;height:300px;background:pink">
            點擊按鈕變成綠色，再次點擊紅色
        </div>
    </body>
    </html>

案例
廣告的顯示與隱藏
- 需求：頁面加載完成後，3秒打開廣告頁面；頁面停留5秒消失
- 分析
  1. 對於時間的控制，可以使用定時器setTimeout(執行一次定時器)
  2. 觀察廣告DIV的屬性可知，是由display屬性控制的，而JQuery同樣也是通過控制display屬性來控制顯示與隱藏的
  3. 對於廣告的顯示與隱藏，可以使用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>
            // 需求：頁面加載完成後，3秒打開廣告頁面；頁面停留5秒消失
    
            // 分析
            // 對於時間的控制，可以使用定時器setTimeout(執行一次定時器)
            // 觀察廣告DIV的屬性可知，是由display屬性控制的，而JQuery同樣也是通過控制display屬性來控制顯示與隱藏的
            // 對於廣告的顯示與隱藏，可以使用JQuery中的動畫的顯示與隱藏方法
            $(function () {
                // 3秒打開廣告頁面
                setTimeout(adShow,3000);
                // 8秒隱藏廣告頁面
                setTimeout(adHide,8000);
            });
            // 顯示廣告DIV的方法
            function adShow() {
                $("#ad").show("slow");
            }
            // 隱藏廣告DIV的方法
            function adHide() {
                $("#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>

抽獎

需求
- 在開始之前先編寫一個頁面，包含兩個div，用作圖片展示的相框，還有兩個按鈕
- 在開始時刻，只能點擊開始按鈕，之後兩個按鈕只能交替點擊一個
- 點擊開始按鈕後，小相框會隨機展示不同的圖片；點擊結束按鈕後，小相框停止隨機，固定展示圖片，而大相框中也展示小相框中選中的圖片
分析
- 首先需要爲兩個按鈕添加點擊事件
- 爲開始按鈕添加點擊事件
- 小相框中圖片的隨機展示，可以用一個循環定時器，每隔一段時間切換一下小相框中圖片的src地址
- 用一個數組將所給的幾張圖片的src地址先保存到一個數組中，通過生成隨機角標來獲取不同圖片的src
- 爲停止按鈕添加點擊事件
- 需要將循環定時器停止，更改大相框中圖片的地址
- 通過input標籤中的disabled屬性禁用按鈕

    <!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>
            // 需求
            // 在開始之前先編寫一個頁面，包含兩個div，用作圖片展示的相框，還有兩個按鈕
            // 在開始時刻，只能點擊開始按鈕，之後兩個按鈕只能交替點擊一個
            // 點擊開始按鈕後，小相框會隨機展示不同的圖片
            // 點擊結束按鈕後，小相框停止隨機，固定展示圖片，而大相框中也展示小相框中選中的圖片
    
            // 分析
            // 首先需要爲兩個按鈕添加點擊事件
            // 爲開始按鈕添加點擊事件
            // 小相框中圖片的隨機展示，可以用一個循環定時器，每隔一段時間切換一下小相框中圖片的src地址
            // 用一個數組將所給的幾張圖片的src地址先保存到一個數組中，通過生成隨機角標來獲取不同圖片的src
            // 爲停止按鈕添加點擊事件
            // 需要將循環定時器停止，更改大相框中圖片的地址
            // 通過input標籤中的disabled屬性禁用按鈕
    
           // 將所有圖片的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 index;  //定義數組角標
            var TimeOut;    //定義循環定時器
    
            // 入口函數
            $(function () {
                // 初始時禁用停止按鈕
                $("#startID").prop("disabled",false);
                $("#stopID").prop("disabled",true);
                // 給開始按鈕添加單擊事件
                $("#startID").click(function () {
    
                    // 點擊開始按鈕後禁用開始按鈕
                    $("#startID").prop("disabled",true);
                    $("#stopID").prop("disabled",false);
    
                    // 啓動循環定時器，30毫秒執行一次
                    TimeOut = setInterval(function () {
                        // 生成隨機角標
                        //0.000-0.999的隨機數*7得到0.00-6.999的隨機數，向下取整得到0-6的隨機整數
                        index = Math.floor(Math.random()*7);
                        // 更改小相框的src屬性（是固有屬性，故用prop）
                        $("#img1ID").prop("src",imgs[index]);
                    },30);
                });
                // 給停止按鈕添加單擊事件
                $("#stopID").click(function () {
                    // 點擊停止按鈕後禁用停止按鈕
                    $("#startID").prop("disabled",false);
                    $("#stopID").prop("disabled",true);
                    //停止定時
                    clearInterval(TimeOut);
                    //設置大相框的src爲選中的圖片地址
                    $("#img2ID").prop("src",imgs[index]);
                });
            });
        </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"
            onclick="imgStart()">
    <!-- 停止按鈕 -->
    <input
            id="stopID"
            type="button"
            value="點擊停止"
            style="width:150px;height:150px;font-size:22px"
            onclick="imgStop()">
    <script language='javascript' type='text/javascript'>
        //準備一個一維數組，裝用戶的像片路徑
        var imgs = [
            "../img/man00.jpg",
            "../img/man01.jpg",
            "../img/man02.jpg",
            "../img/man03.jpg",
            "../img/man04.jpg",
            "../img/man05.jpg",
            "../img/man06.jpg"
        ];
    </script>
    </body>
    </html>

插件
- 用來增強JQuery的功能的，實現插件的方式有兩種
  1. $.fn.extend(object) -- 對象級別的插件
  是用來增強通過JQuery獲取的對象的功能如：$("#id")

    <script type="text/javascript">
            //使用JQuery插件 給jq對象添加兩個方法 check()選中所有複選框 uncheck()取消選中所有複選框
    
            // 1.定義JQuery的對象插件
            $.fn.extend({
                check:function () {
                    // alert("添加的check方法")
                    //讓複選框全部選中
                    $(this).prop("checked",true);
                },
                uncheck:function () {
                    // alert("添加的uncheck方法")
                    // 讓複選框全部不選中
                    $(this).prop("checked",false);
                }
            });
    
           function checkFn() {
               //添加所有複選框，並調用check方法
               $("input[type='checkbox']").check();
           }
           function uncheckFn() {
               //添加所有複選框，並調用uncheck方法
               $("input[type='checkbox']").uncheck();
           }
        </script>

2. $.extend(object)     -- 全局級別的插件
    *是用來增強JQuery自身的功能   $/JQuery*

    <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;
                }
            });
    
            // alert($.max(2,3));
            alert($.min(2,1));
        </script>

JQuery高級筆記

主要內容

JQuery高級

再談23種設計模式（3）：行爲型模式（學習筆記）

Power Automate Desktop 安裝完，登錄後老是提示one driver 錯誤

微前端學習筆記(4):從微前端到微模塊之EMP與hel-micro方案探索

微前端學習筆記（1）：微前端總體架構概述，從微服務發微

985 碩士程序員，空窗 4 個月沒有 Offer！

一文搞懂 Spring 循環依賴

賽博鬥地主——使用大語言模型扮演Agent智能體玩牌類遊戲。

VScode右鍵打開(添加到右鍵)

記一次 .NET某工控視覺自動化系統卡死分析

WindowsServer--SQL Server搭建主從同步實現讀寫分離 - 事務性分發

登錄驗證案例（Filter過濾器）

敏感詞過濾案例（Filter過濾器）

驗證碼案例之Session補充

綜合練習筆記2（用戶管理系統）

Cookie（客戶端會話技術）筆記

Mac下配置sublime實現LaTeX

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

linux以太網驅動總結