JQuery 高級

一、JQuery動畫

（一）、三種方式顯示和隱藏元素

1、默認顯示和隱藏方式

show([speed,[easing],[fn]])

參數：
①、 speed：動畫的速度。三個預定義的值(“slow”,“normal”, “fast”)或表示動畫時長的毫秒數值(如：1000)
②、 easing：用來指定切換效果，默認是"swing"，可用參數"linear"
Ⅰ、swing：動畫執行時效果是先慢，中間快，最後又慢
Ⅱ、linear：動畫執行時速度是勻速的
③、 fn：在動畫完成時執行的函數，每個元素執行一次。

hide([speed,[easing],[fn]])
toggle([speed],[easing],[fn])

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script src="js/jquery-3.3.1.min.js"></script>

    <script>
        //隱藏div
        function hideFn(){
            // $("#showDiv").hide("slow","swing",function(){
            //     alert("隱藏了...")
            // });
            $("#showDiv").hide(5000,"swing");
        }
        //顯示div
        function showFn(){
            // $("#showDiv").show("slow","swing",function(){
            //     alert("顯示了...")
            // });
            $("#showDiv").show(5000,"linear");
        }
        //切換div顯示和隱藏
        function toggleFn(){
            $("#showDiv").toggle("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>

頁面效果如下：

2. 滑動顯示和隱藏方式

slideDown([speed],[easing],[fn])
slideUp([speed,[easing],[fn]])
slideToggle([speed],[easing],[fn])

<script>
    //隱藏div
    function hideFn(){
        //
        $("#showDiv").slideUp("slow");
    }
    //顯示div
    function showFn(){
        //滑動方式
        $("#showDiv").slideDown("slow");
    }
    //切換div顯示和隱藏
    function toggleFn(){
        $("#showDiv").slideToggle("slow");
    }
</script>

頁面效果如下:

3. 淡入淡出顯示和隱藏方式

fadeIn([speed],[easing],[fn])
fadeOut([speed],[easing],[fn])
fadeToggle([speed,[easing],[fn]])

<script>
    //隱藏div
    function hideFn(){
        //淡入的方式
        $("#showDiv").fadeOut("slow");
    }
    //顯示div
    function showFn(){
        //淡出的方式
        $("#showDiv").fadeIn("slow");
    }
    //切換div顯示和隱藏
    function toggleFn(){
        //淡入淡出的方式
        $("#showDiv").fadeToggle("slow");
    }
</script>

頁面效果如下：

二、JQuery遍歷

（一）、js的遍歷方式

for(初始化值;循環結束條件;步長)

<!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.獲取所有的ul下的li
            var citys = $("#city li");
            //2.遍歷li
            for (var i = 0; i < citys.length; i++) {
                //獲取內容
                alert(i + ":" + citys[i].innerHTML);
            }
        })
    </script>
</head>
<body>
    <ul id="city">
        <li>北京</li>
        <li>上海</li>
        <li>天津</li>
        <li>重慶</li>
    </ul>
</body>
</html>

（二）、jq的遍歷方式

jq對象.each(callback)

第一種方式：【但是這種方法不能獲取前面的索引】

<script src="/js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    $(function () {
        //1.獲取所有的ul下的li
        var citys = $("#city li");
        //2.遍歷：jq對象.each(callback)
        citys.each(function(){
            //3.1 獲取li對象  第一種方式：this
            alert(this.innerHTML);
            //也可以使用下面的方法
            alert($(this).html());
        });
    });
</script>

第二種方式：【通過添加下面的索引和元素對象的值就可以獲取元素的索引值】

語法：
jquery對象.each(function(index,element){});
index:就是元素在集合中的索引
element：就是集合中的每一個元素對象
this：集合中的每一個元素對象

<script type="text/javascript">
    $(function () {
        //1.獲取所有的ul下的li
        var citys = $("#city li");
        //2.遍歷：jq對象.each(callback)
        citys.each(function(index,element){
            //3.2 獲取li對象，第二種方式，在回調函數中定義參數index(
            alert(index+":"+element.innerHTML);
            //也可以使用下面的方法：
            alert(index+":"+$(element).html());
        });
    });
</script>

運行的效果和上面的for循環運行的結果一樣。

回調函數返回值：
①、true:如果當前function返回爲false，則結束循環(break)。
②、 false:如果當前function返回爲true，則結束本次循環，繼續下次循環(continue)

<script src="/js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    $(function () {
        //1.獲取所有的ul下的li
        var citys = $("#city li");
        //2.遍歷：jq對象.each(callback)
        citys.each(function(index,element){
            //3.2 獲取li對象，第二種方式，在回調函數中定義參數index(索引)、element(元素對象)
            if("上海"==$(element).html()){
                //如果當前function返回爲false，則結束循環(break)。
                //如果當前function返回爲true，則結束本次循環，繼續下次循環(continue)
                return false;
            }
            alert(index+":"+$(element).html());
        });
    });
</script>

$.each(object, [callback])

<script src="/js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    $(function () {
        //1.獲取所有的ul下的li
        var citys = $("#city li");
        $.each(citys,function(){
            alert($(this).html());
        });
        
    });
</script>

for..of: jquery 3.0 版本之後提供的方式

for(元素對象 of 容器對象)

<script src="/js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    $(function () {
        //1.獲取所有的ul下的li
        var citys = $("#city li");
        for(li of citys){
            alert($(li).html());
        }
    });
</script>

（三）、事件綁定

jquery標準的綁定方式
①、 jq對象.事件方法(回調函數)；
②、注：如果調用事件方法，不傳遞迴調函數，則會觸發瀏覽器默認行爲。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../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("我被點擊了...")
        });
    });

    </script>
</head>
<body>
<input id="name" type="text" value="綁定點擊事件">
</body>
</html>

鏈式編程：【給name綁定鼠標移動到元素之上事件，綁定鼠標移除事件。】

<script type="text/javascript">
$(function(){
    $("#name").mouseover(function(){
        alert("鼠標來了...")
    }).mouseout(function(){
        alert("鼠標走了...")
    });
});
</script>

【注意：$("#name").foucus();讓文本輸入框獲取焦點。】
③、表單對象.submit();//讓表單提交

on綁定事件/off解除綁定
①、 jq對象.on("事件名稱",回調函數)
②、 jq對象.off("事件名稱")
③、如果off方法不傳遞任何參數，則將組件上的所有事件全部解綁

<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>

3. 事件切換：toggle
①、 jq對象.toggle(fn1,fn2...)
②、當單擊jq對象對應的組件後，會執行fn1.第二次點擊會執行fn2…

<!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.9版本 .toggle() 方法刪除,jQuery Migrate（遷移）插件可以恢復此功能。
<script src="../js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script>

（四）、案例

1. 廣告顯示和隱藏

需求：
①、當頁面加載完，3秒後。自動顯示廣告
②、廣告顯示5秒後，自動消失。
分析：
①、使用定時器來完成。setTimeout (執行一次定時器)
②、分析發現JQuery的顯示和隱藏動畫效果其實就是控制display
③、使用 show/hide方法來完成廣告的顯示

<!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>
    
        //入口函數，在頁面加載完成之後，定義定時器，調用這兩個方法
        $(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. 抽獎

分析：

給開始按鈕綁定單擊事件
①、定義循環定時器
②、切換小相框的src屬性【定義數組，存放圖片資源路徑、生成隨機數。數組索引】
給結束按鈕綁定單擊事件
①、停止定時器
②、給大相框設置src屬性

<!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'>
         
        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框架動畫、遍歷以及事件的綁定、案例【廣告顯示和隱藏、抽獎】

JQuery 高級

一、JQuery動畫

（一）、三種方式顯示和隱藏元素

1、默認顯示和隱藏方式

2. 滑動顯示和隱藏方式

3. 淡入淡出顯示和隱藏方式

二、JQuery遍歷

（一）、js的遍歷方式

（二）、jq的遍歷方式

（三）、事件綁定

（四）、案例

1. 廣告顯示和隱藏

2. 抽獎

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

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

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

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

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

一文搞懂 Spring 循環依賴

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

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

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

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

Java集合之Collection集合、泛型【集合綜合案例：鬥地主】

常見API整理【Object類、日期時間類、System類、StringBuilder類、包裝類】

ServletContext對象的相關概念以及文件下載案例

JavaWeb實現用戶登錄【HTML+MySQL+JDBCTemplate+Servlet+Druid連接池】

常見API整理【Scanner類、匿名對象、Random類以及ArrayList集合】

Mac下配置sublime實現LaTeX

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

linux以太網驅動總結