App下載

jQuery的高級教程：動畫、遍歷和事件綁定實例

猿友 2021-01-11 10:51:52 瀏覽數 (1966)
反饋

學習目標：

  • 學會如何使用jQuery的動畫效果
  • 學會如何進行遍歷和事件綁定
  • 熟練應用jQuery進行相關復雜操作

學習內容：

一、jQuery高級

1、動畫：三種方式顯示和隱藏元素
  • 默認顯示和隱藏元素show([speed,[easing],[fn]])hide([speed,[easing],[fn]])toggle([speed,[easing],[fn]])
  • 滾動顯示和隱藏元素slideDown([speed,[easing],[fn]])slideUp([speed,[easing],[fn]])slideToggle([speed,[easing],[fn]])
  • 淡入淡出顯示和隱藏元素fadeIn([speed,[easing],[fn]])fadeOut([speed,[easing],[fn]])fadeToggle([speed,[easing],[fn]])
  • 參數speed：速度，三種預定義的值（“slow”,“normal”,“fast”）或表示動畫時長的毫秒數值（如：1000）easing：用來指定切換效果，默認是"swing"，可用參數"linear"swing：動畫執(zhí)行時效果是“先慢，中間快，又慢”linear：動畫執(zhí)行時的速度是勻速的fn：在動畫完成時執(zhí)行的函數，每個元素執(zhí)行一次
2、遍歷
  • js遍歷方式for(初始化值;循環(huán)結束條件;步長)
  • jq遍歷方式jq對象.each(callback)$.each(object,[callback])for…of jQuery3.0之后提供的版本
3、事件綁定
  • jQuery標準的綁定方式jq對象.事件方法(回調函數);如果調用事件方法，不傳遞回調函數，則觸發(fā)瀏覽器默認行為表單對象.submit(); // 讓表單提交
  • on綁定事件/off解綁事件jq對象.on(事件,回調函數);jq對象.off(事件); 如果不傳遞事件名稱，則解綁所有的事件
  • 事件切換：togglejq對象.toggle(fn1,fn2…); 多次點擊依次執(zhí)行傳遞的函數
4、案例
  • 廣告顯示和隱藏需求當頁面加載完成后，3秒后，自動顯示廣告廣告顯示5秒后，自動消失分析使用定時器來完成 setTimeOut()執(zhí)行一次的定時器jQuery的顯示和隱藏的動畫效果其實就是控制display屬性使用show/hide相關方法完成廣告的顯示
  • 抽象需求點擊開始，小相框快速切換點擊停止，小相框停止切換分析給開始按鈕綁定單擊事件定義循環(huán)定時器切換小相框的src屬性定義數組，存放圖片資源路徑生成隨機數，數組索引給結束按鈕綁定單擊事件停止定時器給大相框設置src屬性
5、插件：增強jQuery功能
  • 實現方式$.fn.extend(object);增強通過jQuery獲取對象的功能 $("#id")$.extend(object);增強jQuery對象自身的功能 $/jQuery

學習產出：

1、 動畫
<!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>
        // 隱藏div
        function hideFn() {
            /*$("#showDiv").hide("slow","swing",function () {
                // alert("隱藏了。。。");
            })*/
            // 默認方式
            // $("#showDiv").hide("slow","swing");
            // 滑動方式
            // $("#showDiv").slideDown("slow","swing");
            // 淡入淡出方式
            $("#showDiv").fadeOut("slow","swing");
        }
?
        // 顯示div
        function showFn() {
            /*$("#showDiv").show("slow","linear",function () {
                // alert("顯示了。。。");
            })*/
            // 默認方式
            // $("#showDiv").show("slow","swing");
            // 滑動方式
            // $("#showDiv").slideUp("slow","swing");
            // 淡入淡出方式
            $("#showDiv").fadeIn("slow","swing");
        }
?
        // 切換顯示隱藏div
        function toggleFn() {
            /*$("#showDiv").toggle("slow","swing",function () {
                // alert("切換顯示隱藏了。。。");
            })*/
            // 默認方式
            // $("#showDiv").toggle("slow","swing");
            // 滑動方式
            // $("#showDiv").slideToggle("slow","swing");
            // 淡入淡出方式
            $("#showDiv").fadeToggle("slow","swing");
        }
    </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、遍歷
<!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");
            // 遍歷li
            // js遍歷方式
            for (var i = 0;i < citys.length; i++){
                // 獲取內容
                alert(i+":"+citys[i].innerHTML);
            }
?
            // jq遍歷方式
            citys.each(function (index,element) {
                // 獲取li對象，直接用this
                // alert(this.innerHTML);
                // alert($(this).html());
                // 獲取li對象，在回調函數中定義參數index（索引） element（元素對象）
                // alert(index+":"+element.innerHTML);
                // alert(index+":"+$(element).html());
?
                // 判斷如果是上海，結束循環(huán)
                if ("上海"==$(this).html()){
                    // 如果當前回調函數返回值是false，終止循環(huán)
                    // 如果當前回調函數返回值是true，終止本次循環(huán)，繼續(xù)下次循環(huán)
                    return false;
                    // return true;
                }
                alert(index+":"+$(element).html());
            });
?
            $.each(citys,function () {
                alert($(this).html());
            });
?
            for (li of citys){
                alert($(li).html());
            }
?
        });
?
    </script>
</head>
<body>
<ul id="city">
    <li>北京</li>
    <li>上海</li>
    <li>天津</li>
    <li>重慶</li>
</ul>
</body>
</html>
3、 事件綁定與解綁
<!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 () {
            // 獲取name對象，綁定click事件
            // $("#name").click(function () {
            //     alert("我被點擊了！");
            // });
?
            // 給name對象綁定鼠標移動元素之上事件與鼠標移除事件
            // $("#name").mouseover(function () {
            //     alert("鼠標來了！");
            // });
            // $("#name").mouseleave(function () {
            //     alert("鼠標走了！");
            // });
?
            // 簡化操作，鏈式編程
            // $("#name").mouseover(function () {
            //     alert("鼠標來了");
            // }).mouseleave(function () {
            //     alert("鼠標走了");
            // })
?
?
            $("#name").focus();// 讓文本輸入框獲得焦點
            // 表單對象.submit()   // 讓表單提交
        })
?
    </script>
</head>
<body>
<input id="name" type="text" value="綁定點擊事件">
</body>
</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 () {
            // 使用on綁定事件
            $("#btn").on("click",function () {
                alert("我被點擊了！");
            });
?
            // 使用off解綁事件
            $("#btn2").click(function () {
                // 解除btn按鈕的click綁定事件
                $("#btn").off("click");
            });
        });
?
?
?
    </script>
</head>
<body>
<input id="btn" type="button" value="使用on綁定點擊事件">
<input id="btn2" type="button" value="使用off解綁點擊事件">
</body>
</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 src="../js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(function () {
            $("#btn").toggle(function () {
                // 改變背景色為綠色
                $("#myDiv").css("backgroundColor","green");
            },function () {
                // 改變背景色為黃色
                $("#myDiv").css("backgroundColor","yellow");
            })
        })
    </script>
</head>
<body>
?
    <input id="btn" type="button" value="事件切換">
    <div id="myDiv" style="width:300px;height:300px;background:pink">
        點擊按鈕變成綠色，再次點擊黃色
    </div>
</body>
</html>
4、案例1：廣告顯示和隱藏
<!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 () {
            // 定義定時器，3秒之后顯示廣告
            setTimeout(adShow,3000);
            // 定義定時器，5秒之后隱藏廣告
            setTimeout(adHide,8000);
        });
        // 顯示廣告
        function adShow() {
            $("#ad").show("slow");
        }
        // 隱藏廣告
        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>
5、案例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>
        var img = ["../img/man00.jpg",
            "../img/man01.jpg",
            "../img/man02.jpg",
            "../img/man03.jpg",
            "../img/man04.jpg",
            "../img/man05.jpg",
            "../img/man06.jpg"];
        $(function () {
            $("#startID").prop("disabled",false);
            $("#stopID").prop("disabled",true);
?
            var startId;
            var index;
            $("#startID").click(function () {
                $("#startID").prop("disabled",true);
                $("#stopID").prop("disabled",false);
                startId = setInterval(function () {
                    index = Math.floor(Math.random()*7);
                    $("#img1ID").prop("src",img[index])
                },20);
            });
            $("#stopID").click(function () {
                $("#startID").prop("disabled",false);
                $("#stopID").prop("disabled",true);
                clearInterval(startId);
                $("#img2ID").prop("src",img[index]).hide();
                $("#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"
        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>
6、01-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">
        // 使用jQuery插件，給jq添加兩個方法，check()選中所有復選框，uncheck()取消所有選中
        // 定義jQuery對象的插件
        $.fn.extend({
            // 定義一個check方法，所有的jq對象都可以調用該方法
            check:function () {
                this.prop("checked",true);
            },
            uncheck:function () {
                this.prop("checked",false);
            }
        });
        $(function () {
            $("#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>
7、02-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(2,3);
        alert(max);
        var min = $.min(1,8);
        alert(min);
    </script>
</head>
<body>
</body>
</html>


jQuery

0 人點贊