jQuery

我们先来简单的认识一下jQuery：
jQuery是一个快速的、简洁的JavaScript框架。jQuery设计的宗旨是：“write Less，Do More”写更少的代码，做更多的事情。
目前jQuery的最新版本是3.4.1版本
1.0系列版本兼容IE8以下
2.0系列版本之后只能兼容到IE8以上

官网：https://jquery.com/
中文网：http://jquery.cuishifeng.cn/

jQuery的特效函数

hover （functionOver， functionOut）

$(function(){ 
	$(#div1).hover(function(){ 
		$(this).css("backgroundColor","red"); // 鼠标移入显示红色 
	}, function(){ 
		$(this).css("backgroundColor","blue"); // 鼠标移出显示蓝色 }) 
	})

show() 显示
hide() 隐藏

$(function(){ 
	$("#div1").hover(function(){ 
		$("#div2").hide(); // 鼠标移入隐藏div2 
	},function(){ 
		$("#div2").show(); // 鼠标移出显示div2 
	}) 
})

两个参数：
第一个参数：动画持续的毫秒数
第二个参数：回调函数，动画结束的时候执行
【注】动画是从左上角收起和展开的

$(function(){ 
    $("#div1").hover(function(){ 
        $("#div2").hide(2000, function(){ 
             $("#div1").html("移入完成"); 
        }); // 鼠标移入收起 
    },function(){ 
        $("#div2").show(2000, function(){ 
             $("#div1").html("移出完成"); 
        }); // 鼠标移出展开 
    }) 
})

透明度的淡入淡出效果

fadeIn() 淡入
fadeOut() 淡出
fadeTo() （动画持续事件，透明度0~1，回调函数）
第一个参数：毫秒数，动画持续的时候
第二个参数：透明度的数值 只能传入0~1的小数
第三个参数：回调函数，动画结束的时候执行的

$("#div2").fadeOut(2000, function(){ 
	$("#div1").html("移入完成"); 
}) 
$("#div2").fadeIn(2000, function(){ 
	$("#div1").html("移出完成"); 
})

$("#div2").fadeTo(2000, 0.5, function(){ 
	$("#div1").html("移入完成"); 
})
$("#div2").fadeTo(2000, 1, function(){ 
	$("#div1").html("移出完成"); 
})

卷闸效果

slideDown() 卷帘向下
slideUp() 卷帘向上

$("#div2").slideUp(2000, function(){
	$("#div1").html("移入完成"); 
})$("#div2").slideDown(2000, function(){ 
	$("#div1").html("移出完成"); 
})

animate 动画

第一个参数：变化的css样式和目的值
第二个参数：动画持续的时间
第三个参数：运动形态 支持两种运动形态
匀速(linear) 慢块慢（默认）(swing)
第四个参数：回调函数。
【注】在JQ中实现链式运动，只需要在animate方法后面通过链式操作再跟animate方法
就行了。
【注】每次调用animate的方法之前，将上一次动画stop(true)一下

$(function(){ 
	$("#div1").hover(function(){ 
		$("#div2").animate({ 
			width: 300, 
			height: "300px", 
			opacity: 0.5 
		}, 4000, function(){
			 $("#div1").html("移入完成"); 
			 }) 
		}, function(){ 
			$("#div2").animate({ 
				width: 200, 
				height: "200px", 
				opacity: 1 
			}, 4000, function(){ 
				$("#div1").html("移出完成"); 
			}) 
		})
	$("#div1").click(function(){ 
		$("#div1").animate({ 
			width: 400, 
			height: 400 
		}, 4000, "linear");
		$("#div2").animate({ 
			width: 400, 
			height: 400 
		}, 4000, "swing") 
	})
	//链式运动 
	$("#div1").hover(function(){ 
	//每次启动定时器之前，先将上一次动画 关闭掉 
	//【注】每次调用animate的方法之前， 将上一次动画stop(true)一下 	
		$("#div2").stop(true).animate({width: 400}, 2000)
 		.animate({height: 400}, 2000)
	}, function(){
 		$("#div2").stop(true).animate({height: 200}, 2000)
 		.animate({width: 200}, 2000)
 
})

remove
功能：删除节点
返回值：就是被删除的这个节点,并不会保留之前的行为
detach
功能：删除节点
返回值：就是被删除的这个节点，会保留之前的行为

$(function(){ 
	$("#div1").hover(function(){
		 $(this).css("backgroundColor", 'black') 
	}, function(){
		 $(this).css("backgroundColor", 'red'); 
	})
	$("#btn1").click(function(){ 
		var node = $("#div1").remove(); 
		// var node = $("#div1").detach(); 
		node.appendTo($("#div2")); 
	}) 
})

逆战班加油！
学习视频连接：
https://www.bilibili.com/video/av77746919?from=search&seid=747831152233087480
最详细的jQuery的学习视频