一.js简单介绍：
javaScript简称js，它是一种【解释型】【弱类型】【面向对象】的脚本语言，具有以下特点：
1.js可以用任何代码编写器编写
2.【解释型】解释型：在代码运行之前不会对代码进行检查，而是直接运行，遇到错误再停止；
编译型：在代码运行前会对代码进行检查，发现错误则无法运行
3.【弱类型】弱类型：在设置变量时，变量可以保存任何类型的数据
强类型：在设置变量时必须规定该变量保存的数据类型
4.【面向对象】...
二.js的运行方式：
1.内部：使用<script></script>标签，js代码写在标签对里面
（测试时写着玩玩，因为方便）
2.外部：使用<script src=""></script>，通过src指向.js文件进行引入
（主要是用这个方法，因为做到了分离结构和行为的分离）
注意：这里的<script src=""></script>标签对中间不能再书写js代码了
三.js的注释：
在vscode中的快捷键仍然是ctrl+/，注释的作用都一样：提高可读性方便维护代码
但是不同的是它区分单行注释和多行注释而且对多行代码使用快捷键注释都是默认每行进行单行注释
四.打桩输出的三种方式：
1.console.log()
console==>控制台 log==>日志
这是直接在控制台打印输出，可以用来找错误，用的最多的
2.document.write()
document==>文档 write==>写入
这是直接打印在html页面中，但是这个方法并不好用，因为它搭配点击事件会将html的内容做出一个类似覆盖的效果
3.alert()；
这是弹出一个警示框的输出，这个方法也会有暂时遮蔽html内容的效果，需要关闭它内容才能加载
注意：输出的内容写在()里面，可以一次输出多个数据，数据之间使用逗号隔开
例如：console.log(变量名1,数据2,123)
五.变量：
作用：用来保存数据，需要重复出现的或者需要变化的
语法：var 变量名=变量值（数据）；
变量名是由自己取的，但是我们要注意：
1.变量名可以使用字母大小写、数字和$符的组合，但是不能用数字开头
2.设置变量名要尽量见名知义，不要使用a或者b这样的情况，不利于后续维护和阅读等
3.变量名不能使用关键词
注意：
1.变量创建之后可以不保存数据var 变量名；这个变量名会有一个默认值undefined；非常不推荐这样做
2.创建多个变量时可以进行简写var 变量名=变量值，变量名=变量值.....；（var只写一次）
var 变量名=prompt（"这是一个可以让用户输入的弹出框"）
六.常量：
作用：保存不会变的数据（值不允许修改）
语法：const 常量名=常量值；
例子：var pi=123；
pi=234；
这是修改了pi的值
const pi=123；
pi=234；
这直接就是一个错误
七.数据类型：
一.原始数据类型（值类型）（基础类型）：
1.字符串string
无数个
2.数字number
3.布尔boolean
4.空null
5.undefinde
二.引用数据类型
八.运算符：
1.赋值运算符=
2.算术运算符
+-*/%
特殊：%是取余，取余数的意思
作用：1.判断奇偶性
num%2==0为偶数
num%2==1为奇数
2.获取某个数字的后几位
1325%1000=325
1325%100=25
1325%10=5
3.控制运算永不超过某个数字
num%3结果不会超过3
注意：算数运算都有隐式转换，会将运算符左右的都变成数字进行运算
但是+运算如果遇到了字符串，会变成拼接操作，所以+运算的实际应用需要纯数字
九.分支结构的if语句：
一般来说代码从上向下，分支结构就是让代码在从上向下运行的时候进行选择，选择一部分代码执行，其他的不执行
语法：一个条件一件事，满足就做，不满足不做
if（条件）{操作}
一个条件两件事，满足就做，不满足就做默认操作
if(条件){操作}else{默认操作}
多个条件多件事，满足哪个做哪个
if（条件1）{操作1}else if（条件2）{操作2}else if（条件3）{操作3}.....else{默认操作}
十.数据类型的转换：
在html页面上获取到的一切东西都是字符串string
一.算数运算的隐式转换：默认将两边的数据类型变为数字在运算，别的数据类型也会转为数字
1.关键词 true=1 null=0 false=0 undefined=NaN
2.字符串内容是纯数字的时候可以将纯数字字符串变为数字类型，非纯数字的字符串看作NaN
二.NaN：Not A Number
不是一个数字，但是是一个数字类型
没有优点，但是有两个缺点：
1.NaN参与任何算术运算结果都为NaN
2.NaN参与任何比较运算结果都为false
NaN==NaN是false
判断一个值是不是NaN，
isNaN()它的意思是（）里面的值是NaN这个结果就是true
或者使用!isNaN()它的意思是（）里面的值不是NaN这个结果就是true
三.显示/强制转换：
1.转字符串类型
语法：需要转换的.toString
var str=x.toString
x代表需要转换的数据，但是这个数据不能是undefined和null因为undefined和null不能使用.操作
这个.toString相当于是一个.操作
2.转数字类型
三种方式：
1.parseInt();
parse解析 int整型
它会从左向右解析（）里面的数据，遇到不是数字就停止下来(不认识小数点)
parseInt("100.5")它打印出来就会是100
如果第一个就不认识，则为NaN
2.parseFloat();
原理跟上面一样，但是它认识第一个小数点
parseInt(ture)打印出来就不是1因为原理跟隐式转换不一样，而是NaN
3.Number()；可以将任何数据类型都转为数字，等效于隐式转换
不如直接把要转换的*1，/1，%1，-0的操作
十一.函数
函数也叫做方法，是需要【预定义好的】可以【重复使用】的【代码段】
使用：
1.创建/定义/封装函数
function 函数名(){
代码段
}
2.使用/调用函数
函数名();
就使用了
注意：这样写函数名()就是直接写死了执行一次多cv几次就执行几次
我们可以给他绑定点击事件，让用户去触发
<elem onclick="函数名()">内容</elem>
elem是html上的标签，它是Element元素的缩写
3.在什么时候使用
1.我们不希望页面打开就立即执行我们的代码段，而在我需要的地方写死或者让用户触发
2.希望这个代码段的功能可以反复执行，不用重新刷新页面
3.任何一个独立的功能体都需要单独封装在一个函数中
4.函数在js中的地位最高，是第一公民的地位，函数中的变量会在函数使用结束后自动释放，使用时再创建
4.带参数的函数
形参：形式参数，就是一个变量名，它的值就相当于实参
当设置好 function 函数名(形参1，形参2，num，...){代码段}
调用时 函数名(实参1，实参2，5....){}
这个实参5就会替换到这个函数中代码段写了形参也就是num的地方
注意：在调用时实参的顺序和个数要与形参一一对应
函数不一定是非要带参数才好，看需求写就行
十二.分支结构
1.程序流程的控制语句
1.顺序执行：默认操作，从上往下
2.分支结构：通过判断条件选择部分代码执行
3.循环结构：通过判断条件，判断是否循环执行代码
2.比较运算符
>、<、>=、<=、==、!=、===
大于、小于、大于等于、小于等于、等于、不等于、全等于
这个主要是用来放在if(条件){}语句条件中的用来进行判断的，判断结束会返回布尔值，如果布尔值为ture则执行代码
注意：一个=不是比较运算符，不是等于在js里它是赋值的意思
不能像数学里一样 if(18>age>16){}这种写法是错的
要写成if(18>age&&age>16){}
3.逻辑运算符
与&& 多个条件都要满足 并且的意思
或|| 满足其中一个条件 或者的意思
非! 颠倒布尔值
可以使用多个逻辑运算符
十三.循环
1.为了执行相同或者相似的操作
三要素循环
1.循环变量：相当于记录我这个循环的次数
2.循环条件：相当于我这个循环变量要满足什么条件才能停止循环
3.循环体： 循环时执行的操作
2.while循环
语法：var 循环变量=初始值
while(循环条件){
循环体；
循环变量的变化
}；
3.for循环
语法：for(var 循环变量=初始值;循环条件;循环变量的变化){
循环体
}
4.死循环写法
while(true){};
for(;;){};
一般来说，确定可以确定循环什么时候停止就写正常循环用for循环
因为for循环的代码更精炼
一般来说，不确定循环次数就用while写死循环，更方便
但是没有强制要求
死循环要结束搭配break；就可以在满足循环里面的某个条件达到需要时结束循环
十四.数组
1.创建数组
语法：var arr[数据1，数据2，.....];var arr=new Array(数据1，数据2，.....);
arr相当于变量名，数据的类型不用管，什么都可以，数组就是一个变量名包含了多个数据
但是每个数据在数组中的位置都是唯一的，这个位置的排序我们叫下标
下标从0开始第一个数据在数组的位置排序是0，第二个数据在数组的位置排序是1...
比如一个数组有10个数据，但是下标是从0开始，就是0-9
由此可见，下标比数据的个数少一个
我们用arr.length去代表数据的个数
那么下标就是0-arr.length-1
这个推导的作用是让我们在很多很多数据的时候不用去算最后有多少个
2.取和插入数据
arr[i]就可以拿到数组中i所对应下标的数据
这个i就相当于下标
arr[i]=新值；就可以修改i位置的数据
3.数组的三大不限制：
不限制元素个数
不限制元素类型
不限制下标越界---不是好事
这个下标越界就是i可以大于arr.length但是这样会得到一个undefined
如果在i>arr.length的时候去添加，arr.length到i中间的下标所有的都会变成undefined==>稀疏数组
4.遍历数组
为什么会有这个：是因为数据不能直接拿来.操作
for(var i=0；i<arr.length;i++){
arr[i]这个就是拿到数组中的每一个数据
}
计算遍历数组之后的和需要
for(var i=0，j=0；i<arr.length;i++){
j+=arr[i]
}
十五.查找页面元素
一.查找：
1.利用id查找
var 变量名=document.getElementById("id值")；
注意：
1.有多个重复的id的话，它只找到第一个就不找了
2.没有找到会返回null
3.id其实可以不用查找直接使用(该标签)
4.不准使用id操作留给后端
2.标签查找
var 变量名=document.getElementsByTagName("标签名")；
注意：
1.这个是选择的所有"标签名"，是一个集合，类数组不能直接.操作
2.要使用就是要么var 变量名=document.getElementsByTagName("标签名")[i];找到第几个
要么在用时 变量名[i]这样也可，
要么遍历数组，就可以拿到所有的
3.document可以换成一个已经找到的父元素
例如var fuqin=document.getElementsByTagName("ul")[0];
var lis=fuqin.getElementsByTagName("li")[0]；
3.class名查找
var 变量名=document.getElementsByClassName("class名")；
其他的与标签查找一样
4.通过关系去查找
都要有一个已经找到的元素才行
找父元素 elem.parentNode；
找子元素 elem.children;-------注意这个找出来是个集合，因为子元素很多
找第一个/最后一个子元素 elem.first/lastElementChild-----注意一定要写Element不然会容易找到空格
找前/后一个兄弟元素 elem.previous/nextElementSibling；
元素指的是<标签名 属性名="属性值">内容</标签名>整个
二.找到了元素就要进行获取和判断再设置
一切的获取都是为了判断
一切的设置都是为了修改或添加
要记得页面拿到的都是字符串
1.内容
获取：elem.innerHTML (支持识别标签，也就是标签里面的文本内容和标签都会被拿到)
设置：elem.innerHTML="新内容"
.innerText也是内容，但是不支持识别标签，会把写的标签当成文本处理
.value 这个是专门用来input框的内容
2.属性
获取：elem.getAttribute("属性名") 这会拿到这个元素设置的属性名的属性值
设置：elem.setAttribute("属性名"，"属性值")
可以设置自定义属性
这个获取和设置都是为了改变属性的值
这个有简化版本
获取：elem.属性
设置：elem.属性=新值
注意：1.简化版本对class这个属性不能直接写，因为.class在js是关键词要写className
2.不能操作自定义属性---就是自己添加的属性和值
3.样式
获取：elem.style.css样式名
设置：elem.style.css样式名="样式值"
注意在设置的时候，样式名有-的要换成小驼峰命名法
例子：border-color==>borderColor
而且这种现在只能设置行内样式
三.绑定事件
elem.on事件名=function(){
}
注意：要学会用this
如果是单个元素绑定点击事件this指向这个元素
绑定的elem是用了遍历的elem[i]的话，this指向当前触发事件的元素
解析字符串---脱衣服，eval();
