## 今日内容：
    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. 使用阿里云镜像站NTP服务搭建NTP服务器（基于CentOS 7系统）

    镜像下载.域名解析.时间同步请点击 阿里云开源镜像站 一.NTP服务器介绍 网络时间协议(Network Time Protocol,NTP)服务器,也就是日常所说的NTP服务器,用来提供同步时间服务 ...

  2. ZYNQ 驱动初始化套路--UART串口

    @ 目录 UART 串口 GPIO之 MIO控制 LED 套路如下: 1.定义硬件信息结构体 namePs_Config *Config; 2.定义驱动信息结构体 namePs name_Ps; 3. ...

  3. [SPDK/NVMe存储技术分析]006 - 内存屏障(MB)

    在多核(SMP)多线程的情况下,如果不知道CPU乱序执行的话,将会是一场噩梦,因为无论怎么进行代码Review也不可能发现跟内存屏障(MB)相关的Bug.内存屏障分为两类: 跟编译有关的内存屏障: 告 ...

  4. Java基础 - 泛型详解

    2022-03-24 09:55:06 @GhostFace 泛型 什么是泛型? 来自博客 Java泛型这个特性是从JDK 1.5才开始加入的,因此为了兼容之前的版本,Java泛型的实现采取了&quo ...

  5. Java基础 （下）

    泛型 Java 泛型了解么?什么是类型擦除?介绍一下常用的通配符? Java 泛型(generics) 是 JDK 5 中引入的一个新特性, 泛型提供了编译时类型安全检测机制,该机制允许程序员在编译时 ...

  6. Spring Cache缓存框架

    一.序言 Spring Cache是Spring体系下标准化缓存框架.Spring Cache有如下优势: 缓存品种多 支持缓存品种多,常见缓存Redis.EhCache.Caffeine均支持.它们 ...

  7. 半吊子菜鸟学Web开发 -- PHP学习 1-基础语法

    1索引数组 $fruit = array("苹果","香蕉","菠萝"): print_r($fruit); 索引数组的初始化,有三种方式: ...

  8. Listener是什么？有什么作用？

    Listener是指Servlet中的监听器. Listener可以对ServletContext对象.HttpSession对象.ServletRequest对象进行监听.

  9. Mybatis 动态 sql 有什么用？执行原理？有哪些动态 sql？

    Mybatis 动态 sql 可以在 Xml 映射文件内,以标签的形式编写动态 sql,执行原理 是根据表达式的值 完成逻辑判断并动态拼接 sql 的功能. Mybatis 提供了 9 种动态 sql ...

  10. java常用方法集合

    1.获取当前日期 // 获取当前日期 public Date getDate(int num) { Calendar cal = new GregorianCalendar(); cal.setTim ...