## 今日内容：
    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学习笔记 - 基础知识扫盲入门篇

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

  2. JQuery 高级

    来源于传智播客老师发的笔记 今日内容: 1. JQuery 高级 1. 动画 2. 遍历 3. 事件绑定 4. 案例 5. 插件 JQuery 高级 1. 动画 1. 三种方式显示和隐藏元素 1. 默 ...

  3. jquery插件开发继承了jQuery高级编程思路

    要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统.这好比大公司们争相做平台一样,得平台者得天下.苹果,微软,谷歌等巨头,都有各自的平台及生态圈 ...

  4. jQuery学习笔记(一)jQuery选择器

    目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...

  5. jQuery 学习笔记

    jQuery 学习笔记   一.jQuery概述    宗旨: Write Less, Do More.    基础知识:        1.符号$代替document.getElementById( ...

  6. jQuery高级编程

    jquery高级编程1.jquery入门2.Javascript基础3.jQuery核心技术 3.1 jQuery脚本的结构 3.2 非侵扰事JavaScript 3.3 jQuery框架的结构 3. ...

  7. jQuery学习笔记（一）：入门

      jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操 ...

  8. jquery学习笔记---jquery插件开发

    http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html jquery插件开发:http://www.cnblogs.com/damonla ...

  9. jQuery整理笔记文件夹

    jQuery整理笔记文件夹 jQuery整理笔记一----jQuery開始 jQuery整理笔记二----jQuery选择器整理 jQuery整理笔记三----jQuery过滤函数 jQuery整理笔 ...

随机推荐

  1. SNMP命令

    snmp命令 配置管理网络协议Weblogic项目管理Cisco Snmputil 命令 Snmputil是一个命令行下的软件,使用语法如下: usage: snmputil get|getnext| ...

  2. Java缓存技术有哪些

    我们用ehcache在本地,分布式用redis和memcache,各有各的好处,现在企业都是应用很多种中间件供俺们码农选择.

  3. JSP——指令（Directive）

    指令是一种JSP句法元素,它告诉JSP转换器应该如何将某个JSP页面转换成Servlet. JSP 2.2中定义了几个指令:page.include.taglib.tag.attribute以及var ...

  4. RF中BDD编写

    工程结构 用户关键字 测试用例 运行日志

  5. ajaxGird修改一条记录中的字段

    var rowData = ajaxgrid.getSelectedRow(); var quality = rowData["quality"]; var rowIndex = ...

  6. 全面解读php-引用变量（&）

    本文讲述引用传值的核心原理,看完即可扫清一切和引用传值相关的内容,不会了记得画图. 一.memory_get_usage的使用 传值赋值 // 定义一个变量 $a = range(0, 10000); ...

  7. Linux_ubuntu命令-用户、权限管理

    用户是Unix/Linux系统工作中重要的一环,用户管理包括用户与组账号的管理. 在Unix/Linux系统中,不论是由本机或是远程登录系统,每个系统都必须拥有一个账号,并且对于不同的系统资源拥有不同 ...

  8. 【flask】使用类组织配置-使用工厂函数创建程序实例

    [需求] 使用配置类管理flask管理测试环境, 通过1个参数即可控制Flask是运行develpment环境还是production环境(数据库配置,邮件配置也要根据环境的变化而变化) [思路] 1 ...

  9. git 新建项目提交本地项目代码

    git init git remote add origin ssh://git@42.123.127.93:10022/tyshawn/sdap1.git git add . git commit ...

  10. java：LeakFilling (Mybatis)

    1.实体类属性与数据库中字段名字不一样时,或者起别名时: TbOrderMapper.xml配置文件中,配置resultMap标签: 其它相同的标签也需要配,否则查询不出来对应数据. 2.一对一关联: ...