JQuery(四)：动画和遍历

一、JQuery动画（显示和隐藏的三种方式）

1、默认显示和隐藏方式

function hideFn(){
    //1、hide([speed,[easing],[fn]])：隐藏显示的元素
     $("#showDiv").hide("slow","swing",function(){
         alert("隐藏了...")
     });
}

function showFn(){
    //2、show([speed,[easing],[fn]]):显示隐藏的元素
    $("#showDiv").show("slow","swing",function(){
        alert("显示了...")
    });
}

function toggleFn(){
    //3、toggle([speed],[easing],[fn])：切换显示或隐藏元素
    $("#showDiv").toggle("slow","",function () {
        if("none" == ($("#showDiv").css("display"))) {
            alert("div隐藏了……");
        } else {
            alert("div显示了……");
        }
    });
}

2、滑动显示和隐藏方式

function hideFn(){
    //slideUp([speed,[easing],[fn]])：向上滑动隐藏显示的元素
     $("#showDiv").slideUp("slow","swing",function(){
         alert("隐藏了...")
     });
}

function showFn(){
    //slideDown([speed,[easing],[fn]]):向下滑动显示隐藏的元素
    $("#showDiv").slideDown("slow","swing",function(){
        alert("显示了...")
    });
}

function toggleFn(){
    //slideToggle([speed],[easing],[fn])：切换向下滑动显示或向上滑动隐藏元素
    $("#showDiv").slideToggle("slow","",function () {
        if("none" == ($("#showDiv").css("display"))) {
            alert("div隐藏了……");
        } else {
            alert("div显示了……");
        }
    });
}

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

function hideFn(){
    //fadeOut([speed,[easing],[fn]])：渐渐隐藏显示的元素
     $("#showDiv").fadeOut("slow","swing",function(){
         alert("隐藏了...")
     });
}

function showFn(){
    //fadeIn([speed,[easing],[fn]]):渐渐显示隐藏的元素
    $("#showDiv").fadeIn("slow","swing",function(){
        alert("显示了...")
    });
}

function toggleFn(){
    //fadeToggle([speed],[easing],[fn])：切换渐渐显示或渐渐隐藏元素
    $("#showDiv").fadeToggle("slow","",function () {
        if("none" == ($("#showDiv").css("display"))) {
            alert("div隐藏了……");
        } else {
            alert("div显示了……");
        }
    });
}

二、JQuery遍历

1、js的遍历方式:for(初始化值;循环结束条件;步长)

var citys = $("#city li");
for(var i = 0; i < citys.length; i++) {
    alert(i + ":" + citys[i].innerHTML);
}

2、jq对象.each(callback):以每一个匹配的元素作为上下文来执行一个函数。

var citys = $("#city li");
citys.each(function (index,element) {
    //alert(index + ":" + element.innerHTML);
    alert(index + ":" + $(element).html());
});

3、jQuery.each(object, [callback]):通用例遍方法，可用于例遍对象和数组。

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

4、for ... of:jquery 3.0 版本之后提供的方式

var citys = $("#city li");
for(li of citys){
    alert($(li).html());
}