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

訾博ZiBo

发布于 2025-01-06 14:45:03

4400

代码可运行

文章被收录于专栏：全栈开发工程师全栈开发工程师

运行总次数：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(初始值;循环条件;步长)

代码演示：

<!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">
    //1、获取所有li标签
    var $lis = $("ul > li");
    //2、for循环遍历
    for (var i = 0; i < $lis.length; i++) {
        document.write($lis[i].innerText + "<br/>");
    }
</script>
</html>

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>

运行结果：

三、事件绑定

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>
<!--    引入插件migrate，以支持切换事件方法toggle-->
    <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>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2025-01-06，如有侵权请联系 cloudcommunity@tencent.com 删除

插件