JQuery动画和遍历（四）

JQuery动画

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

1.默认显示和隐藏方式

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

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

3. toggle([speed,[easing],[fn]]) 显示和隐藏切换执行

   参数：speed 三种预定义速度（“slow"，”noirmal“,“last”）或者表示动画执行的时间

   ​ easing 用来指定切换效果，默认是swing (先慢、再快、再慢),可用参数linear（动画效果匀速）。

   ​ fn 动画执行结束后运行的函数，每个动画只执行一次。

   <script>
   	function showfn(){
           $("#showDiv").show("low","swing",function(){alert("被执行一次的函数，可以不写");});
       }
       
       	function hidefn(){
           $("#showDiv").hide(5000,"linear");
       }
   </script>

2.滑动显示和隐藏方式

1. slideDown([speed,[easing],[fn]]; 向下滑动

2. slideUp（[speed,[easing],[fn]]）； 向上滑动

3. slideToggle([speed,[easing],[fn]]); 切换

用法同默认一致

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

1. fadeIn([speed,[easing],[fn]]; 淡入
2. fadeOut（[speed,[easing],[fn]]）； 淡出
3. fadeToggle([speed,[easing],[fn]]); 切换

用法同默认一致

JQuery遍历

一、js遍历方式

for（初始值；循环条件结束；步长）{}

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

二、jq遍历方式

1. jq对象.each(callback)

$(function(){
	var citys = $("#city li");
	citys.each(function(){//只能获取值，没有索引
		alert(this.innerHTML);
	});
    citys.each(function(index,element){//在回调函数中定义参数  index(索引)  element(元素对象)
		alert(index+element.innerHTML);
        if("上海"== $(element).html()){
            如果当前function返回值为false,则结束循环（break）
            如果当前function返回值为true,则结束循环（continue）
        }
	});

});

2. $.each(object,[callback]) //object 可以是js数组对象

$(function(){
	var citys = $("#city li");
	$.each(citys,function(){
		alert(this.innerHTML);
        //参考jq对象.each()  方式回调方法写法
	});

});

3.for…of jquery 3.0版本之后才提供的。

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

});