## 今日内容：
    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. python 发送POST请求

    #博客地址:https://blog.csdn.net/qq_36374896 import urllib.request import urllib.parse url = "http:/ ...

  2. 提升组件库通用能力 - NutUI 在线主题定制功能探索

    开发背景 NutUI 作为京东风格的组件库,已具备 H5 和多端小程序开发能力.随着业务的不断发展,组件库的应用场景越来越广.在公司内外面临诸如科技.金融.物流等各多个大型团队使用时,单一的京东 AP ...

  3. Ubuntu一键安装LAMP，LNMP

    参考: https://blog.csdn.net/xueyingqi/article/details/50674078 https://www.cnblogs.com/pengzheng/p/363 ...

  4. 题解0005：数的划分（洛谷P1025）

    题目描述:将整数 n 分成 k 份,每份不能为空,颠倒顺序的被看成一种分法. 题目链接:https://www.luogu.com.cn/problem/P1025 题目思路:深搜剪枝,规定搜索的下一 ...

  5. JavaScript 的诞生历史

    看到一篇介绍JS诞生历史的文章,很有意思,文章里描述了很多的历史细节 https://webdevelopmenthistory.com/1995-the-birth-of-javascript/

  6. 中国软件杯---电力客户行为分析---图表联动echarts-demo（flask）

    中国软件杯---电力客户行为分析---图表联动echarts-demo(flask) 题目链接(可下载原始CSV数据集):http://www.cnsoftbei.com/plus/view.php? ...

  7. List、Set、Map 和 Queue 之间的区别？

    List 是一个有序集合,允许元素重复.它的某些实现可以提供基于下标值的常量 访问时间,但是这不是 List 接口保证的.Set 是一个无序集合.

  8. synchronize、Lock、ReenTrantLock 的区别

    synchronize 和Lock: 1.synchronize 系java 内置关键字:而Lock 是一个类 2.synchronize 可以作用于变量.方法.代码块:而Lock 是显式地指定开始和 ...

  9. vue中v-model 数据双向绑定

    表单输入绑定 v-model 数据双向绑定,只能应用在input /textare /select <div id="app"> <input type=&quo ...

  10. Netty + Spring + ZooKeeper搭建轻量级RPC框架

    本文参考 本篇文章主要参考自OSCHINA上的一篇"轻量级分布式 RPC 框架",因为原文对代码的注释和讲解较少,所以我打算对这篇文章的部分关键代码做出一些详细的解释 在本篇文章中 ...