Get and add event
$("#id").click(function(){ });

Get and set content
$("#id").innerHTML = ""; // error
$("#id").html("");

Get the html element
$("#id")
parameter is the selector

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<script type="text/javascript" src="js/jQuery/jQuery%20Core%203.3.1-uncompressed.js"></script>
		
		<style type="text/css">
			#ad{
				width: 300px;
				height: 300px;
				background-color: antiquewhite;
				position: fixed;
				bottom: 0;
				right: 0;
				display:none;
			}
		</style>
		<script type="text/javascript">
			setTimeout(function(){
				$("#ad").show();
			},3000);
			
			// setTimeout(function(){
			// 	$("#ad").hide();
			// },5000)
			
			$(function(){
				$("#closeBtn").click(function(){
					$("#ad").hide();
				});
			});
		</script>
	</head>
	<body>
		<div id="ad">
			<button id="closeBtn">关闭</button>
		</div>
	</body>
</html>

Action: 2: Success: 202 - Animate about show and hide functions

1. Running result: success:

Show and hide (belongs to the basic in effect)
show() //equivalent to
the first parameter of display:block slow fast milliseconds (speed)
The second parameter is the callback function
hide()
The first parameter is the speed
second The parameter is the callback function
Toggle
. If it is displayed, it will be hidden
. If it is hidden, it will be displayed.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

		<script type="text/javascript" src="js/jQuery/jQuery%20Core%203.3.1-uncompressed.js"></script>

		<style type="text/css">
			#ad {
				width: 300px;
				height: 300px;
				background-color: antiquewhite;
				position: fixed;
				bottom: 0;
				right: 0;
				display: none;
			}
		</style>
		<script type="text/javascript">
			// setTimeout(function() {
			// 	//1.show：参数：slow、fast、1000
			// 	//出现：快速
			// 	// $("#ad").show();

			// 	//2.出现：慢慢的
			// 	// $("#ad").show("slow");

			// 	//3.出现：持续一段可以控制的时间
			// 	// $("#ad").show(2000);

			// 	//4.动画播放完毕执行回调函数
			// 	$("#ad").show(2000, function() {
			// 		console.log("show动画执行完毕！");
			// 	});

			// }, 1000);

			// // 5.
			// setTimeout(function() {
			// 	//hide:隐藏
			// 	$("#ad").hide(2000, function() {
			// 		console.log("动画隐藏了");
			// 	});
			// }, 5000);

			// 6.出现广告
			setTimeout(function() {
				// $("#ad").toggle();
				$("#ad").toggle("slow");
			}, 1000);

			//点击关闭按钮隐藏广告：通过toggle
			$(function() {
				$("#closeBtn").click(function() {
					// $("#ad").toggle();
					$("#ad").toggle("slow");
				});
			});

			// setTimeout(function(){
			// 	$("#ad").hide();
			// },5000)

			// $(function() {
			// 	$("#closeBtn").click(function() {
			// 		$("#ad").hide();
			// 	});
			// });
		</script>
	</head>
	<body>
		<div id="ad">
			<button id="closeBtn">关闭</button>
		</div>
	</body>
</html>

Action: 3: Success: 203 - Slide and fade animation effects

1. Running result: success:

Reference URL

Show and hide (belongs to the basic in effect)
show() //equivalent to
the first parameter of display:block slow fast milliseconds (speed)
The second parameter is the callback function
hide()
The first parameter is the speed
second The parameter is the callback function
Toggle
. If it is displayed, it will be hidden
. If it is hidden, it will be displayed.
Slide show and hide
slideDown and
slideUp
parameters are the same as above.
Other display and hide effects
fadeIn
fadeOut

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

		<script type="text/javascript" src="js/jQuery/jQuery%20Core%203.3.1-uncompressed.js"></script>

		<style type="text/css">
			#ad {
				width: 300px;
				height: 300px;
				background-color: antiquewhite;
				position: fixed;
				bottom: 0;
				right: 0;
				display: none;
			}
		</style>
		<script type="text/javascript">
			// 显示广告：几种方式
			setTimeout(function() {
				// $("#ad").slideDown();
				// $("#ad").slideDown(2000);
				// $("#ad").slideToggle(2000);
				$("#ad").fadeIn(1000);
				// $("#ad").fadeToggle(1000);
				$("#ad").fadeTo(1000, 0.5); //1完全透明
			}, 1000);

			//点击关闭按钮隐藏广告：几种方式
			$(function() {
				$("#closeBtn").click(function() {
					// $("#ad").slideUp();
					// $("#ad").slideUp(2000);
					// $("#ad").slideToggle(2000);
					$("#ad").fadeOut(1000);
					// $("#ad").fadeToggle(1000);
					// $("#ad").fadeTo(1000,0);//0完全不透明
				});
			});
		</script>
	</head>
	<body>
		<div id="ad">
			<button id="closeBtn">关闭</button>
		</div>
	</body>
</html>

Web front-end fourth season (jQuery): 3: 201-jQuery realizes advertising pop-up window +202-Animation settings about show and hide functions +203-Animation effects of sliding and fading and fading

First, the purpose

1. Think: learn front-end knowledge

2. Thinking: Take notes, next time you don't need to watch the video, just look at the notes to quickly recall.

2. Reference

1. GitHub URL of my own code

2. SIKI Academy: I refer to this video for practice

3.w3school official website: use it as a dictionary

4. Rookie Tutorial: Use as a Dictionary

5. Web Front End Season 1 (HTML): My own note-taking blog

6. Web Front End Season 2 (CSS): My own note blog

7. Web Front End Season 3 (JavaScript): My own note-taking blog

3. Attention

Operation: 1: Success: 201-jQuery implements advertisement pop-up window

1. Running result: success:

Action: 2: Success: 202 - Animate about show and hide functions

1. Running result: success:

Action: 3: Success: 203 - Slide and fade animation effects

1. Running result: success:

Guess you like