## 今日内容：
    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. CentOS 通过shell脚本过滤得到服务器IP地址

    1.CentOS 6.x (32Bit &&64Bit) [root@localhost ~]# ifconfig |grep Bcast |awk '{print$2}' |sed ...

  2. Linux 查看文件大小并按照大小排序

    使用df 命令查看当前系统磁盘的使用情况: [root@node ~]# df -Th Filesystem Type Size Used Avail Use% Mounted on /dev/map ...

  3. 一个简单的用户态赋值语句，cpu都做了哪些操作

    如int a = 0;这样一个赋值语句,cpu做了哪些操作.

  4. [SPDK/NVMe存储技术分析]015 - 理解内存注册(Memory Registration)

    使用RDMA, 必然关系到内存区域(Memory Region)的注册问题.在本文中,我们将以mlx5 HCA卡为例回答如下几个问题: 为什么需要注册内存区域? 注册内存区域有嘛好处? 注册内存区域的 ...

  5. 解决福大aTrust深信服无法访问部分页面的问题

    如果你原先使用过天融信,hosts里会留下 #################################################### Add by VONE SSL VPN Clien ...

  6. 架构师成长之路也该了解的新一代微服务技术-ServiceMesh（上）

    架构演进 发展历程 我们再来回顾一下架构发展历程,从前往后的顺序依次为单机小型机->垂直拆分->集群化负载均衡->服务化改造架构->服务治理->微服务时代 单机小型机:采 ...

  7. position 的值absolute、fixed、relative和static的定位原点是什么

    position 的值absolute.fixed.relative和static的定位原点是什么 absolute 成绝对定位的元素,相对于值不为static的第一个父元素进行定位,也可以理解为离自 ...

  8. Where和having都是条件筛选关键字，它们有什么分别？

    WHERE是在数据分组前进行条件过滤, HAVING子句是在数据分组后进行条件过滤,WHERE子句中不能使用聚合函数,HAVING子句可以使用聚合函数. 需要注意说明:当同时含有where子句.gro ...

  9. Jinkins流水线脚本使用curl命令调用服务接口，并且使用url传参。

    curl http://xxx.xx.xx.xx:xxxx/jenkins/publish?fileName=${fileName}&tag_name=${tag_name} 如图调用不符合c ...

  10. 2020/12/28为止好用的PC下载工具

    IDM:http://www.internetdownloadmanager.com/ NDM(免费):http://www.neatdownloadmanager.com/index.php/en/ ...