• 动画
• 循环
• 事件绑定
• 插件机制

一、 动画

1.1 三种方式显示和隐藏元素

1 . 默认显示，向左上角收缩

1. show([speed,[easing],[fn]])

2. hide([speed,[easing],[fn]])

3. toggle([speed],[easing],[fn])

   1 2 3 4 5 6 7 8 9 10 11 12 13 14

   <script> //隐藏div function hideFn() { $(\"#showDiv\").hide(\"slow\",\"swing\"); } //显示div function showFn() { $(\"#showDiv\").show(\"slow\",\"linear\"); } //切换显示和隐藏div function toggleFn() { $(\"#showDiv\").toggle(\"slow\"); } </script>

   2. 滑动显示和隐藏方式 上下滑动

4. slideDown([speed],[easing],[fn])

5. slideUp([speed,[easing],[fn]])

6. slideToggle([speed],[easing],[fn])

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<script>
    //隐藏div
    function hideFn() {
        $(\"#showDiv\").slideUp(\"slow\");
    }
    //显示div
    function showFn() {
      $(\"#showDiv\").slideDown(\"slow\");
    }
    //切换显示和隐藏div
    function toggleFn() {
        $(\"#showDiv\").slideToggle(\"slow\");
    }
</script>

3. 淡入淡出显示和隐藏方式

1. fadeIn([speed],[easing],[fn])

2. fadeOut([speed],[easing],[fn])

3. fadeToggle([speed,[easing],[fn]])

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<script>
    //隐藏div
    function hideFn() {
        $(\"#showDiv\").fadeOut(\"slow\");
    }
    //显示div
    function showFn() {
      $(\"#showDiv\").fadeIn(\"slow\");
    }
    //切换显示和隐藏div
    function toggleFn() {
        $(\"#showDiv\").fadeToggle(\"slow\");
    }
</script>

4. 参数

• speed

  ：动画的速度。三个预定义的值(“slow”,”normal”, “fast”)或表示动画时长的毫秒数值(如：1000)

• easing

  ：用来指定切换效果，默认是”swing”，可用参数”linear”

  swing

  ：动画执行时效果是 先慢，中间快，最后又慢

• linear

  ：动画执行时速度是匀速的

fn

二、 遍历

2.1 js的遍历方式

• for(初始化值;循环结束条件;步长)

  1 2 3 4 5 6 7 8 9 10

  <script type=\"text/javascript\"> for (var i = 0; i < citys.length; i++) { //获取内容 if (\"上海\" == citys[i].innerHTML) { // break;//结束循环 continue;//跳过本次循环 }; alert(i + \":\" + citys[i].innerHTML); }; </script>

2.1 jq的遍历方式

1.

jq对象.each(callback)

• 语法： query对象.each(function(index,element){});index:就是元素在集合中的索引
• element：就是集合中的每一个元素对象 为js对象不能直接使用jq方法
• this：集合中的每一个元素对象

1
2
3
4
5
6
7
8

<script type=\"text/javascript\">
       $(function () {
           var citys = $(\"#city li\");
          for (li of citys){
              alert($(li).html());
          }
       });
   </script>

2.2 事件绑定

1. jquery标准的绑定方式

• jq对象.事件方法(回调函数)；

  注：如果调用事件方法，不传递回调函数，则会触发浏览器默认行为。
  $(“#name”).focus();//让文本输入框获得焦点

  可以链式编程

  1 2 3 4 5 6 7 8 9 10 11 12 13

  //2.给name绑定鼠标移动到元素之上的事件，在绑定一个鼠标移出事件 $(\"#name\").mouseover(function () { alert(\"鼠标来了\"); }); $(\"#name\").mouseout(function () { alert(\"鼠标走了\"); }); //简化操作，链式编程 $(\"#name\").mouseover(function () { alert(\"鼠标来了\"); }).mouseout(function () { alert(\"鼠标走了\"); });

• 表单对象.submit();

  让表单提交 传入function对象 进行阻塞校验

  2. on绑定事件/off解除绑定

• jq对象.on(\"事件名称\",回调函数)

• jq对象.off(\"事件名称\")

  如果off方法不传递任何参数，则将组件上的所有事件全部解绑

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<script type=\"text/javascript\">
    $(function () {
        //1.使用on给按钮绑定单机事件 click
        $(\"#btn\").on(\"click\", function () {
            alert(\"我被点击了\");
        });

        //2.使用off解除btn按钮的单机事件
        $(\"#btn2\").click(function () {
            //解除btn按钮的单机事件
            $(\"#btn\").off(\"click\");
        });
    });
</script>

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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<script src=\"./js/jquery-3.3.1.min.js\" type=\"text/javascript\" charset=\"utf-8\"></script>
  <script src=\"./js/jquery-migrate-1.0.0.js\" type=\"text/javascript\" charset=\"utf-8\"></script>

  <script type=\"text/javascript\">
      $(function () {
         //获取按钮，调用toggle方法
         $(\"#btn\").toggle(function () {
             //改变div背景色backgroundColor 颜色为 green
             $(\"#myDiv\").css(\"backgroundColor\",\"green\");
         },function () {
             //改变div背景色backgroundColor 颜色为 pink
             $(\"#myDiv\").css(\"backgroundColor\",\"pink\");
         });
      });

  </script>

4. 案例

4.1 广告显示和隐藏

• 需求：

  当页面加载完，3秒后。自动显示广告
  1. 广告显示五秒后自动关闭

• 分析：

  使用定时器来完成。

  setTimeout(执行一次定时器)

  1. 经过分析发现，JQuery显示隐藏动画效果其实就是控制display
  2. 使用 show/hide方法来完成广告的显示

• 代码实现：

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52

  <!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> //入口函数，在页面加载完成之后，定义定时器，调用这两个方法 $(function () { //调用定时器，调用addShow方法 三秒后执行一次 setTimeout(addShow, 3000); //再调用一个定时器，调用addHide方法，8秒后执行一次 setTimeout(addHide,8000); }); //显示广告 function addShow() { //获取广告div，调用显示方法 $(\"#ad\").show(\"slow\"); } //隐藏广告 function addHide() { //获取广告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>

4.2 抽奖

• 需求：点击开始按钮后 左边div开始随机换图 开始按钮置灰 点击结束后左边div图片锁定 并显示到右边大图 开始按钮恢复。
• 分析：
  给开始按钮绑定单击事件。定义循环定时器。
  1. 切换小相框的src属性。
     定义数组，存放图片资源路径。
     生成随机数，数组索引。

$.extend(object)

1
2
3
4
5
6
7
8

$.extend({
    方法名:回调函数,
   	方法名2:回调函数2 
});
//调用
$.方法名;
//或者
JQ对象.方法名

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

<!DOCTYPE html>
<html>
<head>
    <meta charset=\"UTF-8\">
    <title>01-jQuery对象进行方法扩展</title>
    <script src=\"../js/jquery-3.3.1.min.js\" type=\"text/javascript\" charset=\"utf-8\"></script>
    <script type=\"text/javascript\">
        //使用JQuery插件 给JQ对象添加2个方法 check()选中所有复选框，uncheck() 取消选中所有复选框

        //1.定义JQuery对象插件
        $.fn.extend({
            //定义了一个check()方法。所有的JQ对象都可以调用该方法
            check: function () {
                //让复选框选中
                //this：调用该方法的jq对象
                this.prop(\"checked\", true);
            },
            uncheck: function () {
                //让复选框不选中
                this.prop(\"checked\", false);
            }
        });

        $(function () {
            //获取按钮 调用check方法
            $(\"#btn-check\").click(function () {
                //获取复选框对象
                $(\"input[type=\'checkbox\']\").check();
            });
            $(\"#btn-uncheck\").click(function () {
                //获取复选框对象
                $(\"input[type=\'checkbox\']\").uncheck();
            });

        });
    </script>
</head>
<body>
<input id=\"btn-check\" type=\"button\" value=\"点击选中复选框\">
<input id=\"btn-uncheck\" type=\"button\" value=\"点击取消复选框选中\">
<br/>
<input type=\"checkbox\" value=\"football\">足球
<input type=\"checkbox\" value=\"basketball\">篮球
<input type=\"checkbox\" value=\"volleyball\">排球

</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<script type=\"text/javascript\">
    //对全局方法扩展2个方法，扩展min方法：求2个值的最小值；扩展max方法：求2个值最大值
    $.extend({
        max: function (a, b) {
            return a >= b ? a : b;
        },
        min: function (a, b) {
            return a <= b ? a : b;
        }
    });

    //调用全局方法
    var max = $.max(2,3);
    alert(max);
</script>