JQuery 高级

一、JQuery 动画

（一）、三种方式显示和隐藏元素

1、默认显示和隐藏方式

show([speed,[easing],[fn]])
- 参数：
  ① speed：动画的速度，支持预定义值“slow”、“normal”、“fast”或时间毫秒数值。
  ② easing：指定切换效果，默认为“swing”，可选“linear”。
  ③ fn：动画完成时执行的函数，每个元素执行一次。

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

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

2、滑动显示和隐藏方式

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

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

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

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

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

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

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

二、JQuery 遍历

（一）、js 的遍历方式

for 循环：

for(初始化值;循环结束条件;步长) {
  // 代码
}

（二）、JQuery 的遍历方式

方法一：each()

var citys = $("#city li");
citys.each(function() {
  alert(this.innerHTML);
});

方法二：each() 索引版本

citys.each(function(index, element) {
  alert(index + ":" + $(element).html());
});

方法三：for...of（JQuery 3.0 及以上）
```
for(li of citys) {
  alert($(li).html());
}
```

（三）、事件绑定

方法一：事件方法

$("#name").click(function() {
  alert("我被点击了...");
});

方法二：链式编程

$("#name").mouseover(function() {
  alert("鼠标来了...");
}).mouseout(function() {
  alert("鼠标走了...");
});

方法三：on() 和 off()

$("#btn").on("click", function() {
  alert("我被点击了...");
});
$("#btn2").click(function() {
  $("#btn").off();
});

（四）、事件切换：toggle

方法一：多次回调

$("#btn").toggle(function() {
  alert("第一点击...");
}, function() {
  alert("第二点击...");
});

注意：9.0 及以上版本 toggle() 方法已移除，需使用 jQuery Migrate 插件恢复。

三、案例

1. 广告显示和隐藏

需求：
- 页面加载后，3秒后自动显示广告。
- 广告显示5秒后自动隐藏。

实现：

$(function() {
  setTimeout(adShow, 3000);
  setTimeout(adHide, 8000);
});
function adShow() {
  $("#ad").show("slow");
}
function adHide() {
  $("#ad").hide("slow");
}

2. 抽奖

需求：
- 开始按钮点击后，定时随机切换小相框和大相框中的图片。
- 停止按钮点击后，停止定时器并显示大相框图片。

实现：

$(function() {
  var imgs = ["../img/man00.jpg", ..., "../img/man06.jpg"];
  var startId;
  var index;
  $("#startID").click(function() {
    startId = setInterval(() => {
      index = Math.floor(Math.random() * 7);
      $("#img1ID").prop("src", imgs[index]);
    }, 20);
  });
  $("#stopID").click(function() {
    clearInterval(startId);
    $("#img2ID").prop("src", imgs[index]).show(1000);
  });
});