C01-JavaScript快速入门(全)

最新推荐文章于 2024-08-07 16:11:40 发布

幼儿园的高财生

最新推荐文章于 2024-08-07 16:11:40 发布

阅读量694

点赞数 1

分类专栏：前端文章标签： javascript 前端

本文链接：https://blog.csdn.net/m0_58086930/article/details/127153699

版权

前端专栏收录该内容

10 篇文章 1 订阅

订阅专栏

如果你学习过C/C++等高级语言，上手会超级快的，因为比C简单多了！！！

建议：学过HTML，CSS后再学JS。==》当然HTML和CSS的学习也可以看我的主页，有相关的文章。尽力做到一站式学习。

创作不易，请不要吝啬点赞收藏哦。

10.3 数组静态方法Array.isArray()

10.4 数组的方法push()和pop()

10.5 数组方法shift()和unshift()

15.2 document对象_方法/获取元素

15.3 document对象_方法/创建元素

1.JavaScript简介

1.1 JavaScript介绍

1.2 为什么学习JavaScript

1.3 JavaScript与ECMAScript的关系

1.4 JavaScript版本

2.JavaScript语句、标识符

3.变量

4.JS引入到文件

5.JS注释与常见输出方式

6.数据类型

7.运算符

7.1 typeof运算符

一般用typeof判断基本数据类型的（number string boolean)

7.2 运算符之算术运算符

7.3 运算符之赋值运算符

7.4 运算符之比较运算符

7.5 运算符之布尔运算符

7.6 三元运算符

8.条件语句和循环语句

8.1 if条件语句

8.2 if...else条件语句

8.3 switch语句

8.4 for循环语句

8.5 while循环语句

8.6 break和continue语句

9.字符串

9.1 字符串概念和语法

9.2 字符串方法charAt()

9.3 字符串方法concat()

9.4 字符串方法substring()

9.5 字符串方法substr()

9.6 字符串方法indexOf()

9.7 字符串方法trim()

9.8 字符串方法split()

10.数组

10.1 概念

10.2 数组的遍历

10.3 数组静态方法Array.isArray()

10.4 数组的方法push()和pop()

10.5 数组方法shift()和unshift()

10.6 数组方法join()

10.7 数组方法concat()

10.8 数组方法reverse()

10.9 数组方法indexOf()

11.函数

12.对象

13.Math对象

14.Data对象

15.DOM详讲

15.1 DOM概述

15.2 document对象_方法/获取元素

15.3 document对象_方法/创建元素

只有添加属性才是setAttributeNode(),其他都是appendChild()。

15.4 Element对象_属性

15.5 Element获取元素位置

视口高度：屏幕高度

网页总高度：页面内容有多大，总高度就有多大，没有内容的不算页面高度。

页面总高度通常小于视口高度。

真正应用当中，clientHeight和scrollHeight几乎没有差别，因为很少将内容设置未不可见的。

16.CSS操作

17.事件处理程序

17.1 如何添加事件

事件处理程序分为:

HTML事件处理
DOM0级事件处理
DOM2级事件处理

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件的创建</title>
	</head>
	<body>
		
		<!-- 【1】HTML事件 -->
		<button type="button" onclick="clickHander()">HTML事件按钮1</button>
		<script>
			//html事件缺点：HTML和JS没有分开
			function clickHander(){
				console.log('点击了HTML事件按钮1')
			}
		</script>
		
		
		
		<!-- 【2】DOM0级事件处理 -->
		<button id='btn2'>DOM0级按钮2</button>
		<script>
			//DOM0级事件优点：HTML和JS是分离的。缺点：无法同时添加多个事件。
			var btn2=document.getElementById('btn2');
			btn2.onclick=function(){//此事件会被覆盖
				console.log('点击了DOM0级按钮2A');
			}
			btn2.onclick=function(){
				console.log('点击了DOM0级按钮2B');
			}
		</script>
		
		
		
		<button id='btn3'>DOM2级按钮3</button>
		<script>
			//DOM2级事件优点：不会被覆盖。缺点：写起来麻烦。
			var btn3=document.getElementById('btn3');
			btn3.addEventListener('click',function(){//此事件不会被覆盖
				console.log('点击了DOM2级按钮3A');
			})
			btn3.addEventListener('click',function(){
				console.log('点击了DOM2级按钮3B')
			})
		</script>
		
		
	</body>
</html>

17.2 事件类型之鼠标事件

测试代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件</title>
	</head>
	<body>
		
		<button id='btn1'>单击</button>
		<script>
			var btn1=document.getElementById('btn1')
			btn1.onclick=function(){
				console.log('单击事件')
			}
		</script>
		
		
		<button id='btn2'>双击</button>
		<script>
			var btn2=document.getElementById('btn2')
			btn2.ondblclick=function(){
				console.log('双击事件');
			}
		</script>
		
		
		<button id='btn3'>鼠标按下</button>
		<script>
			var btn3=document.getElementById('btn3')
			btn3.onmousedown=function(){
				console.log('鼠标按下事件');
			}
		</script>
		
		
		<button id='btn4'>鼠标抬起</button>
		<script>
			var btn4=document.getElementById('btn4')
			btn4.onmouseup=function(){
				console.log('鼠标抬起事件');
			}
		</script>
		
		
		<div id='btn5' class="box1" style="width: 100px;height: 100px;background-color: red;"></div>
		<script>
			var btn5=document.getElementById('btn5');
			btn5.onmousemove=function(){
				console.log('鼠标移动了');
			}
		</script>
		
		<div id='btn6' style="width: 100px;height: 100px;background-color: green;"></div>
		<script>
			var btn6=document.getElementById('btn6');
			btn6.onmouseenter=function(){
				console.log('鼠标进入了');
			}
		</script>
		
		
		<div id='btn7' style="width: 100px;height: 100px;background-color: yellow;"></div>
		<script>
			var btn7=document.getElementById('btn7');
			btn7.onmouseleave=function(){
				console.log('鼠标离开了');
			}
		</script>
		
		
		<div id='btn8' style="width: 100px;height: 100px;background-color: deepskyblue"></div>
		<script>
			var btn8=document.getElementById('btn8');
			btn8.onmouseover=function(){
				console.log('鼠标over');
			}
		</script>
		
		<div id='btn9' style="width: 100px;height: 100px;background-color: gray;"></div>
		<script>
			var btn9=document.getElementById('btn9');
			btn9.onmouseout=function(){
				console.log('鼠标out');
			}
		</script>
		
		
	</body>
</html>

mouseenter和mouseover的区别：

18.event事件对象

18.1 event对象属性和方法

事件冒泡：点击子元素时候，也会触发父元素。

18.2 事件类型之键盘事件

18.3 事件类型之表单事件

18.4 事件代理（事件委托）

19.定时器timer

19.1 定时器之setTimeout

19.2 定时器之setInterval

动画效果：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>动画：图片慢慢消失</title>
		<style>
			#someDiv{
				width: 100px;
				height: 100px;
				background-color: red;
			}
		</style>
		
	</head>
	<body>
		<div id='someDiv'></div>
		<script>
			var div=document.getElementById('someDiv');
			var opacity=1;//透明度
			var fader=setInterval(function(){
				opacity-=0.01;
				if(opacity>0){
					div.style.opacity=opacity;
				}else{
					clearInterval(fader);
				}
			},30);
		</script>
	</body>
</html>

20.防抖(debounce)

21.节流(throttle)

函数节流（throttle）：指定时间间隔内只会执行一次任务。

生活中的实例： 我们知道目前的一种说法是当 1 秒内连续播放 24 张以上的图片时，在人眼的视觉中就会形成一个连贯的动画，所以在电影的播放（以前是，现在不知道）中基本是以每秒 24 张的速度播放的，为什么不 100 张或更多是因为 24 张就可以满足人类视觉需求的时候，100 张就会显得很浪费资源。

规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。节流通俗解释就比如我们水龙头放水，阀门一打开，水哗哗的往下流，秉着勤俭节约的优良传统美德，我们要把水龙头关小点，最好是如我们心意按照一定规律在某个时间间隔内一滴一滴的往下滴。如下图，持续触发click事件时，并不立即执行handle函数，每隔1000毫秒才会执行一次handle函数。

节流和防抖之间的区别：

函数节流不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而函数防抖只是在最后一次事件后才触发一次函数。比如在页面的无限加载场景下，我们需要用户在滚动页面时，每隔一段时间发一次 Ajax 请求，而不是在用户停下滚动页面操作时才去请求数据。这样的场景，就适合用节流技术来实现。

函数防抖应用场景：

给按钮加函数防抖防止表单多次提交。
对于输入框连续输入进行AJAX验证时，用函数防抖能有效减少请求次数。
判断scroll是否滑到底部，滚动事件+函数防抖
总的来说，适合多次事件一次响应的情况。

函数节流应用场景：

游戏中的刷新率
DOM元素拖拽
Canvas画笔功能
总的来说，适合大量事件按时间做平均分配触发。