专栏首页Java小白成长之路第51次文章:JQuery高级

第51次文章:JQuery高级

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

JQuery 高级

一、动画

1、三种默认方式显示和隐藏元素
  • show([speed,[easing],[fn]])
  • hide([speed,[easing],[fn]])
  • toggle([speed,[easing],[fn]])

【对参数的说明】

  1. speed:动画的速度。三个预定的值("slow","normal","fast")或表示动画时长的毫秒数值(如:1000)
  2. easing:用来指定切换效果,默认是"swing",可用参数"linear"
    • swing:动画执行时效果是:先慢 中间快,最后又慢
    • linear:动画执行时速度是匀速的
  3. 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)分析

  1. 给开始按钮绑定单击事件
    • 定义循环定时器
    • 切换小相框的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


本文分享自微信公众号 - Java小白成长之路(Java_xiaobai),作者:鹏程万里

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-12-29

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 第50次文章:JQuery基础

    tips:window.onload 和 $(function)异同:两者的功能相同,都是等到页面加载结束之后,再执行内部的代码。但是有一定的区别,主要是win...

    鹏-程-万-里
  • 第48次文章:EL&JSTL

    主要用于页面包含,导入页面的资源文件,格式为:<%@ include file="top.jsp" %>

    鹏-程-万-里
  • 第四次文章:其他容器类

    各位小伙伴儿大家好,临近年关,先给大家拜个早年,祝大家新年快乐!今天先分享一碗鸡汤:代码学习绝对不是一条坦途,人生奋斗的向上之路也异常曲折,但没有关系,当你回望...

    鹏-程-万-里
  • 使用 JavaScript 自动化你的 Mac

    在Apple发布的Yosemite系统(OSX10.10+)中有一个被大家忽略的特性:使用 JavaScript编写自动化脚本。在这之前只能通过AppleSc...

    IMWeb前端团队
  • 使用 JavaScript 自动化你的 Mac

    系统自带的编写自动化脚本的工具是ScriptEditor。打开编辑器,把语言从 AppleScript切换到JavaScritp。接下来我们就来实战一下,写一个...

    IMWeb前端团队
  • Coursera吴恩达《神经网络与深度学习》课程笔记(2)-- 神经网络基础之逻辑回归

    上节课我们主要对深度学习(Deep Learning)的概念做了简要的概述。我们先从房价预测的例子出发,建立了标准的神经网络(Neural Network)模型...

    红色石头
  • lodash源码解读之模块化的基础——IIFE

    IIFE包含两部分。 第一部分是一个匿名函数,它包裹在分组操作符()中,拥有独立的词法作用域。 第二部分是再一次使用分组操作符(),创建一个立即执行函数表达式。...

    我是leon
  • HTML5中的Web Notification桌面通知

    大家在做一些浏览器端的聊天功能的时候,或者在一些网站跟在线客服咨询的时候,会看到一些消息通知的提示,常见的有浏览器标签页的闪烁和屏幕右侧的消息通知。本篇博客就在...

    用户1174387
  • 分布式监控系统Zabbix--完整安装记录 -添加apache监控

    前面介绍了zabbix3.0.3环境及相关监控项的添加,下面介绍下针对apache的监控配置: 1)在apache配置文件中打开server-status状态访...

    洗尽了浮华
  • 从惰性IO说起_Haskell笔记6

    从硬盘读文件时并不会一次性全读入内存,而是一点一点的流式读取。文本文件的话,默认buffer是line-buffering,即一次读一行,二进制文件的话,默认b...

    ayqy贾杰

扫码关注云+社区

领取腾讯云代金券