前言

嗨，老伙计们，你们好吗？我是lucky赵赵，请大家多多指教呀！

菜鸟赵赵重走前端之路，今天学JS（基础）！

不喜勿喷，不喜勿喷，接受任何善意的指教 ^ _ ^

JS（基础）

（一）学前唠叨

本人对于js的感受就是，多敲多练。敲多了就熟了，熟了就能生巧了，那自然也就能融会贯通了。。。。。。

好了，不废话了，进入正题

（二）介绍

所以JS是什么？

遇到事情不要慌，我们先百度一下？（我做证，本人绝对没收百度广告费哦）

百度回答：

那我来抱个大腿，拆开解释一下喽！不好意思，到底是因为国庆假期要来了，今天有点儿激动，废话有些多，多担待，我这就闭嘴。

1.定义

js是基于对象和事件的编程语言

2.特点

①交互

②解释性编程语言

3.组成部分

ECMAScript 语法标准，属于核心部分

BOM 浏览器对象模型

DOM 文档对象模型

（三）js放置的位置及注意要点

1.放在行内

<button onclick="alert('行内js')">
	点我弹出行内js
</button>

注意：尽量少用，违背结构行为相分离原则，不利于维护而我的建议是，最好不要这样写。当然，你开心最重要啦！

2.放在body内

HTML：
    <button id="btn2">
    	放在body内的js
    </button>
    
js:
		<script type="text/javascript">
			// ①获取节点并检测
			var btn2 = document.getElementById("btn2");
			console.log(btn2);

			// ②给节点加事件
			btn2.onclick = function(){
				alert("放在body内的js");
			}
		</script>

注意：保证js放在要操作的节点后面，一般js会放在body的最后一行

3. js放在head

HTML：
		<button id="btn3">
			js放在head
		</button>
js:
	<head>
		<title>js放置的位置</title>
		<meta charset="utf-8">
		<script type="text/javascript">
			window.onload = function(){
				// ①获取节点并检测
				var btn3 = document.getElementById("btn3");
				console.log(btn3);
				// ②给节点加事件
				btn3.onclick = function(){
					alert("js放在head");
				}
			}// 加载函数
		</script>
	</head>

注意：要获取节点必须先写加载函数

4.外部js文件，用script标签引入

HTML：
	
	<button id="btn4">
			外部js
	</button>
	<!-- 4.引入外部js文件 -->
	<script type="text/javascript" src="js/1.js"></script>

外部js文件 
    // ①获取节点并检测
    var btn4 = document.getElementById("btn4");
    console.log(btn4);

    // ②给节点加事件
    btn4.onclick = function(){
        alert("外部js");
    }

注意：外部js 可以放在body内，也可以放在head内，注意放在body内，保证js放在要操作的节点后面，一般js会放在body的最后一行，放在head 要获取节点必须先写加载函数

（四）变量

1.定义

存放信息的容器

2.声明赋值

①先声明后赋值

②同时声明和赋值

// 先声明后赋值
var a;
a = 10;
console.log(a);//10

// 同时声明赋值
var b = "women";
console.log(b);//"women"

3.变量名取名规范

①由数字，字母，$，_ 组成

②不能以数字开头，不能用关键字和保留字

③注意大小写

4.作用域

1⃣️全局变量

生命周期：生命周期是从打开页面都是一直存在的，直到页面被关闭才会被销毁。

声明在函数外，哪里都可以用，作用域是全局性的，即在整个JavaScript程序中

2⃣️局部变量

生命周期：函数执行完毕时且没有形成闭包一直被存储在内存中的情况下，会被销毁。

声明在函数内，只能在这个函数内使用，只在函数内部起作用，作用域是局部性的

作用域取决于变量声明的位置

作用域链:采取就近原则的方式来查找变量最终的值

（五）数据类型

1.分类

值类型，原始类型和引用类型

2.值类型（5种）

1⃣️undefined

没有值，它是变量的初始值/默认值

2⃣️null

空 (对象)

3⃣️boolean

布尔值
有true（真）和 false（假）两种值，一般会和选择结构搭配使用

4⃣️number

数字
有整数和浮点数（小数）两种 NaN是特殊的数字类型

5⃣️string

字符串用引号（‘单’ ‘’双‘’）引起来的文本

3.引用类型

1⃣️对象

是有属性和方法的特殊数据类型

2⃣️函数

4.instanceof检测对象方法

语法：要检测的对象 instanceof 需要检测的对象类型(目前有实例对象、数组对象)

如果 object 是 class 的一个实例，则 instanceof 运算符返回 true。如果 object 不是指定类的一个实例，或者 object 是 null，则返回 false。

//apple是一个对象，instanceof后面的书对象的类型
console.log(apple instanceof food);  // apple 是food的一个实例对象，所以返回 true
console.log(apple instanceof Object); // apple 是一个实例对象，所以返回 true
console.log(apple instanceof Array); // apple 不是一个数组对象，所以返回 false

5.typeof()检测数据类型

typeof()检测出来的数据类型有6种
分别是undefined 、object(对象) 、boolean（布尔）、number（数字）、string（字符串）、function（函数）

let obj = {id: 1005}
console.log(typeof(obj));
结果:object

（六）数据类型转换

只转为三种类型，即数字，字符串，布尔

以下是一些可用的转换方法

1.转换函数

1⃣️parseInt() 取整

只有括号内是数字类型，或者字符串类型的数字，才会取整，即返回整数部分。

其余数据类型返回NaN

2⃣️parseFloat() 取浮点数

括号内是数字类型，返回（）里的内容，

是以数字开头的字符串，返回数字包括整数部分和浮点数

数字字符串里有多个点，只有第一个点是小数点。（把第二个小数点后的内容当作了字符串）

其余数据类型返回NaN

2.强制类型转换

1⃣️ Boolean() 转换为布尔值

undefined、null、数字0、NaN、false、空字符串返回false，其余返回true

Boolean（‘ ’）；返回false

此时单引号里面为0

Boolean（‘ ’）；返回true

有空格，不是0

2⃣️Number() 转换为数字

①返回0： null 、false、空字符串、空格字符串

问题：空字符串和空格字符串的区别）?

②返回1： true

③返回本身：数字类型、纯数字的字符串

其余都是NaN

3⃣️String() 转换为字符串

给（）里的内容添加双引号即可，本来就是字符串的返回本身即可

注意：

①NaN表示是非数字这个大类，NaN==NaN -->false NaN===NaN -->false NaN和0比较都是false，Boolean(NaN) -->false,其余转换都为NaN

②isNaN() 用于判断（）里的内容是不是一个非数字，

返回false：数字，布尔值，null，空字符串，空格字符串，纯数字的字符串

其余返回true

3.弱类型转换

利用js变量，浏览器自己进行转换

（七）运算符

1.算术运算符

＋两边都是数字类型做加法运算，任意一边是字符串做连接符

－ * / 分别做减乘除运算，一边是纯数字字符串，浏览器会做弱类型转换，转换为数字类型进行运算

% 模/取余取余数，一般用于奇偶性判断

++自加，--自减

++在前先自加，后赋值

++在后先赋值，后自加

2.赋值运算符 =

右边的内容赋值给左边，优先级最低

3.比较运算符

大于 > 小于 < 等于==

大于等于 >= 小于等于 <=

完全等于 ===

不等于 != 完全不等于 !==

== 只比较值，===比较值和数据类型， != 是== 相反值，!==是===的相反值

4.逻辑运算符

&& 并且 || 或者！取反/非

&& 一假皆为假 || 一真皆为真 !先看没取反之前的布尔值结果，再去相反值即可

5.条件运算符（三元/目运算符）

条件?条件为真执行的语句:条件为假执行的语句

1>2? 'OK':'NO'

返回NO

6.运算符的优先级

①（）优先级最高

② ++ -- ！

③ * / %

④ + -

⑤ 比较 > < >= 等

⑥ &&

⑦ ||

⑧ ?:

⑨ = 赋值符号优先级最低

（八）选择结构

1.程序

一系列有序指令的集合,顺序是可以改的，指令也是改的

2.程序结构的分类

1⃣顺序结构

从上往下执行

2⃣️选择结构

存在条件，根据条件的真假，执行不同的代码

3⃣️循环结构

重复执行

3.二选一语法结构

if(条件){
	条件为真，执行的代码块
}else{
	条件为假，执行的代码块
}

if必须写，else可以根据需要选写，else不写表示条件为假时，不执行任何代码

4.多选一多重if 语法结构

if(条件1){
	条件1为真，执行的代码块
}else if(条件2){
	条件2为真，执行的代码块
}else if(条件3){
	条件3为真，执行的代码块
}else if(条件4){
	条件4为真，执行的代码块
}else if(条件5){
	条件5为真，执行的代码块
}
........
else{
	以上所有条件都为假，执行的代码块
}

if必须写，else可以根据需要选写，else不写表示条件为假时，不执行任何代码
else if 可以写1个或多个，根据需要来

5.多选一 switch 语法结构

switch(表达式){
	case 常量1 :
	表达式与常量1相等时执行的语句块;
	break;
	case 常量2 :
	表达式与常量2相等时执行的语句块;
	break;
	case 常量3 :
	表达式与常量3相等时执行的语句块;
	break;
	.......
	default:
	表达式与以上所有的常量都不相等时执行的语句块
	break;
}

（九）调试

1.调试的方法

浏览器断点调试/代码文件debugger

2.断点调试

打开开发工具----> sources---->点击要调试的程序文件---->要调试的代码的行号上点击一下，做标记---->刷新页面，进入调试状态--->点击下一步图标，看程序执行的过程---->点watch后的+,监听相关变量 ---->调试完毕在有标记的行号上点击一下，退出调试模式

3.debugger调试

在需要调试的代码的部分，写上debugger ---> 运行代码，进入调试状态，点击下一步图标，看程序执行的过程---->点watch后的+,监听相关变量 ---->调试完毕

（十）循环

1.定义

满足条件的情况下，重复执行某操作

2.分类

1）for

2）for...in

3）while

4）do...while

3.结构

循环条件+循环操作

4.语法结构

①for  适用范围最广，常用
for(初始条件;循环(判断)条件;迭代条件{
       重复执行的代码块(操作)
}
初始条件:从哪里开始,需要用Var声明变量并赋值
循环条件:满足条件的情况下才循环,即判断条件
迭代条件:下一次从哪里开始
②for...in    针对对象
for（变量 in 数组/对象）{
     重复执行的代码块
}
数组可以用for或for...in循环，对象不能用for循环
③while   使用方法同for，但不常用
初始条件
while（循环条件）{
     重复执行的代码块；
     迭代条件；
}
④do...while  先执行，后判断
初始条件
do{
     重复执行的代码块；
     迭代条件；
}
while（循环条件）

5.跳转语句

1⃣️break

结束循环，可以用在循环，函数，switch中，使用广泛

2⃣️continue

跳出本次循环，后面的循环继续，只用在本循环中

6.多重循环

①循环之间可以相互嵌套，注意要完整嵌套

②嵌套不超过3层，一般用双重循环

③外层循环变量走1个，内层循环变量从头到尾走一遍

（十一）内置对象

1.对象的定义

对象是由属性(特征)和方法(做什么)构成的数据类型，js中万物皆对象，对象的属性和方法是可以扩展的

2.对象分类

内置对象：js封装好，可以直接使用的对象。主要有：Array(数组)、Math(处理数学任务的算数)、String(字符串)、Date(日期对象)

自定义对象：根据需要自己定义的对象

3.Math对象

(1)属性

属性	描述
E	返回算术常量 e，即自然对数的底数（约等于2.718）。
LN2	返回 2 的自然对数（约等于0.693）。
LN10	返回 10 的自然对数（约等于2.302）。
LOG2E	返回以 2 为底的 e 的对数（约等于 1.4426950408889634）。
LOG10E	返回以 10 为底的 e 的对数（约等于0.434）。
PI	返回圆周率（约等于3.14159）。
SQRT1_2	返回 2 的平方根的倒数（约等于 0.707）。
SQRT2	返回 2 的平方根（约等于 1.414）。

(2)方法

①Math.abs(x)绝对值

②Math.ceil(x)上舍入

③Math.floor(x)下舍入

④Math.round(x)四舍五入

⑤Math.random()随机数

⑥Math.pow(x,y)求x的y次幂

⑦Math.min(a,b,c,d,....)求最小值

⑧Math.max(a,b,c,.....)求最大值

4.Date对象

(1)创建Date对象

var 变量名 =new Date();

()内无值，表示不传参，创建当前日期对象

()内有值，表示传参，表示创建指定日期对象传参格式：“月日，年份，时：分：秒”

(2)Date对象常用方法

①获取年变量名.getFullYear(); 返回4位年份

②获取月变量名.getMonth(); 返回0-11，点前月可以加1

③获取日变量名.getDate(); 返回1-31

④获取时变量名.getHours(); 返回0-23

⑤获取分变量名.getMinutes(); 返回0-59

⑥获取秒变量名.getSeconds(); 返回0-59

⑦获取星期变量名.getDay(); 返回0-6，0表示星期天

⑧获取毫秒变量名.getTime(); 返回从 1970 年 1 月 1 日至今的毫秒数。

5.Array数组(节省存储空间)

(1)定义

用单独变量名来存储一系列的数据，数据可以是任何类型的

(2)创建数组和赋值

//构造函数的方法，new调用构造函数的关键字，()内的值可以省略
①var 数组名1=new Array();//创建数组，()可以传一个正整数表示数组长度
数组名1[索引]=元素值;//给数组赋值，索引从0开始

//字面量的方法
②var 数组名2=[];//创建数组 
//声明时直接赋值，每个元素之间用逗号隔开
var 数组名2=[元素值1,元素值2,元素值3,......]; 
var 数组名2=new Array(元素值1,元素值2,元素值3,......);

(3)数组分类

密集数组和稀疏数组

var arr=[1,2,3,4];//密集数组  元素连续
var arr=[1,2,,,,,7,8];//稀疏数组   元素间有间隙

(4)查看元素

JS内置对象里的Array.html

(5)length属性

语法：数组名.length //数组中所包含元素的数量

length可以改写，数组名[数组名.length-1]读取数组最后一项元素

(6)Array数组中改变原数组的常用方法

功能	语法	作用	返回值	被操作数组元素的个数
删除	数组名.pop()	删除末尾一项	被删除元素	1个
删除	数组名.shift()	删除开头一项	被删除元素	1个
删除	数组名.splice(指定位置索引,个数)	删除数组的指定位置元素	被删除的元素	一个或多个
删除	改小数组的length属性	从末尾开始删除	新的数组长度	一个或多个
增加	数组名.push()	末尾增加	新的数组长度	一个或多个
增加	数组名.unshift()	开头增加	新的数组长度	一个或多个
增加	数组名.splice(指定位置的索引，要删除的元素个数(没有时写0)，增加的内容)	在指定位置增加	无	一个或多个
增加	数组名.[数组名.length]=新增的元素值；	只能在数组末尾增加	新增的元素值	一个
修改	数组名[指定索引]=修改后的值；	修改指定位置开始的元素值	修改后的值	一个
修改	数组名.splice(指定位置的索引，要修改的元素个数，增加的内容)	修改指定位置开始的元素值	修改后的内容	一个或多个
排序	数组名.sort()	对纯数字数组进行排序(把数字当做单词规律进行小到大排序)，对于纯字母数组尽心排序(按照26个字母进行排序)	排序后的新数组	整个数组
排序	数组名.sort(function(a,b){return a-b;})//a-b正序；b-a倒序	给纯数字进行正序/倒序的排序	从小到大新数组	从小到大排序
倒序	数组名.reverse()	对数组内的元素在原数组的基础上进行位置倒放	倒放后的新数组	----------

(7)Array数组中不改变原数组的常用方法

1⃣️数组名.join("分隔符");

//将数组元素用分隔符拼接为一个字符串，返回字符串

2⃣️数组名1.concat(数组1，数组2，数组3，......)

将多个数组中的元素合并到一个新的数组中，返回新数组，并且新数组内的元素不会自动去重

3⃣️数组名.indexOf(要找的元素,开始查找的位置);

找到时返回元素在数组内首次被查找到的位置

第二个参数不传参时默认从开头查找，传参就从指定位置开始查找

4⃣️数组名.lastIndexOf(要找的元素，开始查找位置)

从后往前找元素，如果找到，返回找到元素的位置，第二个参数不传值默认从末尾索引(数组名.length-1)开始从后往前查找，传参就从指定位置开始往前查找，没找到返回-1

5⃣️数组名.slice(start开始索引,end结束索引)；

截取数组元素截取范围包含start不包含end，start和end均为索引

6.String对象字符串

(1)创建

//字面量的方式
// var str1="str123";//创建字符串
// console.log(str1);//str123
// //构造函数的方式
// var str =new String("abc");//创建字符串
// console.log(str);//{"abc"}返回的是一个对象

(2)属性

1⃣️字符串有稳定性的特点(长度不能修改)和不能修改原数组有相同的性质，所以给length重新赋值不会改变长度，因为string具有稳定性

2⃣️要修改字符串的长度，可以给字符串重新赋值，或者从头重新声明变量

3⃣️空格会计算在字符串长度内，汉字，符号(负号,加,减,乘,除,中文符号......)都会计算在长度内，[]内的为索引，可以读取字符串内的某个元素

(3)方法

1⃣️toLowerCase();

字符串转化小写(只会对字母有有效，整体改写)

2⃣️toUpperCase();

字符串转化大写(只会对字母有有效，整体改写)

3⃣️charAt(index);

index为索引，找到时返回该索引的元素，没找到时返回空格

4⃣️indexOf(字符串,index);

查找该字符串元素,从索引index开始从前往后查找，找到了返回该元素索引，没找到返回-1;第二个参数不写，默认为0

5⃣️lastIndexOf(字符串，index) ;

从索引index开始从后往前查找该字符串元素，找到了返回第一次查找到该元素的索引，没找到返回-1

6⃣️substring(startIndex,endIndex)

包含startIndex，不包含endIndex

7⃣️split(分割符);

用于把一个字符串分割成字符串数组

如果()内无任何值，表示将整个字符串作为一个数组元素返回

如果 ("")是空字符串，表示用空字符串作分割符，那么返回值中的每个字符之间都会被分割，包括空格。

返回的数组是通过分割符指定的边界处将字符串分割成子串。返回的数组中的字串不包括分割符自身。

如果(“N个空格”)内含有空格，那么返回的是将N个空格替换成逗号，空格的数目表示用几个空格作为一个单位

8⃣️join(合成符)；

用于把一个数组合成一个字符串(special：数组中的空格转换为字符串时是有意义)

如果()内无值，表示将数组作为一个整体转换为字符串，返回的字符串包含逗号，如果数组内有空格字符串，那么转换时依然要有空格，因为空格在字符串内是有意义的

如果("")是空字符串，表示用空字符串作为合成符，那么返回的字符串内不包含逗号，如果数组内有空格字符串，那么转换时依然要有空格，因为空格在字符串内是有意义的

如果("N个空格")是含有空格的，表示将数组里的每个逗号转换成N个空格，如果数组内有空格，则需要加上空格字符串的空格，空格的数目表示将N个空格作为一个单位

(4)字符串的应用----表单验证

表单验证有前端和后台共同完成，前端验证规范性，后台验证准确性，前端验证主要是为了减轻服务器压力

1⃣️表单事件

onfocus 获取焦点

onblur 失去焦点

2⃣️方法

节点.focus();
刷新时给节点设置获取焦点方法(用于第一个节点内的验证通过时，下一个节点获取焦点)

节点.blur();
刷新时给节点设置失去焦点方法(用于当节点内的值有上限时让节点失去焦点，阻止继续输入)

节点.select();
刷新时给节点设置高亮显示方法(给文本框内的值添加背景颜色)

3⃣️非弹出式提示

节点.innerHTML="提示内容";

(5)正则表达式

详解指路

1⃣正则表达式是一种模式

语法：/正则主体/修饰符(i,g,m)

g：表示全局模式,即模式将被应用到所有字符串，而非在发现第一个匹配项时立即停止。
i：表示不区分大小写模式。
m：表示多行模式，即在到达一行文本末尾时还在继续查找下一行中是否存在于模式匹配的项。

var re = /[a-z]$/;
var str = "ab\ncdef";  
console.log(str);//ab(第一行)  cdef(第二行)  因为\n是换行符号
console.log(str.replace(re,"#"));//ab(第一行)  cde#(第二行)  因为\n是换行符号 
re =/[a-z]$/m;  //m表示多行的结尾字母换成#号
console.log(str.replace(re,"#"));//a#(第一行)  cde#(第二行)

2⃣️正则表达式用于匹配字符

①test(); 返回布尔值

语法：正则变量名.test("字符串");表示字符串内是否包含正则内的值
var reg1=/a/;
console.log(reg1.test("abc"));//true
var reg2=/a/i;
console.log(reg2.test("Abc"));//true

②search(); 匹配到返回第一次查找到字符的索引,没有匹配到返回-1

语法：字符串.search(正则变量名);表示字符串内是否包含正则内的值
console.log("abc123bc".search(/bc/));//1

③replace(); 查找到返回替换后的字符串，未找到返回原字符串

语法：字符串.replace(正则,替换的字符串);正则内是要替换的字符串
console.log("acd123".replace(/123/,"dca"));//acddca   将123替换成dca
console.log("ac12a".replace(/a/,"d"));//dc12a   只会将第一个查找到的a替换成d
console.log("ac12a".replace(/a/g,"d"));//dc12d   将a替换成d,如果不写g(全局)，只会将第一个查找到的a替换成d

④exec(); 找到返回一个数组，未找到返回null

语法：正则.exec(字符串);

3⃣️正则表达式用于匹配位置

var str="Hello world";
console.log(str.replace(/^/,"#"));//#Hello world  这时replace的第一个参数表示位置
console.log(str.replace(/$/,2));//Hello world2

（十二）函数

1.定义及特征

是实现一定功能的代码块，可以传参，可以有返回值，分系统（内置）函数和自定义函数

2.系统函数

js封装好的函数，不需要用对象调用就可以直接使用的方法为函数，包括 alert(); prompt(); confirm(); typeof(); parseInt(); parseFloat(); Number(); Boolean(); String(); isNaN();

3.自定义函数

(1)是否有函数名--具名函数

单独声明一个函数(function左边没有=)必须加函数名，命名规范和变量名命名规范一致

(2)是否有参数--无参数函数、带参函数

1⃣️为什么传参，怎么传参

有相同逻辑、有不同的内容、相同的逻辑封装、不同的内容传参

2⃣️形参和实参

形参：在声明函数时()内的内容，形参本质是个变量，不传参时初始值是undefined

实参：在调用时()内的内容，实参一个确定的值，实参可以是任何类型

3⃣️传参要求(实参-->形参)

在传参时，如果实参的数量少于形参数量时，默认从左往右传值，没有被传参的形参值是undefined

在传参时，如果实参的数量多于形参数量时，默认从左往右传值，多余的实参不生效

在传参时，实参与形参的顺序要保持一致

4⃣️实参列表arguments

是所有实参的集合，类似数组，可以用arguments[索引]读取每个实参，但不能用数组的方法

5⃣️可选参数(||)

//可选参数(用于不输入值时，例如：缺考算成绩)
//name必写参数(传参时实参内必须写的)
//height age可选参数(传参时实参可以不写，不写时是默认值)
function people(name,height,age){
	//默认值必须写在||的左边
	var age1=age||18;
	var height1=height||166;
	console.log(name+"    "+height1+"     "+age1);// maomao 166 18
}
people("maomao");

6⃣️带返回值的函数

①返回值放在关键字return后面

②return有返回值的作用，还有结束函数的作用，函数中return后面的代码不再执行

③不需要返回值，只要结束函数时：return false;可以直接结束函数相当于break;

（十三）BOM浏览器对象模型(Object Model)

1.定义组成

它是浏览器对象，它的核心对象是window对像，包括history、document、location

2.window对象的事件和方法

（1）事件（鼠标默认左键）

事件	作用	触发
onload	加载窗口和图片	打开窗口时触发
onmousemove	鼠标移动	鼠标移动时触发(可以触发多次，只要鼠标在范围内动就会触发)
onmouseover	鼠标移入	鼠标移入时触发(移入时只会触发一次)
onmouseout	鼠标移出	鼠标移出时触发
onmousedown	鼠标按下	鼠标按下时触发
onmouseup	鼠标弹起	鼠标弹起时触发
onclick	点击鼠标	单击鼠标时触发
onkeydown	键盘按下	键盘按下时触发
onkeyup	键盘弹起	键盘弹起时触发
onchange	域内容改变	域内容改变时触发

（2）方法

1⃣️三种弹框

2⃣️两种定时器（setTimeout、setinterval）

注意：

定时器调用的函数只能是全局函数

定时器调用的函数还有参数时，调用语法：定时器(函数名,时间,实参1,实参2,实参3......);

3⃣️window.open() 打开新窗口

window.open(”url路径“,"在哪里打开默认值为_blank","top=数字,left=数字,width=数字,height=数字") //路径可以是绝对路径也可以是相对路径

3.history对象

history.back()

history.forward()

生效前提：在同一个窗口下

4.location对象

(1)属性

location.host 返回主机名和端口

location.hostname 返回主机名

location.href 返回完整的url地址，也可以重新赋值完整的其他url地址，等价于location.replace("完整url")

(2)方法

location.reload() 刷新本页面

location.replace("完整的url地址") 载入一个新页面

5.document对象

(1)属性

document.URL 返回当前页面的完整地址，等价于location.href 返回完整的url地址

document.referrer 返回当前页面的来源页面的完整url地址

(2)方法

获取节点的方法

1⃣️document.getElementById("id名")

id名获取获取一个节点

2⃣️document.querySelector("选择器")

通过css选择器获取获取一个节点

3⃣️document.getElementsByName("name名")

通过name名获取获取一个节点集合/数组(适用于获取不同父级内的某些子级)

注意：③不能通过指定父级找到指定name名的子级

4⃣️document.querySelectorAll("选择器")

通过css选择器获取获取集合/数组(适用于获取不同父级内的某些子级)(了解)

5⃣️document.getElementsByTagName("标签名")

通过标签名获取获取集合/数组(适用于获取同一个父级内的相同子级) (掌握)

6⃣️document.getElementsByClassName("类名")

通过css类名获取获取集合/数组(适用于获取相同类名节点) (了解)

改变内容

节点.innerHTML=“新内容”；

改变属性

节点.属性名="新的属性值"；

节点.setAttribute("属性名","新的属性值")

节点.getAttribute("属性名")

改变样式

节点.style.样式名=“样式值”；

js改变样式都会添加在行内(覆盖类名属性)

（十四）DOM文档对象模型

Document Object Model

1.理解节点树，通过层级关系去找节点

①子节点.parentNode
父节点(一个)

②父节点.firstElementChild
第一个子节点(一个)

③父节点.lastElementChild
最后一个子节点(一个)

④兄弟节点.nextElementSibling
紧跟着的弟节点(一个)

⑤弟节点.previousElementSibling
上一个兄节点(一个)

2.增加节点

1⃣️document.createElement(“标签名”)

根据给的标签名来创建一个节点，创建后并不会显示，需要将创建好的节点添加到指定位置才可以显示

2⃣️被克隆的节点.cloneNode()

克隆一个节点，()不传参时只克隆本身,(true)传参时克隆节点及节点内的所有子节点，克隆后的节点也不会显示在页面，只有将克隆好的节点添加到页面才会显示；

3⃣️父节点.appendChild(子节点)

向父节点的末尾添加一个子节点，添加后页面才会显示添加后的节点

4⃣️父节点.insertBefore(兄节点,弟节点)

将兄节点插入弟节点的前面

3.删除子节点

父节点.removeChild(子节点)

4.替换指定节点

父节点.replaceChild(用来替换的节点,被替换的节点)

（十五）JavaScript事件

1.事件的定义

特定交互瞬间，你(行为)若触发，我(代码块)便执行，记住事件的写法和触发机制

2.常用事件

(1)鼠标常用事件

鼠标事件	作用	触发
onmousemove	鼠标移动	鼠标移动时触发(可以触发多次，只要鼠标在范围内动就会触发)
onmouseover	鼠标移入	鼠标移入时触发(移入时只会触发一次)
onmouseenter	鼠标进入	鼠标进入
onmouseout	鼠标移出	鼠标移出时触发
onmouseleave	鼠标离开	鼠标离开
onmousedown	鼠标按下	鼠标按下时触发
onmouseup	鼠标弹起	鼠标弹起时触发
onclick	点击鼠标	单击鼠标时触发
ondblclick	双击	双击
oncontextmenu	单击右键	单击右键
onscroll	滚轮事件	滚动鼠标中间的滚轮

(2)键盘常用事件

键盘事件	作用	触发
onkeydown	键盘按键按下	键盘按键按下，按着不动会反复触发
onkeyup	键盘按键松开	键盘按键松开
onkeypress	经过	按键按下后松开触发

(3)表单常用事件

表单事件	作用	触发
onfocus	获得焦点	获得焦点
onblur	失去焦点	失去焦点
onchange	域内容改变	失去焦点且域内容改变时触发
oninput	输入	在表单元素内输入/修改内容时触发
onreset	重置	重置时触发
onsubmit	提交	表单提交时触发

(4)UI事件(User Interface 用户界面)

UI事件	作用	触发
onload	加载	加载窗口
onresize	窗口尺寸改变	窗口尺寸改变时触发

3.event对象(当前事件对象)周五

(1)定义

当前事件对象(=左边的事件)，用于获取鼠标的位置(event.clientX,event.clientY)或键盘的按键(event.keyCode)

(2)属性

①event.clientX 鼠标横坐标

②event.clientY 鼠标纵坐标

③event.keyCode 按键号码

④event.target 当前事件对象

(3)处理兼容性(旧版本火狐浏览器和非火狐浏览器)，新版本火狐浏览器认识event对象

节点.事件名=function(e){
	var oEvent=e||event;//处理兼容性
    console.log(oEvent.clientX);
}
//原因：火狐旧版浏览器不认识event，只认识e;

(4)js获取节点(内嵌样式)的宽、高(border-sizing:border-box;)

(1)节点.clientWidth、节点.clientHeight (返回数字类型)

①宽:节点.clientWidth clientWidth=盒子宽+左右padding

②高：节点.clientHeight clientHeight=盒子高+上下padding

(2)offsetWidth、offsetHeight (返回数字类型)

①宽:节点.offsetWidth offsetWidth=盒子宽+左右padding+左右border

②高：节点.offsetHeight offsetHeight=盒子高+上下padding+上下border

(3)window.getComputedStyle(节点).width、window.getComputedStyle(节点).height (返回字符串类型,值带有单位)

①获取样式里的宽

②获取样式里的高

4.事件流(存在于父级子级的嵌套关系中)

(1)定义和分类

页面接收事件的顺序，分为冒泡型事件和捕获型事件，浏览器默认是冒泡型事件

(2)冒泡事件(eg:相当于民主权，从民众出发一层层反映给外层的上级)

由内到外冒泡(传递的是行为)

(3)捕获事件(eg:由上级发布的指令一层层下达到内层的民主)

从外层往内层传播，很少用

(4)二级事件流(解决bug)

一个节点上既有捕获又有冒泡，执行顺序分为三个阶段：捕获阶段----->目标阶段----->冒泡阶段

注意：目标阶段的执行顺序(按照绑定事件的书写顺序执行),这里的目标指的是触发事件的对象(例如：点击事件里，点击谁，谁就是目标)

(5)阻止冒泡(需要处理兼容性问题)(默写)

非IE浏览器情况下: event.stopPropagation(); IE浏览器情况下: event.cancelBubble=true;

函数功能：阻止冒泡事件
参数：e  当前事件对象
无返回值
function stopPro(e){
	//处理旧版火狐兼容性问题
	var oEvent=e||event;
	//判断当前事件内是否含有stopPropagation事件(处理ie浏览器的兼容性问题)
	if (oEvent.stopPropagation) {
		//如果含有则调用stopPropagation()方法阻止冒泡
		oEvent.stopPropagation();
	}else{
		//否则给当前事件添加cancelBubble属性，阻止冒泡事件
		oEvent.cancelBubble=true;
	}
}

5.绑定事件的三种方法

(1)方法一

第一种:
<button id="btn">click</button>
var btn=document.getElementById('btn');
btn.onclick=function(){
	alert("hello world");
)

(2)方法二

第二种:
<button onclick="demo()">click</button>
function demo(){
	alert("hello“);
}

(3)方法三(又名事件监听：需要处理兼容性问题)

1⃣️语法：(案例)

第三种:(对象.addEventListener("事件名",函数,布尔值)//布尔值：默认值为false表示冒泡；true表示捕获，注意事件名前不加on)
btn.addEventListener ('click',function(){
	alert('hello world);
},false);

2⃣️优点：

可以给同一个节点绑定多个相同事件，所有事件均会触发(一般用于实现一个节点要调用多个功能函数时使用)

3⃣️处理兼容性问题：

IE浏览器添加监听事件标准语法:目标节点.attachEvent(“on”+事件名, 函数,布尔值)

//优点：可以给同一个节点绑定多个相同事件，所有事件均会触发		
//函数功能:添加事件监听
//参数：
//target(目标节点)    数据类型：存放目标节点的变量名
//type(事件类型即事件名，不要on)  数据类型：字符串
//fn(执行函数)    数据类型：可以是一个匿名函数，也可以是具名函数,函数如果传参只能用匿名函数，在匿名函数内调用需要传参的函数
//bool(事件流是捕获还是冒泡)  true是捕获，false是冒泡  此时的bool是个可选参数(不传参，表示默认为false)
function addEventHandeler(target,type,fn,bool){
	bool=bool||false;
	//判断目标节点是否含有监听事件
	if (target.addEventListener) {
		target.addEventListener(type,fn.bool);
	}else{
		//ie浏览器调用的监听事件
		target.attachEvent("on"+type,fn,bool);
	}
}

IE浏览器移除监听事件标准语法:目标节点.detachEvent(“on”+事件名, 函数,布尔值);

//函数功能:移除事件监听
//参数：
//target(目标节点)    数据类型：存放目标节点的变量名
//type(事件类型即事件名，不要on)  数据类型：字符串
//fn(执行函数)    数据类型：可以是一个匿名函数，也可以是具名函数,函数如果传参只能用匿名函数，在匿名函数内调用需要传参的函数
//bool(事件流是捕获还是冒泡)  true是捕获，false是冒泡	  此时的bool是个可选参数(不传参，表示默认为false)
function removeEventHandeler(target,type,fn,bool){
	bool=bool||false;
	//判断目标节点是否含有移除监听事件
	if (target.removeEventListener) {
		target.removeEventListener(type,fn,bool);
	}else{
		//ie浏览器调用的移除监听事件
		target.detachEvent("on"+type,fn,bool);
	}
}

注意：调用移除监听事件时，不能直接调用，必须将函数调用放在某个触发机制内才可以使用

6.默认行为

(1)定义

浏览器自己执行的行为，比如右键菜单，a标签的跳转/刷新页面

(2)阻止浏览器默认行为

①在函数最后一行写上return false;

优点：兼容性好，弊端：只能写在最后一行

②调用event对象的preventDefault()方法

优点：哪行都可以写弊端：不支持低版本的浏览器

//阻止当前对象事件的默认行为(浏览器自带的)
window.oncontextmenu=function(e){
	alert("3");
	//优点：哪行都可以写   弊端：不支持低版本的浏览器
	e.preventDefault();
	//优点：兼容性好，弊端：只能写在最后一行
	return false;
}

7.事件委托

(1)定义

利用冒泡事件的原理，把事件绑定给父级或祖先，操作子级触发父级

(2)优点

①提高js的性能，减少内存占用

var ul=document.getElementsByTagName("ul")[0];
var	liList=ul.getElementsByTagName("li");
方法一：
for (var i=0;i<liList.length;i++) {
	addEventHandeler(liList[i],"click",dayin);
}
function dayin(){
	console.log(this.innerHTML);
}

方法二：事件委托写法
addEventHandeler(ul,"click",dayin);

延伸：计时(小于一毫秒无法计时)
方法一:用日期对象getTime()来计算:最小单位是1ms,少于1ms就无法计时效果,显示0
var startTime=new Date().getTime();
var sum=0;
for(var i=1;i<=100000;i++){
	sum+=i;
}
//耗时：结束时间-开始时间
var endTime=new Date().getTime();
console.log(startTime);
console.log(endTime);
console.log(endTime-startTime);
			
方法二：用console.time("标记")表示开始，用console.timeEnd("标记")表示结束  耗时会自动计算 显示为标记：xxxxms
console.time("a");
var sum=0;
for(var i=1;i<=100;i++){
	sum+=i;
}
console.timeEnd("a");

②可以动态添加DOM元素实现效果(多用于迭代，无论写在哪里都可以覆盖之前的，因为事件绑定在父级元素上，所以和什么时候添加子级没有任何关系)

（十六）JS面向对象

1.面向对象基础

(1)定义

是由属性和方法的数据类型，是事物的抽象表示，是键值对的集合

①不同的业务逻辑需要的键值对不同，键值对的数量是有限

②对象的属性值是一个函数时，它就是对象的方法，调用：对象名.方法名(参数)

2、对象的增删改查

注意:对象的属性默认值是undefined，所以如果获取时的键不存在，那么返回undefined

(2)对属性的增删改查

1⃣️查询

用点号或中括号来查看，数字属性只能用[]查看，非数字属性点号和[]都能用，用[]取值需要加引号

var obj3={
	name:"gdhjd",
	age:12,
	say:function(num){
	alert(num);
	},
	2:"abc"
};
obj3.say(8);//8
//键为数字类型时只能用[]获取值
console.log(obj3[2]);//abc
//非数字类型的键获取值时如果用[]获取，需要给[]内的键加上引号
console.log(obj3["age"]);//12

2⃣️修改

除了字符串以外，其它对象怎么查，就可以给它重新赋值，如数组和对象

3⃣️增加

语法：对象名["属性名"]=新的属性值;

对象的属性默认值是undefined，增加就是把undefined换成赋的值

4⃣️删除

delete 对象名["属性名"]；只能删除对象的属性和方法，但是不能删除通过声明var的变量和声明function的函数

可以删除为声明的变量和为声明的方法

(3)属性判断和遍历

1⃣️判断：用in运算符，有返回true，没有返回false

//用来判断对象内是否存在某个属性，如果有返回属性的属性值，没有重新赋值
if("qq" in obj3){
	console.log(obj3["qq"]);
}else{
	obj3.qq=13343535;
    console.log(obj3.qq);//133434442
}

2⃣️遍历:对象没有length属性，所以用for循环是结果均是undefined，所以只能用for...in；获取时时只能用[]

//遍历对象全部的属性值
for(property in obj3){
	console.log(property);//属性
	console.log(obj3[property]);//属性值
}

3⃣️封装函数使用in运算符对属性进行操作

//函数的功能:判断对象内是否存在某个属性，如果有该属性则返回属性的属性值，没有该属性则给该属性赋值(相当于创建一个新的属性)
//参数:obj  对象   数据类型:对象名
property  属性名   数据类型：字符串
propertyVal   新的属性值   数据类型：都可以(可选参数)
function test(obj,property,propertyVal){
	//可选参数处理(左边是代表propertyVal有值||右边代表propertyVal无值,所以propertyVal此时的结果为undefined所以是false)
	propertyVal=propertyVal||obj[property];
	//三元运算符使用简化代码
	var result=(property in obj)?obj[property]:propertyVal;
	//返回结果
	return result;
}
			
//理解:如果对象内无此属性(第三个参数)，需要给第二个实参重新赋值，然后返回该属性值
//如果对象内有此属性(第三个参数)，直接返回对象内存在的该属性的属性值
console.log(test(obj3,"email","23334444422@ffff"));//23334444422@ffff
console.log(test(obj3,"name","sFCzgrxf"));//jjj

(4)this对象

this默认情况下指向window对象，其他情况下指向当前对象，属性和方法是谁，谁就是当前对象

在方法中，this 表示该方法所属的对象。
如果单独使用，this 表示全局对象,window 就是该全局对象为 [object Window]。
在函数中，this 表示全局对象,window 就是该全局对象为 [object Window]。
在函数中，在严格模式下(不能使用未声明的变量)，this 是未定义的(undefined)。
在事件中，this 表示接收事件的元素。

严格模式的限制：

①对象也是一个变量

②不允许删除变量或对象

③不允许删除函数

④不允许变量重名

⑤不允许使用八进制

⑥不允许使用转义字符

⑦不允许对只读属性赋值

......

(5)创建对象的方式

①字面量的方式创建对象

var people={
	name:"hhh",
	age:56,
	sex:"男",
	say:function(){
		console.log(this.name);////hhh
	}
}
people.say();

②构造函数的方式创建对象

var people=new Object();//Object()是js内置对象，O大写
people["age"]=12;//给对象赋值
people["name"]="kskd";
people.show=function(){//给对象赋值方法
	console.log(this);////{age: 12, name: "kskd", show: ƒ}
}
people.show();

2.工厂模式

需要批量创建对象时，需要工厂模式，工厂函数内必须封装一个对象，封装好的对象一定要返回

//需求：幼儿园小孩们也要人手一个，各种颜色都有，有300个小朋友，1个1个单独创建对象不现实，需要一个工厂批量生产，告诉工厂手机对象生产的细节
function createObject(name,color){
	//函数内封装对象的细节
	var playPhone={
		name:name,
		color:color,
		say:function(){
			console.log(this.name+"会滴滴叫");
		}
	}
	//返回对象--出厂
	return playPhone;
}
var result1=createObject("001","金色");
console.log(result1);

var result2=createObject("002","蓝色");
console.log(result2);

3.构造函数(首字母必须大写)

(1)定义、和函数的区别

new后面调用的函数是构造函数，构造函数用于创建对象，普通函数用于实现功能，构造函数首字母必须大写

(2)构造函数和工厂模式的区别

①没有显示创建对象？

②构造函数属性和方法都赋值给this对象

③构造函数没有return

④工厂模式创建的对象看不出类型，构造函数创建的对象前面显示构造函数名即类型

(3)new调用构造函数创建对象的具体步骤

①在构造函数内隐式创建一个this对象

②在构造函数内显示的给this对象赋属性和方法

③在构造函数内隐式的返回this对象

④new调用构造函数，实例化对象时，隐式的将this对象直接赋值

// 构造函数  --- 玩具车
function Car(name,color){
	// var this = {}      //隐式创建一个this对象
	this.name = name;
	this.color = color;
	this.say = function(){
		console.log(this.name + "会滴滴叫");
	}
	// return this;     // 隐式的返回this对象
}

var playPhone8 = new Car("008","蓝色");//this对象直接赋值给创建的对象
console.log(playPhone8);

var playPhone9 = new Car("009","灰色");
console.log(playPhone9);

4.原型和原型链

(1)定义

每个函数都有一个显示原型对象(prototype属性)，每个实例化对象都有一个隐式原型__英文下划线proto对象

(2)作用

将实例化对象共享/都有的属性和方法放在构造函数的原型对象中，可以节省资源

(3)原型链

原型对象也有原型，原型对象的原型也指向一个对象，形成原型链

// 构造函数  --- 玩具手机
function Phone(name,color){
	this.name = name;
	this.color = color;	
}
// 实例对象共享/都有的属性和方法放在构造函数的原型对象中，可以节省资源
Phone.prototype = {
	texture:"塑料",    // texture [ˈtekstʃər] 材质
	say:function(){
		console.log(this.name + "会滴滴叫");
	}
}
			
var playPhone6 = new Phone("006","蓝色");
console.log(playPhone6);

console.log(phone.textrue);//从原型对象上继承的
console.log(phone.say());//say的方法会执行，该方法是从原型对象上继承的

Happy Ending

好啦！下次见啦！

菜鸟赵赵今天学什么？学JS（基础）

前言

JS（基础）

（一）学前唠叨

（二）介绍

1.定义

2.特点

3.组成部分

（三）js放置的位置及注意要点

1.放在行内

2.放在body内

3. js放在head

4.外部js文件，用script标签引入

（四）变量

1.定义

2.声明赋值

3.变量名取名规范

4.作用域

1⃣️全局变量

2⃣️局部变量

（五）数据类型

1.分类

2.值类型（5种）

1⃣️undefined

2⃣️null

3⃣️boolean

4⃣️number

5⃣️string

3.引用类型

1⃣️对象

2⃣️函数

4.instanceof检测对象方法

5.typeof()检测数据类型

（六）数据类型转换

1.转换函数

1⃣️parseInt() 取整

2⃣️parseFloat() 取浮点数

2.强制类型转换

1⃣️ Boolean() 转换为布尔值

2⃣️Number() 转换为数字

3⃣️String() 转换为字符串

3.弱类型转换

（七）运算符

1.算术运算符

2.赋值运算符 =

3.比较运算符

4.逻辑运算符

5.条件运算符（三元/目运算符）

6.运算符的优先级

（八）选择结构

1.程序

2.程序结构的分类

1⃣顺序结构

2⃣️选择结构

3⃣️循环结构

3.二选一 语法结构

4.多选一 多重if 语法结构

5.多选一 switch 语法结构

（九）调试

1.调试的方法

2.断点调试

3.debugger调试

（十）循环

1.定义

2.分类

3.结构

4.语法结构

5.跳转语句

1⃣️break

2⃣️continue

6.多重循环

（十一）内置对象

1.对象的定义

2.对象分类

3.Math对象

(1)属性

(2)方法

4.Date对象

(1)创建Date对象

(2)Date对象常用方法

3.二选一语法结构

4.多选一多重if 语法结构