第51次文章：JQuery高级

鹏-程-万-里

发布于 2020-01-02 11:48:08

3.6K0

发布于 2020-01-02 11:48:08

文章被收录于专栏：Java小白成长之路Java小白成长之路

上周我们聊了一下jQuery的基础部分，这周我们把jQuery的高级部分学习一下吧！同时也预祝各位小伙伴新年快乐!

JQuery 高级

一、动画

1、三种默认方式显示和隐藏元素

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

【对参数的说明】

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

2、滑动显示和隐藏方式

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

3、淡入淡出显示和隐藏方式

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

二、遍历

1、js的遍历方式

for(初始化值；循环结束条件；步长)

2、jq的遍历方式

jq对象.each(callback)
$.each(object,[callback])
for..of 3.0 版本之后提供的方式

3、上述遍历方式的实现

$(function () {
    //1.获取所有ul下的li
    var citys = $("#city li");

    /*//1.js方式遍历
    for (var i = 0; i < citys.length; i++) {
        alert(i+": "+citys[i].innerHTML);
    }*/

    /* //2.jq的遍历方式：jq对象.each(callback)
    citys.each(function (index,element) {
        //3.1获取li对象 第一种方式this
        // alert(this.innerHTML)
        //3.2获取li对象 第二种方式 在回调函数中定义参数 index(索引) element(元素对象)
        // alert(index+": "+element.innerHTML);

        //判断如果是上海，则结束循环
        if("上海" == element.innerHTML){
            //如果当前function返回为false，则结束循环（相当于break）
            //如果返回true，则结束本次循环，继续下一次循环(相当于continue)
            return true;
        }
        alert(index+": "+element.innerHTML);
    })*/

    /*//3.$.each(object,[callback])
    $.each(citys,function () {
        alert(this.innerHTML);
    })*/

    //4.for...of:jquery 3.0 版本之后提供的方式
    for (li of citys){
        alert(li.innerHTML);
    }
})

三、事件绑定

1、jquery标准的绑定方式

jq对象.事件方法（回调函数）；

【注】如果调用事件方法，不传递回调函数，则会触发浏览器默认行为。例如：

表单对象.submit（）；//让表单提交

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

jq对象.on("事件名称"，回调函数)。
jq对象.off("事件名称")。如果off方法不传递任何参数，则将组件上的所有事件全部解绑

3、事件切换：toggle

jq对象.toggle(fn1,fn2....)。当单击jq对象对应的组件后，会执行fn1，第二次单击会执行fn2.....

【注意】1.9版本 .toggle() 方法删除,jQuery Migrate（迁移）插件可以恢复此功能。插件如下所示：<script src="../js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script>

四、案例

1、案例1

（1）需求

当页面加载完，3秒后，自动显示广告
广告显示5秒后，自动消失

（2）分析

使用定时器来完成。setTimeout（执行一次定时器）
分析发现JQuery的显示和隐藏动画效果其实就是控制display属性值
使用 show/hide方法来完成广告的显示

（3）代码实现

<!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);//3秒后显示广告
            //定义定时器，调用adHide方法 8秒后执行一次
            setTimeout(adHide,8000);//8秒后隐藏广告
        })
        //显示广告
        function adShow(){
            //获取广告div，调用显示方法
            $("#ad").fadeIn("slow");
        }

        //隐藏广告
        function adHide() {
            //获取广告div，调用隐藏方法
            $("#ad").fadeOut("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、案例2

（1）需求

点击“开始”按钮，小相框的图片快速切换，点击“停止”按钮，小相框内的图片暂停，大相框展示小相框内的内容。

（2）分析

给开始按钮绑定单击事件
- 定义循环定时器
- 切换小相框的src属性。首先定义数组，存放图片资源路径，然后生成随机数，作为数组索引。

2. 给结束按钮绑定单击事件

停止定时器
给大相框设置src属性

（3）代码实现

<!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;
        var index;
        $(function () {
            $("#startID").prop("disabled",false);
            $("#stopID").prop("disabled",true);
        })

        //1.给开始按钮绑定单击事件
        function imgStart() {
            $("#startID").prop("disabled",true);
            $("#stopID").prop("disabled",false);
            //1.1定义循环定时器 20毫秒执行一次
            startId = setInterval(function () {
                //1.2生成随机角标
                index = Math.floor(Math.random()*imgs.length);
                //1.3设置小相框的src属性
                $("#img1ID").prop("src",imgs[index]);
            },20)
        }

        //2.给结束按钮绑定单击事件
        function imgStop() {
            $("#startID").prop("disabled",false);
            $("#stopID").prop("disabled",true);
            //1.1停止定时器
            clearInterval(startId);
            //1.2给大相框设置src属性
            $("#img2ID").prop("src",imgs[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>

效果图如下：

五、插件

增强JQuery的功能,实现方式有以下两种。

1、$.fn.extend(object)

增强通过Jquery获取的对象的功能，属于对象级别的插件，例如：$("#id")

我们用一个案例来展示一下插件的使用。如下案例所示：

<!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对象添加2个方法 check()选中所有复选框，uncheck()取消选中所有复选框

        //1.定义jQuery的对象插件
        $.fn.extend({
            //定义了一个check()方法。所有的jq对象都可以调用该方法
            check:function () {
                //让复选框选中
                //this：调用该方法的jq对象
                this.prop("checked",true);
            },
            //定义了一个uncheck()方法。所有的jq对象都可以调用该方法
            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>

tips：我们定义一个Jquery插件，在插件里面定义了两个方法，分别是check()和uncheck(),然后再给两个单击按钮绑定不同的方法事件。

最后的效果：

2、$.extend(object)

增强JQuery对象自身的功能，属于全局级别的插件，例如：$/jQuery

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2019-12-29，如有侵权请联系 cloudcommunity@tencent.com 删除

jquery

编程算法

java

本文分享自 Java小白成长之路微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

jquery

编程算法

java

登录后参与评论

0 条评论

热度