JQuery 动画与遍历指南

21.1 JQuery 动画

21.1.1 默认显示和隐藏方式

显示元素

show([speed],[easing],[fn])
- 参数：
  - speed：动画速度，可选值为"slow"、"normal"、"fast"或具体时间值（如：1000）。
  - easing：指定切换效果，可选"swing"（动画执行时效果为先慢、中间快、最后又慢）或"linear"（匀速执行）。
  - fn：动画完成时执行的函数，每个元素执行一次。

隐藏元素

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

切换显示隐藏状态

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

21.1.2 滑动显示和隐藏方式

滑动显示

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

滑动隐藏

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

滑动切换

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

21.1.3 淡入淡出显示和隐藏方式

淡入显示

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

淡出隐藏

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

淡入切换

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

21.1.4 示例


   
        div显示和隐藏

21.2 JQuery 遍历

21.2.1 JavaScript 迭代

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

21.2.2 JQuery 迭代

方法一：`jq对象.each(callback)`

语法：
```
jquery对象.each(function(index, element) {    // 回调函数执行});
```
- 参数：
  - index：元素在集合中的索引。
  - element：集合中的每一个元素对象。
  - this：集合中的每一个元素对象。

返回值：
- true：若回调函数返回 false，则结束循环。
- false：若回调函数返回 true，则结束本次循环，继续下次循环。

方法二：`$.each(object, [callback])`

$.each(citys, function() {    // 回调函数执行});

方法三：`for..of`（从 jQuery 3.0 开始支持）

for (li of citys) {    // 回调函数执行}

21.2.3 示例

$(function () {    var citys = $("#city li");        // 示例一：for 循环    // for (var i = 0; i < citys.length; i++) {    //     if ("上海" == citys[i].innerHTML) {    //         break;    //     }    //     alert(i + ":" + citys[i].innerHTML);    // }    // 示例二：jq对象.each    citys.each(function (index, element) {        alert(index + ":" + $(element).html());        if ("上海" == $(element).html()) {            break;        }    });    // 示例三：$.each    $.each(citys, function () {        alert($(this).html());    });    // 示例四：for..of    for (li of citys) {        alert($(li).html());    }});