E026Web学习笔记-JQuery（四）：动画、遍历、事件、插件

深碍√TFBOYSˉ_ 2024-04-19 12:05 1阅读 0赞

# 一、动画 #

## 1、三种显示和隐藏元素的方式 ##

### 默认： ###

**语法：**

show([speed,[easing],[fn]])：显示
    将高度、宽度、透明度变为初始的CSS样式，display为block；
    参数说明：
    speed：三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)；
    easing：(Optional) 用来指定切换效果，默认是"swing"（慢快慢），可用参数"linear"（匀速）；
    fn：在动画完成时执行的函数，每个元素执行一次；
    
    hide([speed,[easing],[fn]])：隐藏
    将高度、宽度、透明度变为0，display为none；
    参数说明（见show）；
    
    Toggle([speed],[easing],[fn])：切换
    
    将Hide和Show结合起来：
    -- 如果display为none时，点击后为block；
    -- 如果display为block时，点击后为none；

**代码演示：**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="../js/jquery-3.4.1.min.js"></script>
    </head>
    <body>
        <div id="dv" style="width: 300px; height: 300px; background-color: aqua;">
    
        </div>
        <input id="btn1" type="button" value="隐藏"/>
        <input id="btn2" type="button" value="显示"/>
        <input id="btn3" type="button" value="切换"/>
    </body>
    <script type="text/javascript">
        var $dv = $("#dv");
        var $btn1 = $("#btn1");
        var $btn2 = $("#btn2");
        var $btn3 = $("#btn3");
        //隐藏
        $btn1.click(function () {
            $dv.hide(3000,"swing",function () {
                alert("隐藏啦！");
            });
        });
        //显示
        $btn2.click(function () {
            $dv.show(3000,"swing",function () {
                alert("显示啦！");
            });
        });
        //切换
        $btn3.click(function () {
            $dv.toggle(3000,"swing",function () {
                alert("切换啦！");
            });
        });
    </script>
    </html>

### 滑动： ###

**语法：**

slideUp([speed,[easing],[fn]])):上滑;
    将设置的高度从初始变为0，然后隐藏;
    
    SlideDown([speed,[easing],[fn]]))：下滑;
    将高度从0变为设置的高度，然后显示;
    
    slideToggle([speed],[easing],[fn]):上下滑切换，然后隐藏或显示;
    
    参数说明见默认动画；

**代码演示：**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="../js/jquery-3.4.1.min.js"></script>
    </head>
    <body>
        <div id="dv" style="width: 300px; height: 300px; background-color: aqua;">
    
        </div>
        <input id="btn1" type="button" value="隐藏"/>
        <input id="btn2" type="button" value="显示"/>
        <input id="btn3" type="button" value="切换"/>
    </body>
    <script type="text/javascript">
        var $dv = $("#dv");
        var $btn1 = $("#btn1");
        var $btn2 = $("#btn2");
        var $btn3 = $("#btn3");
        //隐藏
        $btn1.click(function () {
            $dv.slideUp(3000,"swing",function () {
                alert("上滑隐藏啦！");
            });
        });
        //显示
        $btn2.click(function () {
            $dv.slideDown(3000,"swing",function () {
                alert("下滑显示啦！");
            });
        });
        //切换
        $btn3.click(function () {
            $dv.slideToggle(3000,"swing",function () {
                alert("切换啦！");
            });
        });
    </script>
    </html>

### 淡入淡出： ###

**语法：**

fadeIn([speed],[easing],[fn])：淡入
    将隐藏的样式通过改变其透明度（0-1），让他显示出来；
    
    fadeOut([speed],[easing],[fn])：淡出
    将显示的样式通过改变透明度（1-0），使他隐藏；
    
    fadeToggle([speed,[easing],[fn]])淡入淡出的切换
    如果样式隐藏，则将它显示出来，反之，它他隐藏；
    
    fadeTo([[speed],opacity,[easing],[fn]])：固定其透明度（0-1）；

**代码示例：**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="../js/jquery-3.4.1.min.js"></script>
    </head>
    <body>
        <div id="dv" style="width: 300px; height: 300px; background-color: aqua;">
    
        </div>
        <input id="btn1" type="button" value="淡入"/>
        <input id="btn2" type="button" value="淡出"/>
        <input id="btn3" type="button" value="切换"/>
    </body>
    <script type="text/javascript">
        var $dv = $("#dv");
        var $btn1 = $("#btn1");
        var $btn2 = $("#btn2");
        var $btn3 = $("#btn3");
        //隐藏
        $btn1.click(function () {
            $dv.fadeIn(3000,"swing",function () {
                alert("淡入啦！");
            });
        });
        //显示
        $btn2.click(function () {
            $dv.fadeOut(3000,"swing",function () {
                alert("淡出啦！");
            });
        });
        //切换
        $btn3.click(function () {
            $dv.fadeToggle(3000,"swing",function () {
                alert("切换啦！");
            });
        });
    </script>
    </html>

# 二、遍历 #

## 1、JS的遍历方式 ##

**语法：**

for(初始值;循环条件;步长)

**代码演示：**

## 2、JQ的遍历方式 ##

**语法：**

1、jq对象.each(callback)：callback回调函数，传入一个函数；
    2、$.each(object,[callback])：object可以是jq对象，也可以是js数组对象；
    3、for...of...：3.0版本之后提供的方式；

**代码演示：**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="../js/jquery-3.4.1.min.js"></script>
    </head>
    <body>
        <ul>
            <li>大哥哥</li>
            <li>二哥哥</li>
            <li>三哥哥</li>
            <li>四哥哥</li>
        </ul>
    </body>
    <script type="text/javascript">
        //第一种方式jq对象.each(callback)
        //1、获取所有li标签
        var $lis = $("ul > li");
        //2、jq对象.each循环遍历
        $lis.each(function (index, element) {
            //获取当前对象的方法一：通过this
            alert(this.innerText);
            //获取当前对象的方法二：通过在后调函数值定义参数，index（索引）element（元素对象）
            document.write(index+element.innerText+"<br/>");
        });
    
        document.write("<br/>");
    
        //第二种方式$.each(object,[callback])
        $.each($lis,function () {
            document.write(this.innerText+"<br/>");
        })
    
        document.write("<br/>");
    
        //第三种方式for...of...
        for(a of $lis){
            document.write(a.innerText+"<br/>");
        }
    </script>
    </html>

**运行结果：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70][]

# 三、事件绑定 #

## 1、JQuery标准的绑定方式 ##

jq对象.事件方法(回调函数);

## 2、on绑定事件/off解除绑定 ##

绑定事件：
    jq对象.on("事件名称",回调函数);
    
    解绑事件：
    jq对象.off("事件名称");

## 3、事件切换：toggle ##

jq对象.toggle(fn1,fn2);
    含义：点一次执行fn1函数，再点一次执行fn2函数，如此循环；
    
    注意：
    1.9版本 .toggle(function, function, … ) 方法删除,jQuery Migrate（迁移）插件可以恢复此功能。
    引入js：http://code.jquery.com/jquery-migrate-1.2.1.js

## 4、代码演示 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="../js/jquery-3.4.1.min.js"></script>
    
        <script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>
    </head>
    <body>
        <div id="dv" style="width: 300px; height: 300px; background-color: aqua;">
            hello!
        </div>
        <input id="btn1" type="button" value="绑定事件">
        <input id="btn2" type="button" value="解绑事件">
        <input id="btn3" type="button" value="切换事件">
    </body>
    <script type="text/javascript">
        //1、获取jq对象
        var $dv = $("#dv");
        var $btn1 = $("#btn1");
        var $btn2 = $("#btn2");
        var $btn3 = $("#btn3");
        //2、绑定事件
        $btn1.on("click",function () {
            $dv.on("click",function () {
                alert("我被点击了！");
            });
            alert("div已绑定点击事件！");
        });
        $btn2.on("click",function () {
            $dv.off("click");
            alert("div已解绑点击事件！！");
        });
        $btn3.toggle(function () {
            alert("切换至事件A！！");
        },function () {
            alert("切换至事件B！！");
        });
    
        //3、鼠标事件
        // $dv.mouseover(function () {
        //     alert("鼠标来了");
        // }).mouseout(function () {
        //     alert("鼠标走了");
        // });
    </script>
    </html>

# 四、插件 #

## 1、作用 ##

增强JQuery的功能；

## 2、实现方式 ##

1、$.fn.extend(object)：增强通过JQuery获取的对象的功能；
    2、$.extend(object)：增强JQuery对象自身的功能；

## 3、基本使用 ##

### 定义和使用JQuery的对象插件 ###

**代码演示：**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="../js/jquery-3.4.1.min.js"></script>
    </head>
    <body>
    <input id="btn1" type="button" value="按钮">
    </body>
    <script type="text/javascript">
        //1、定义JQuery的对象插件
        $.fn.extend({
            //定义一个check方法
            check:function() {
                alert("定义JQuery的对象插件");
            }
        });
        //2、使用JQuery的对象插件，使用定义的check方法
        $("#btn1").check();
    </script>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/2f53dce8303f4430bc7deeadb9021f3e.jpg