本文共 2006 字，大约阅读时间需要 6 分钟。

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);  });});

以上内容优化后更符合技术写作风格，去除了不必要的外部链接和图片标签，适合搜索引擎优化，并保留了关键的技术细节。

转载地址：http://eqja.baihongyu.com/