Day22-Jquery高级

title: Day22-Jquery高级
date: 2020-08-07 18:13:22
author: 子陌

JQuery高级

动画

三种方式显示和隐藏元素
1. 默认显示和隐藏方式
  1. show([speed],[easing],[fn])
  2. hide([speed],[easing],[fn])
  3. toggle([speed],[easing],[fn])
2. 滑动显示和隐藏方式
  1. slideDown([speed],[easing],[fn])
  2. slideUp([speed],[easing],[fn])
  3. slideToggle([speed],[easing],[fn])
3. 淡入淡出显示和隐藏方式
  1. fadeIn([speed],[easing],[fn])
  2. fadeOut([speed],[easing],[fn])
  3. fadeToggle([speed],[easing],[fn])

参数
1. speed：动画的速度。三个预定义的值(“slow”，“normal”，“fast”)或表示动画时长的毫秒数值(如：1000)
2. easing：用来指定切换效果，默认是"swing" ，可用参数"linear"
  - swing：动画执行时效果是先慢，中间快，最后又慢
  - linear：动画执行时速度是匀速的
3. fn：在动画完成时执行的函数，每个元素执行一次。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>动画</title>
        <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
        <script>
            // 隐藏
            function hideFn() {
     
     
                //$("#showDiv").hide("slow","swing");
                $("#showDiv").hide(5000,"swing");
            }
            // 显示
            function showFn() {
     
     
                $("#showDiv").show("fast","linear",function () {
     
     
                    console.log("显示了。。。。。");
                });
            }
            // 切换
            function toggleFn() {
     
     
                $("#showDiv").toggle("normal");
            }
        </script>
    </head>
    <body>
        <input type="button" value="点击隐藏" onclick="hideFn()">
        <input type="button" value="点击显示" onclick="showFn()">
        <input type="button" value="点击切换" onclick="toggleFn()">
        <div id="showDiv" style="width: 100px; height: 100px; background: yellow">
            div show and hide...
        </div>
    </body>
</html>

遍历

js的遍历方式
- for(初始化；循环结束条件；循环步长)
jq的遍历方式
1. jq对象.each(callback)
2. jQuery.each(object, callback)或者$.each(object, callback)
3. jq 3.0后提供for..of

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>遍历</title>
        <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
        <script>
            // js方式
            $(function () {
     
     
                // 1.获取所有的ul下的li
                var citys = $("#city li");
                // 2.遍历li
                for (var i = 0; i < citys.length; i++){
     
     
                    console.log("js:" +i + ":" + citys[i].innerHTML);
                }
            })
            // jq方式
            $(function () {
     
     

                // 1. jq对象.each(callback)
                var citys = $("#city li");
                // 1.1 获取li对象，第一种方式 this
                citys.each(function () {
     
     
                    console.log("jq each (this): inner"+this.innerHTML +"html()"+ $(this).html());
                });
                // 1.2 获取li对象，第一种方式 在回调函数中定义参数 index：索引 element：元素对象
                citys.each(function (index, element) {
     
     
                    console.log("jq each (in-ele) inner:" + index + ":" + element.innerHTML);
                    console.log("jq each (in-ele) html:" + index + ":" + $(element).html());
                });

                // 2. $.each(object, callback)
                $.each(citys, function () {
     
     
                    // 和上述一样的方式
                })
                // 3. jq 3.0 for..of
                for (li of citys){
     
     
                    console.log("3.0 for of :"+$(li).html());
                }
            });
        </script>
    </head>
    <body>
        <ul id="city">
            <li>北京</li>
            <li>上海</li>
            <li>天津</li>
            <li>重庆</li>
        </ul>
    </body>
</html>

事件绑定

jquery标准的绑定方式
- jq对象.事件方法(回调函数)
on绑定事件/off解除绑定
- jq对象.on(“事件名称”，回调函数)
- jq对象.off(“事件名称”)
事件切换：toggle
- jq对象.toggle(fn1, fn2,…)
- 注意：1.9版本 .toggle()方法删除，jQuery Migrate(迁移)插件可以恢复此功能

$(function(){
    
    
    # 标准的绑定方式
    // 1.获取name对象，绑定一个click事件
    $("name").click(function(){
    
    
        alert("click run");
    });
    // 2.给name对象，绑定鼠标移动元素上和移出事件
    $("name").mouseover(function(){
    
    
        alert("mouse come");
    })
    $("name").mouseout(function(){
    
    
        alert("mouse out");
    });
    // 2.1简化操作，链式编程
    $("name").mouseover(function(){
    
    
        alert("mouse come");
    }).mouseout(function(){
    
    
        alert("mouse out");
    });
    --------------------------------------------------------------------------------------
    # on绑定事件/off解除绑定
    // 1.使用on给按钮绑定单机事件click
    $("#btn").on("eventname",function(){
    
    
        alert("on click run");
    });
    // 2.使用off给按钮绑定解除on绑定
    $("#btn1").click(function(){
    
    
        // 解除btn按钮的单机事件，如果不传事件名称，将组件上所有的事件全部解绑
        $("#btn").off("eventname");
    });
    --------------------------------------------------------------------------------------
    # 事件切换：toggle
    // 获取按钮，调用toggle
    $("btn2").toggle(function(){
    
    
        // 改变div背景色
        $("#div1").css("backgroundColor","green");
    },function(){
    
    
        $("#div1").css("backgroundColor","blue");
    });
});

案例：广告的自动显示和隐藏

需求：
# 1.当页面加载完，3秒后。自动显示
# 2.广告显示5秒，自动消失
分析：
# 1.使用定时器完成。setTimeout执行一次
# 2.分析JQ的显示隐藏效果实际上就是控制display
# 3.使用show/hide方法来完成
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>广告的显示和隐藏</title>
        <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
        <script>
            // 页面加载完成，定时器调用该方法
            $(function () {
     
     
                // 定义定时器三秒后执行show方法
                setTimeout(adshow, 3000);
                // 定义定时器五秒后执行hide方法
                setTimeout(adhide, 8000);
            })
            // 显示广告div，调用show方法
            function adshow() {
     
     
                $("#ad").show("slow");
            }
            // 隐藏广告div，调用hide方法
            function adhide(){
     
     
                $("#ad").hide("slow");
            }
        </script>
    </head>
    <body>
        <!-- 广告div -->
        <div id="ad" style="display: none";>
            <span>此处应有广告图片</span>
            <img src="#" style="width: 100%" />
        </div>
        <!-- 下方正文部分 -->
        <div id="content">
            正文
        </div>
    </body>
</html>

案例：抽奖演示

需求：
# 1.点击开始，图片滚动
# 2.点击停止，将选中图片刷到左边大图片展示
分析：
# 1.给开始按钮绑定当即事件
	1.1 定义循环定时器
	1.2 切换小相框的src属性
		* 定义数组，存放图片资源路径
		* 生成随机数。数组索引
# 2.给结束按钮绑定事件
	2.1 停止/清空定时器
	2.2 大相框设置src属性
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>抽奖</title>
        <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
        <script>
            var imgs = [
                "../QQimg/1.gif",
                "../QQimg/2.gif",
                "../QQimg/3.gif",
                "../QQimg/4.gif",
                "../QQimg/5.gif",];
            var timer;  // 开始定时器的id
            var index;  // 随机图片角标
            $(function () {
     
     
                // 处理按钮是否可以使用的效果
                btnDisable(false,true);

                // 给开始按钮绑定单击事件
                $("#startId").click(function () {
     
     
                    // 定义循环定时器
                    timer = setInterval(function () {
     
     
                        // 处理按钮是否可以使用的效果
                        btnDisable(true,false);
                        // 生成随机角标 0 - 4
                        index = Math.floor(Math.random() * 5);
                        // 设置小相框的src属性
                        $("#img1").prop("src", imgs[index])
                    },20);
                });
                // 给结束按钮绑定单击事件
                $("#stopId").click(function () {
     
     
                    // 处理按钮是否可以使用的效果
                    btnDisable(false,true);
                    // 停止定时器
                    clearInterval(timer);
                    // 给大相框设置src属性
                    $("#img2").prop("src", imgs[index]).hide();
                    // 1秒后显示
                    $("#img2").show(1000);
                });
            })
            function btnDisable(startState, stopState) {
     
     
                // 处理按钮是否可以使用的效果
                $("#startId").prop("disabled",startState);
                $("#stopId").prop("disabled",stopState);
            }
        </script>
    </head>
    <body>
        <!-- 小滚动头像框 -->
        <div style="border-style: dotted;width: 100px;height: 100px">
            <img id="img1" src="../QQimg/1.gif" style="width: 100px; height: 100px" />
        </div>
        <!-- 大展示结果框 -->
        <div style="border-style: double; width: 500px; height: 500px; position: absolute; left: 500px;top: 10px">
            <img id="img2" width="500px" height="500px" src="../QQimg/1.gif">
        </div>
        <!-- start -->
        <input id="startId" type="button" value="开始抽奖" style="width: 150px; height: 150px; font-size: 22px">
        <!-- end -->
        <input id="stopId" type="button" value="停止抽奖" style="width: 150px; height: 150px; font-size: 22px">
    </body>
</html>

插件

增强jquery的功能

实现方式：
- $.fn.extend(object)：通过jquery获取的对象的功能$("#id")
- $.entend：增强jquery对象自身的功能$/jquery全局对象，不需要获取模块

案例：$.fn.extend(object)

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>jquery对象进行方法扩展</title>
        <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
        <script>
            // 使用jQuery插件给jq对象添加两个方法check()选中所有复选框，unckeck()取消选中多有复选框
            // 1.定义jquery的对象插件
            $.fn.extend({
     
     
                // 定义了一个check()方法，所有jq对象都可以调用该方法
                check:function () {
     
     
                    this.prop("checked",true);
                },
                uncheck:function () {
     
     
                    this.prop("checked",false);
                }
            });
            $(function () {
     
     
                $("#btn").click(function () {
     
     
                    // 获取复选框对象
                    $("input[type='checkbox']").check();
                });
                $("#btn1").click(function () {
     
     
                    // 获取复选框对象
                    $("input[type='checkbox']").uncheck();
                });
            })
        </script>
    </head>
    <body>
        <input id="btn" type="button" value="全选" onclick="checkFn()">
        <input id="btn1" type="button" value="取消全选" onclick="uncheckFn()">
        <br>
        <input type="checkbox" value="zq">足球
        <input type="checkbox" value="lq">篮球
        <input type="checkbox" value="pq">排球
    </body>
</html>

案例：$.extend(object)

// 对全局方法扩展，求两值的最小值和最大值
$.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);
alert($.min(2,3))

JQuery高级

动画

遍历

事件绑定

插件

猜你喜欢