js部分
JS概念：
JavaScript：运行在浏览器端的一个 解释型 弱类型 面对对象 脚本语言。
解释型与编译型
解释型： 不检查错误，直接运行，碰到错误就停止
强类型： 在运行前先检查错误，有错误会报错，不运行
弱类型与强类型
弱类型： 传输什么数据就是什么数据类型的变量 有什么装什么
强类型： 保存什么数据，有数据类型决定 按身份入座
变量和常量：
需要重复使用的数据都可以先提前保存到变量中。这样使用变量名，相当于就是再使用变量的值
- 变量：值可以改变的 （常用）
var 变量名=值;
- 常量：一旦创建后，值不允许再次修改
const 常量名=值;
符号
算术运算符
算数符号 （+ - * / %） 就是将符号两边的数字进行运算，其方式和优先级都和小学学的一样。值得注意的是通常情况下算术符号会将符号两边的值都变为数字类型 （隐式转换）。特殊的是 + 可以进行字符串拼接 。
特殊值NaN
NaN意思是 not a number,其参与任何计算结果都为NaN
算术运算符的隐式转换
- 字符串： 纯数字的字符串可以直接转换为数字型，如果不是纯数字就会为
NaN - 布尔：
true---> 1false--->0 - undefined： 只能转换为
NaN - Null： -->0
字符串的拼接
只有+可以进行字符串的拼接，当算式中存在非纯数字的字符串时，则此时+进行字符串的拼接,例：
var sum="我是" + 123
输出的sum，得到的结果为 我是123
数据类型：
原始类型：Number/String/Boolean/Undefined/Null
引用类型：11个对象
数据类型的转换
算术运算符的隐式转换
- 字符串： 纯数字的字符串可以直接转换为数字型，如果不是纯数字就会为
NaN - 布尔：
true---> 1false--->0 - undefined： 只能转换为
NaN - Null： 只能转换为
NaN
字符串的拼接(运算符的特殊隐式转换)
只有+可以进行字符串的拼接，当算式中存在非纯数字的字符串时，则此时+进行字符串的拼接,例：
var sum="我是" + 123
输出的sum，得到的结果为 我是123
强制转换
1、转字符串：var str=x.toString();
页面上的一切数据默认都是字符串类型
x不能是undefined和null，undefined和null不能使用.
2、转数字：
varnum=parseInt/Float(str);可以识别字符串前面的的整数（Int）或小数（Float）
var num=Number(x);完全等效于隐式转换（不好）。
函数的基础
函数是包装好，可以反复使用的代码段
创建函数
function 函数名(形参列表,...){
函数体;
}
调用函数
直接调用的方法
函数名(实参列表,...);
元素绑定事件（Dom） 的快捷方式
elem.on事件=function(){}
分支结构
根据条件，选择部分代码执行
比较与逻辑 运算符
-
比较运算符：
>大于<小于>=大于等于<=小于等于==等于!=不等于
作用：判断条件 结果：布尔值 -
逻辑运算符：
&&和||或!否
作用：综合比较 结果：布尔值
判断if
判断是否满足条件，再运行代码段如下例
只做一个判断，一段代码段
if(条件){
//如果满足则运行
代码段
}
只做一个判断，是就运行第一段代码段，不是就运行第二段代码
if(条件){
//如果满足则运行
代码段1
}else{
//不是则运行
代码段2
}
需要做做多个判断
if(条件1){
//如果满足条件1则运行
代码段1
}else if(条件2){
//不满足条件2则运行
代码段2
}else{
//都不满足则运行
代码段3
}
小注意：else可以不写
循环
根据条件，判断要不要再执行一次操作
值得注意的是，在打开页面后都是先循环再发生事件，所以在触发事件时变量i的值，已经是最后一遍循环的值（let可以解决）
while循环
var 循环变量=几
while(循环条件){
循环体;
循环变量的变化
}
死循环：
while(true){
循环体
}
死循环要搭配上break才能停止循环（结合if）
for循环
和while循环一样，不过更便利，更简洁，功能更完善（不适合死循环）
for(var 循环变量=几;循环条件;循环变量的变化){
循环体;
}
数组
一个变量（内存空间）保存多个数据
创建方式：
var arr=[数据,...];
var arr=new Array(数据,...);
访问：
arr[i]
i为数组元素的下标，从0开始计数
添加/替换 元素
arr[i]=新值;
数组三大不限制：
不限制类型：不管什么类型的数据，都可以储存
个数：数组可以储存无限个数据（元素）
下标越界：当访问超过本数组的元素时，显示为undefined
数组的长度 arr.length
1、访问倒数第n个元素：arr[arr.length-n];
2、向末尾添加元素：arr[arr.length]=新值;
3、缩容：arr.length-=n;（清除最后一个元素）
遍历数组
是一个常见操作，用于将数组中的每个元素单独拿出来执行 相同 或 相似的操作
原因是，无法直接通过数组操作里面的元素，数组不参与任何操作，参与任何计算都为NaN
for(var i=0;i<arr.length;i++){
arr[i];//当前次元素
}
DOM
Document Object Model：文档对象模型，专门用于操作HTML（css）文档的
树根
document对象，浏览器的js解释器（运行环境）会自动创建，通过树根找到页面上我们想要找到的DOM元素/对象/节点，document包含整个网页结构
查找元素：
var elems=document/已经找到的父元素...
标签名
通过标签名查找元素getElementsByTagName("标签名")
var elems=document/已经找到了的父元素.getElementsByTagName("标签名");
找到的是一个集合
class名
通过class查找元素getElementsByClassName("标签名")
var elems=document/已经找到了的父元素.getElementsByClassName("标签名");
同样的，找到的是一个集合
ID
通过ID查找元素getElementById("id值")，也可以不用查找 直接写id值 就可以调用
但是Id是需要留给后端的开发人员去使用，所以在前端开发中，通常不能够使用id
var elems=document/已经找到了的父元素.getElementsBId("标签名");
关系
前提：至少要找到一个元素才能调用关系
- 父：
elem.parentNode; - 子：
elem.children;- 集合 - 第一个儿子：
elem.firstElementChild; - 最后一个儿子：
elem.lastElementChild; - 前一个兄弟：
elem.previousElementSibling; - 后一个兄弟：
elem.nextElementSibling;
操作元素
在找到元素的前提下，才可以操作元素。
元素：<标签名 属性>内容</标签名>
操作内容：
识别标签innerHTML/ 识别纯文本innerText /识别input的内容value
获取的方式：
elem.innerHTML/innerText/value;//innerText获取到的是 "<标签名 属性>内容</标签名>"的字符串
设置方式：
elem.innerHTML/innerText/value="新内容";
获取：
设置：
操作属性：
牛逼但复杂：
获取属性值：elem.getAttribute("属性名");
设置属性值：elem.setAttribute("属性名","属性值"); (这个方法可以设置自定义的属性)
简单且常用：
获取属性值：elem.属性名;
设置属性值：elem.属性名="属性值";(不能操作自定义属性)
注意： class必须写为className
操作样式：
获取：elem.style.css属性名;
设置：elem.style.css属性名="css属性值";
注意：
- 内联样式：js修改的是行内样式，优先级最高
- css属性名：要用小驼峰命名法，（如果出现了横线，去掉横线）
- 获取时，只能获取到内联样式，样式表中的暂时目前的方式获取不到
绑定事件：
前提：
符合原则：内容（html）、样式(css)、行为(js)分离
elem.on事件名=function(){
要做的操作
}
this关键字： 目前只能在事件之中使用，是一个指针，不同的场景，指向不同
单个元素绑定事件：this->这个元素
多个元素绑定事件：this->当前元素(遍历)
