Jquery动画和遍历

最新推荐文章于 2025-06-27 10:44:03 发布

原创最新推荐文章于 2025-06-27 10:44:03 发布 · 171 阅读

0 ·

CC 4.0 BY-SA版权

Jquery 专栏收录该内容

5 篇文章

订阅专栏

Jquery动画和遍历(调用方式:jq对象.function())

Jquery动画

1.折叠隐藏显示(纵轴)
2.滑动隐藏显示(纵轴)
3.淡入淡出隐藏显示
    ：其实就是使用不同的方式调整标签的属性style_display：none
    隐藏后html上不再显示，也就无法点击了，位置也让出了
    但是实际上该标签代码还是存在的

通用参数：

speed:slow,normal,fast,毫秒值
easing:默认swing,可用匀速 linear
fn:(finish)方法调用后执行什么方法

注意：

toggle就是toggle,
不是 显示时调用自定义的显示函数，
     隐藏时调用自定义的隐藏函数

1.折叠隐藏显示(纵轴)

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

举例：后两种同理使用

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src = "JS/jquery-3.3.1.min.js"></script>
<script src = "JS/jquery-migrate-1.1.0.js"></script>
</head>
<body>
<input type = "text" value = "输入入口码" id = "InWords">
<input type = "button" value = "解绑" id = "OFF">
<input type = "button" value = "单击切换" id = "TOGGLE">
<input type = "button" value = "2秒隐藏3秒出现" id = "Trick">
</body>
<script type="text/javascript">

//1.jq对象.事件方法(回调函数)
$("#InWords").mouseover(function () {
	alert("hello");
});


//2.jq对象.on("事件名称",回调函数) 绑定
$("#InWords").on("mouseout",function () {
	alert("byte");
});

//2.jq对象.off("事件名称",回调函数)解绑定 
$("#OFF").on("click",function(){
	$("#InWords").off();
})


$("#TOGGLE").toggle(function(){
	$("#InWords").off();
},function(){
	$("#InWords").mouseover(function () {
		alert("hello");
	});
	$("#InWords").on("mouseout",function () {
		alert("byte");
	});
})

$("#Trick").click(function(){
	setTimeout(() => {
		$("#InWords").hide("slow");
	}, 2000);
	setTimeout(() => {
		$("#InWords").show("slow");
	}, 5000);
})

</script>
</html>

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])

jq遍历：

1.jq对象.each(callback)
2.$.each(jq对象,[callback])

注意：

1.this.innerHTML <--> $(this).html()等价
2.在each循环体中，使用if判断，
    return true --> continue;
    return false --> break;
3.在callback中可传入参数,可获取索引,内容
    element.innerHTML <--> this.innerHTML

举例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src = "JS/jquery-3.3.1.min.js"></script>
</head>
<body>

<ul id = "hobby">
<li>唱</li>
<li>跳</li>
<li>Rap</li>
</ul>


</body>
<script type="text/javascript">

$(function () {
	
	//1.jq对象.each方式 
	//$("#hobby li").each(function () {
		//1.alert(this.innerHTML);
		//2.alert($(this).html());
		
	//});
	
	
	//$("#hobby li").each(function (index) {
		//alert(index+":"+$(this).html());
		
	//});
	
	//$("#hobby li").each(function (index,element) {
		//1.alert(this.innerHTML);
		//if("跳" == $(element).html()){
			//return false;
		//}
		//alert(index+":"+$(element).html());
		
	//});
	
	

	
	$.each($("#hobby li"),function (index,element) {
		if("跳" == $(element).html()){
			return true;
		}
		alert(index+":"+$(element).html());
		
	});
})

</script>
</html>