JQuery高级29_动画&遍历1
一、动画
三种方式显示和隐藏元素
1、默认显示和隐藏方式
1. show([speed,[easing],[fn]])
参数：
1. speed：动画的速度。三个预定义的值("slow","normal", "fast")或表示动画时长的毫秒数值(如：1000)
2. easing：用来指定切换效果，默认是"swing"，可用参数"linear"
swing：动画执行时效果是 先慢，中间快，最后又慢
linear：动画执行时速度是匀速的
3. fn：在动画完成时执行的函数，每个元素执行一次。
2. hide([speed,[easing],[fn]])
3. toggle([speed],[easing],[fn]) 切换，点击显示，再点击隐藏
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]])
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script>
//隐藏div
function hideFn() {
$("#showDiv").hide("normal","swing",function () {
alert("隐藏了...");
});
$("#showDiv").hide("slow","swing");
//默认方式
$("#showDiv").hide(5000,"swing");//5秒隐藏
//滑动方式
$("#showDiv").slideUp("slow");
//淡入淡出方式
$("#showDiv").fadeOut("slow");
}
//显示div
function showFn() {
$("#showDiv").show("slow","swing",function () {
alert("显示了...");
});
//默认方式
$("#showDiv").show("normal","linear");
//滑动方式
$("#showDiv").slideDown("slow");
//淡入淡出方式
$("#showDiv").fadeIn("slow");
}
//切换显示隐藏div
function toggleFn() {
$("#showDiv").toggle("slow","swing",function () {
alert("切换了...");
});
//默认方式
$("#showDiv").toggle("fast");
//滑动方式
$("#showDiv").slideToggle("slow")
//淡入淡出方式
$("#showDiv").fadeToggle("slow");
}
</script>
</head>
<body>
<input type="button" value="点击按钮隐藏div" onclick="hideFn()">
<input type="button" value="点击按钮显示div" onclick="showFn()">
<input type="button" value="点击按钮切换div显示和隐藏" onclick="toggleFn()">
<div id="showDiv" style="width:300px;height:300px;background:pink">
div显示和隐藏
</div>
</body>
</html>
二、遍历
1、js的遍历方式
for(初始化值;循环结束条件;步长)
2、jq的遍历方式
1. jq对象.each(callback)
1. 语法：
jquery对象.each(function(index,element){});
index:就是元素在集合中的索引
element：就是集合中的每一个元素对象
this：集合中的每一个元素对象
2. 回调函数返回值：
true:如果当前function返回为false，则结束循环(break)。
false:如果当前function返回为true，则结束本次循环，继续下次循环(continue)
2. $.each(object, [callback])
3. for..of: jquery 3.0 版本之后提供的方式
for(元素对象 of 容器对象)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function () {
//1.获取所有的ul下的li
var citys = $("#city li");
//2.遍历
for (var i = 0; i < citys.length; i++) {
//获取内容
if("上海" == citys[i].innerHTML){
// break;//结束循环
continue;//结束本次循环，继续下次循环
}
alert(i+":"+citys[i].innerHTML);
}
//2. jq对象.each(callback)
citys.each(function (index, element) {
//3.1获取li对象 第一种方式 this
alert(this.innerHTML);
alert($(this).html());
//3.2获取li对象 第二种方式 在回调函数中定义参数 index(索引) element(元素对象)
alert(index+":"+element.innerHTML);
//判断如果是上海，则结束循环
if("上海" == $(element).html()){
//如果当前function返回为false，则结束循环（break）。
// //如果返回为true，则结束本次循环，继续下次循环(continue)
return true;
}
alert(index+":"+$(element).html());
});
//3.$.each(object,[callback])
$.each(citys,function () {
alert($(this).html());
});
//4. for ... of:jquery 3.0 版本之后提供的方式
for(city of citys){
alert($(city).html());
}
});
</script>
</head>
<body>
<ul id="city">
<li>北京</li>
<li>上海</li>
<li>天津</li>
<li>重庆</li>
</ul>
</body>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧