## 今日内容：
    1. JQuery 高级
        1. 动画
        2. 遍历
        3. 事件绑定
        4. 案例
        5. 插件
## JQuery 高级
    1. 动画
        1. 三种方式显示和隐藏元素
            1. 默认显示和隐藏方式
                1. show([speed,[easing],[fn]])
                    1. 参数：
                        1. speed：动画的速度。三个预定义的值("slow","normal", "fast")或表示动画时长的毫秒数值(如：1000)
                        2. easing：用来指定切换效果，默认是"swing"，可用参数"linear"
                            * swing：动画执行时效果是 先慢，中间快，最后又慢
                            * linear：动画执行时速度是匀速的
                        3. 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]])
    2. 遍历
        1. js的遍历方式
            * for(初始化值;循环结束条件;步长)
        2. jq的遍历方式
            1. jq对象.each(callback)
                1. 语法：
                    jquery对象.each(function(index,element){});
                        * index:就是元素在集合中的索引
                        * element：就是集合中的每一个元素对象
   
                        * this：集合中的每一个元素对象
                2. 回调函数返回值：
                    * true:如果当前function返回为false，则结束循环(break)。
                    * false:如果当前function返回为true，则结束本次循环，继续下次循环(continue)
            2. $.each(object, [callback])
            3. for..of: jquery 3.0 版本之后提供的方式
                for(元素对象 of 容器对象)
       
    3. 事件绑定
        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>
    4. 案例
        1. 广告显示和隐藏
            <!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>
                    /*
                        需求：
                            1. 当页面加载完，3秒后。自动显示广告
                            2. 广告显示5秒后，自动消失。
           
                        分析：
                            1. 使用定时器来完成。setTimeout (执行一次定时器)
                            2. 分析发现JQuery的显示和隐藏动画效果其实就是控制display
                            3. 使用  show/hide方法来完成广告的显示
                     */
           
                    //入口函数，在页面加载完成之后，定义定时器，调用这两个方法
                    $(function () {
                       //定义定时器，调用adShow方法 3秒后执行一次
                       setTimeout(adShow,3000);
                       //定义定时器，调用adHide方法，8秒后执行一次
                        setTimeout(adHide,8000);
                    });
                    //显示广告
                    function adShow() {
                        //获取广告div，调用显示方法
                        $("#ad").show("slow");
                    }
                    //隐藏广告
                    function adHide() {
                        //获取广告div，调用隐藏方法
                        $("#ad").hide("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. 抽奖
            <!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'>
           
                    /*
                        分析：
                            1. 给开始按钮绑定单击事件
                                1.1 定义循环定时器
                                1.2 切换小相框的src属性
                                    * 定义数组，存放图片资源路径
                                    * 生成随机数。数组索引
                            2. 给结束按钮绑定单击事件
                                1.1 停止定时器
                                1.2 给大相框设置src属性
           
                     */
                    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;//开始定时器的id
                    var index;//随机角标
                    $(function () {
                        //处理按钮是否可以使用的效果
                        $("#startID").prop("disabled",false);
                        $("#stopID").prop("disabled",true);
                       //1. 给开始按钮绑定单击事件
                        $("#startID").click(function () {
                            // 1.1 定义循环定时器 20毫秒执行一次
                            startId = setInterval(function () {
                                //处理按钮是否可以使用的效果
                                $("#startID").prop("disabled",true);
                                $("#stopID").prop("disabled",false);
                                //1.2生成随机角标 0-6
                                index = Math.floor(Math.random() * 7);//0.000--0.999 --> * 7 --> 0.0-----6.9999
                                //1.3设置小相框的src属性
                                $("#img1ID").prop("src",imgs[index]);
           
                            },20);
                        });
                        //2. 给结束按钮绑定单击事件
                        $("#stopID").click(function () {
                            //处理按钮是否可以使用的效果
                            $("#startID").prop("disabled",false);
                            $("#stopID").prop("disabled",true);
                           // 1.1 停止定时器
                            clearInterval(startId);
                           // 1.2 给大相框设置src属性
                            $("#img2ID").prop("src",imgs[index]).hide();
                            //显示1秒之后
                            $("#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">
           
            <!-- 停止按钮 -->
            <input
                    id="stopID"
                    type="button"
                    value="点击停止"
                    style="width:150px;height:150px;font-size:22px">
            </body>
            </html>
   
    5. 插件：增强JQuery的功能
        1. 实现方式：
            1. $.fn.extend(object)
                * 增强通过Jquery获取的对象的功能  $("#id")
            2. $.extend(object)
                * 增强JQeury对象自身的功能  $/jQuery

JQuery学习高级的更多相关文章

  1. jquery学习（3）--高级选择器

    自己手写的学习笔记.常规选择器: /****************学习--高级选择器(1)****************/---高级选择器:ie7+ 层次选择器: 后代选择器     ul li ...

  2. jQuery学习笔记 - 基础知识扫盲入门篇

    jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...

  3. 大量Javascript/JQuery学习教程电子书合集

    ［推荐分享］大量Javascript/JQuery学习教程电子书合集,送给有需要的人   不收藏是你的错^_^. 经证实,均可免费下载. 资源名称 资源大小   15天学会jQuery(完整版).pd ...

  4. ［推荐分享］大量Javascript/JQuery学习教程电子书合集，送给有需要的人

    不收藏是你的错^_^. 经证实,均可免费下载. 资源名称 资源大小   15天学会jQuery(完整版).pdf 274.79 KB   21天学通JavaScript(第2版)-顾宁燕扫描版.pdf ...

  5. 第一百七十一节，jQuery，高级事件，模拟操作,命名空间,事件委托,on、off 和 one

    jQuery,高级事件,模拟操作,命名空间,事件委托,on.off 和 one 学习要点: 1.模拟操作 2.命名空间 3.事件委托 4.on.off 和 one jQuery 不但封装了大量常用的事 ...

  6. jQuery学习之开篇

    吐槽 近期比較烦,对于一个前端白痴来说,工作方向突然转向前端这块着实让人蛋疼无比.前段时间简单的学习了下EasyUI,算是对其有一个简单的认知了吧.EasyUI的研究过程中发现,假设没有掌握JS.JQ ...

  7. jQuery学习之路（1）-选择器

    ▓▓▓▓▓▓ 大致介绍 终于开始了我的jQuery学习之路!感觉不能再拖了,要边学习原生JavaScript边学习jQuery jQuery是什么? jQuery是一个快速.简洁的JavaScript ...

  8. jquery学习（一）

    简单的jquery学习,首先在页面引入jquery <!-- 引入jquery --> <script src="js/jquery-1.8.3.js" type ...

  9. Jquery remove 高级用法

    Jquery remove 高级用法 html 代码 <div class="file-image">abc1111</div><div class= ...

随机推荐

  1. 内网渗透----Linux下信息收集

    基础信息 1.系统类型 cat /etc/issue查看系统名称 Lsb-release查看系统名称.版本号 2. 内核版本 uname –a 查看所有信息 ls /root |grep vmlinu ...

  2. 内网渗透----使用mimikatz获取windows登陆口令

    使用mimikatz提取windows密码 以管理员运行后,可以随机打一些字符,进入如下界面 输入aaa::aaa,可展示所有模块: 可采用log命令,保存日志 获取hash与明文用户口令 privi ...

  3. 【网鼎杯2020青龙组】Web WriteUp

    AreUSerialz 打开题目直接给出了源代码 <?php include("flag.php"); highlight_file(__FILE__); class Fil ...

  4. JavaScript 事件循环（1） —— 从 setTimeout 说起

    转变认知 setTimeout 可能是很多前端工程师爱用的方法,它可以使得一段代码延迟执行,例如: setTimeout(() => console.log('A'), 1000); // 在1 ...

  5. 学习Spring资料

    参考文档 官方文档 源码分析 书籍 Spring5核心原理与30个类手写实战 Spring技术内幕 视频 bilibili

  6. Flask-Script使用教程

    Flask使用第三方脚本 一个干净的项目准备: 一个干净的Flask项目连接地址: https://pan.baidu.com/s/123TyVXOFvh5P7V8MbyMfDg 话不多说,上菜: 1 ...

  7. 学习openstack（六）

    VIII openstack(1) 传统的数据中心面临的问题:成本.效率(要快).管理方面(物理机.云主机): 云计算:对运维需求总体量是减少了,尤其是硬件工程师,对运维的技术要求提高了: 云计算是个 ...

  8. C语言之基本组成(知识点6)

    一.C程序基本组成 C程序是由语句组成的,通常包括一个或多个函数,其中有且只有一个函数称为 主函数,其函数名为main. 二.C程序的组成特点: 1.每个C程序由一个或多个函数组成.每个C程序有且仅有 ...

  9. 前端入门-day2（常见css问题及解答）

    写在前面 今天是入门前端的day2, 小伙伴们应该已经看了一些HTML的基础和CSS的基础了,是不是遇到了很多关于CSS的问题呢.因为HTML很少有太复杂的问题,所以直接写一篇关于CSS的常见问题及解 ...

  10. 【分享】WeX5的正确打开方式（6）——数据组件初探

    本文是[WeX5的正确打开方式]系列的第6篇文章,简单介绍一下WeX5中数据组件的特性和结构形式. 数据组件的由来 上一篇 WeX5绑定机制我们实现了一个简单的记账本应用,当时所有数据都用 JSON ...