JQuery动画和遍历（四）_jquery遍历和特效动画课后题-优快云博客

本文链接：https://blog.youkuaiyun.com/u014736082/article/details/91358239

本文详细介绍了JQuery中的三种动画方式：默认显示隐藏、滑动和淡入淡出，以及JQuery提供的多种遍历方法，包括JS和JQ遍历方式、$.each和for...of语法，适用于JQuery初学者和进阶者。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JQuery动画

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

1.默认显示和隐藏方式

show([speed,[easing],[fn]]) 显示
hide([speed,[easing],[fn]]) 隐藏
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.滑动显示和隐藏方式

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（初始值；循环条件结束；步长）{}

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

二、jq遍历方式

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

});

$.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());
    }

});