动画

  1.     1. 三种方式显示和隐藏元素<br />            1. 默认显示和隐藏方式<br />                1. show([speed,[easing],[fn]])<br />                    1. 参数：<br />                        1. speed：动画的速度。三个预定义的值("slow","normal", "fast")或表示动画时长的毫秒数值(如：1000)<br />                        2. easing：用来指定切换效果，默认是"swing"，可用参数"linear"<br />                            * swing：动画执行时效果是 先慢，中间快，最后又慢<br />                            * linear：动画执行时速度是匀速的<br />                        3. fn：在动画完成时执行的函数，每个元素执行一次。<br />    <br />                2. hide([speed,[easing],[fn]])<br />                3. toggle([speed],[easing],[fn])<br />            <br />            2. 滑动显示和隐藏方式<br />                1. slideDown([speed],[easing],[fn])<br />                2. slideUp([speed,[easing],[fn]])<br />                3. slideToggle([speed],[easing],[fn])<br />    <br />            3. 淡入淡出显示和隐藏方式<br />                1. fadeIn([speed],[easing],[fn])<br />                2. fadeOut([speed],[easing],[fn])<br />                3. fadeToggle([speed,[easing],[fn]])

遍历

  1.     1. js的遍历方式<br />            * for(初始化值;循环结束条件;步长)<br />        2. jq的遍历方式<br />            1. jq对象.each(callback)<br />                1. 语法：<br />                    jquery对象.each(function(index,element){});<br />                        * index:就是元素在集合中的索引<br />                        * element：就是集合中的每一个元素对象<br />    <br />                        * this：集合中的每一个元素对象<br />                2. 回调函数返回值：<br />                    * true:如果当前function返回为false，则结束循环(break)。<br />                    * false:如果当前function返回为true，则结束本次循环，继续下次循环(continue)<br />            2. $.each(object, [callback])<br />            3. for..of: jquery 3.0 版本之后提供的方式<br />                for(元素对象 of 容器对象)<br />

事件绑定

  1.     1. jquery标准的绑定方式<br />            * jq对象.事件方法(回调函数)；<br />            * 注：如果调用事件方法，不传递回调函数，则会触发浏览器默认行为。<br />                * 表单对象.submit();//让表单提交<br />        2. on绑定事件/off解除绑定<br />            * jq对象.on("事件名称",回调函数)<br />            * jq对象.off("事件名称")<br />                * 如果off方法不传递任何参数，则将组件上的所有事件全部解绑<br />        3. 事件切换：toggle<br />            * jq对象.toggle(fn1,fn2...)<br />                * 当单击jq对象对应的组件后，会执行fn1.第二次点击会执行fn2.....<br />                <br />            * 注意：1.9版本 .toggle() 方法删除,jQuery Migrate（迁移）插件可以恢复此功能。<br />                 <script src="../js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script>

案例

广告显示和隐藏

  1. <!DOCTYPE html>
  2.             <html>
  3.             <head>
  4.                 <meta charset="UTF-8">
  5.                 <title>广告的自动显示与隐藏</title>
  6.                 <style>
  7.                     #content{width:100%;height:500px;background:#999}
  8.                 </style>
  10.                 <!--引入jquery-->
  11.                 <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
  12.                 <script>
  13.                     /*
  14.                         需求：
  15.                             1. 当页面加载完，3秒后。自动显示广告
  16.                             2. 广告显示5秒后，自动消失。
  18.                         分析：
  19.                             1. 使用定时器来完成。setTimeout (执行一次定时器)
  20.                             2. 分析发现JQuery的显示和隐藏动画效果其实就是控制display
  21.                             3. 使用  show/hide方法来完成广告的显示
  22.                      */
  24.                     //入口函数，在页面加载完成之后，定义定时器，调用这两个方法
  25.                     $(function () {
  26.                        //定义定时器，调用adShow方法 3秒后执行一次
  27.                        setTimeout(adShow,3000);
  28.                        //定义定时器，调用adHide方法，8秒后执行一次
  29.                         setTimeout(adHide,8000);
  30.                     });
  31.                     //显示广告
  32.                     function adShow() {
  33.                         //获取广告div，调用显示方法
  34.                         $("#ad").show("slow");
  35.                     }
  36.                     //隐藏广告
  37.                     function adHide() {
  38.                         //获取广告div，调用隐藏方法
  39.                         $("#ad").hide("slow");
  40.                     }
  44.                 </script>
  45.             </head>
  46.             <body>
  47.             <!-- 整体的DIV -->
  48.             <div>
  49.                 <!-- 广告DIV -->
  50.                 <div id="ad" style="display: none;">
  51.                     <img style="width:100%" src="../img/adv.jpg" />
  52.                 </div>
  54.                 <!-- 下方正文部分 -->
  55.                 <div id="content">
  56.                     正文部分
  57.                 </div>
  58.             </div>
  59.             </body>
  60.             </html>

抽奖

  1. <!DOCTYPE html>
  2.             <html>
  3.             <head>
  4.                 <meta charset="UTF-8">
  5.                 <title>jquery案例之抽奖</title>
  6.                 <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
  8.                 <script language='javascript' type='text/javascript'>
  10.                     /*
  11.                         分析：
  12.                             1. 给开始按钮绑定单击事件
  13.                                 1.1 定义循环定时器
  14.                                 1.2 切换小相框的src属性
  15.                                     * 定义数组，存放图片资源路径
  16.                                     * 生成随机数。数组索引
  19.                             2. 给结束按钮绑定单击事件
  20.                                 1.1 停止定时器
  21.                                 1.2 给大相框设置src属性
  23.                      */
  24.                     var imgs = ["../img/man00.jpg",
  25.                                 "../img/man01.jpg",
  26.                                 "../img/man02.jpg",
  27.                                 "../img/man03.jpg",
  28.                                 "../img/man04.jpg",
  29.                                 "../img/man05.jpg",
  30.                                 "../img/man06.jpg",
  31.                                 ];
  32.                     var startId;//开始定时器的id
  33.                     var index;//随机角标
  34.                     $(function () {
  35.                         //处理按钮是否可以使用的效果
  36.                         $("#startID").prop("disabled",false);
  37.                         $("#stopID").prop("disabled",true);
  40.                        //1. 给开始按钮绑定单击事件
  41.                         $("#startID").click(function () {
  42.                             //处理按钮是否可以使用的效果
  43.                             $("#startID").prop("disabled",true);
  44.                             $("#stopID").prop("disabled",false);
  46.                             // 1.1 定义循环定时器 20毫秒执行一次
  47.                             startId = setInterval(function () {
  48.                                 //1.2生成随机角标 0-6
  49.                                 index = Math.floor(Math.random() * 7);//0.000--0.999 --> * 7 --> 0.0-----6.9999
  50.                                 //1.3设置小相框的src属性
  51.                                 $("#img1ID").prop("src",imgs[index]);
  53.                             },20);
  54.                         });
  57.                         //2. 给结束按钮绑定单击事件
  58.                         $("#stopID").click(function () {
  59.                             //处理按钮是否可以使用的效果
  60.                             $("#startID").prop("disabled",false);
  61.                             $("#stopID").prop("disabled",true);
  64.                            // 1.1 停止定时器
  65.                             clearInterval(startId);
  66.                            // 1.2 给大相框设置src属性
  67.                             $("#img2ID").prop("src",imgs[index]).hide();
  68.                             //显示1秒之后
  69.                             $("#img2ID").show(1000);
  70.                         });
  71.                     });
  76.                 </script>
  78.             </head>
  79.             <body>
  81.             <!-- 小像框 -->
  82.             <div style="border-style:dotted;width:160px;height:100px">
  83.                 <img id="img1ID" src="../img/man00.jpg" style="width:160px;height:100px"/>
  84.             </div>
  86.             <!-- 大像框 -->
  87.             <div
  88.                     style="border-style:double;width:800px;height:500px;position:absolute;left:500px;top:10px">
  89.                 <img id="img2ID" src="../img/man00.jpg" width="800px" height="500px"/>
  90.             </div>
  92.             <!-- 开始按钮 -->
  93.             <input
  94.                     id="startID"
  95.                     type="button"
  96.                     value="点击开始"
  97.                     style="width:150px;height:150px;font-size:22px">
  99.             <!-- 停止按钮 -->
  100.             <input
  101.                     id="stopID"
  102.                     type="button"
  103.                     value="点击停止"
  104.                     style="width:150px;height:150px;font-size:22px">
  107.             </body>
  108.             </html>

插件：增强JQuery的功能

  1.     1. 实现方式：<br />            1. $.fn.extend(object) <br />                * 增强通过Jquery获取的对象的功能  $("#id")<br />            2. $.extend(object)<br />                * 增强JQeury对象自身的功能  $/jQuery