基础

1、JS概念：JavaScript：运行在浏览器端的一个解释型（不检查错误，直接运行，碰到错误就停止）弱类型（数据类型由数据来决定）面型对象脚本语言。

2、变量和常量 - 以后反复使用的数据都要先提前保存到变量中，以后使用变量名，相当于就是再使用变量的值 *变量：值可以改变的 var 变量名=值;

常量：一旦创建后，值不允许再次修改
	const 常量名=值;

3、算术运算符：+ - * / % %：取余 - 5%3 == 2

4、数据类型： 原始类型：Number/String/Boolean/Undefined/Null

引用类型：11个对象

5、数据类型的转换 1、算术运算符的隐式转换 1、默认转为数字，在运算 2、+运算，碰上一个字符串，则为拼接 3、-*/%，字符串也可以转为数字，前提是纯数字组成的字符串，包含非数字字符，则为NaN true -> 1 false -> 0 undefined -> NaN null -> 0 "1000" -> 1000 "1000x" -> NaN 4、NaN：不是一个数字，但是确实是数字类型，不是一个有效数字 1、参与任何算术运算结果都是NaN 2、参与任何比较运算结果都是false，问题，不能用普通的比较运算来判断是不是NaN 解决：!isNaN(x); true->有效数字 false->NaN

2、强制转换
	1、转字符串：var str=x.toString();//页面上的一切数据默认都是字符串类型
				      //x不能是undefined和null，undefined和null不能使用.

	2、转数字：
		var num=parseInt/Float(str);

		var num=Number(x);//万能的，完全等效于隐式转换，还不如-0 *1 /1 %1

6、函数的基础：提前预定好，以后可以反复使用的代码段 1、创建函数 function 函数名(形参列表,...){ 函数体; }

2、调用函数
	函数名(实参列表,...);
	elem.onclick=function(){
		函数名(实参列表,...);
	}

7、分支结构：根据条件，选择部分代码执行 1、比较运算符：> < >= <= == != 作用：判断条件 结果：布尔值

2、逻辑运算符：&&  ||  !
	作用：综合比较
	结果：布尔值

3、if(){}	if(){}else{}	    if(){}else if(){}else{}

8、循环：根据条件，判断要不要再执行一次操作 var 循环变量=几 while(循环条件){ 循环体; 循环变量的变化 }

for(var 循环变量=几;循环条件;循环变量的变化){
	循环体;
}

死循环：while(1){循环体}	for(;;){循环体}

死循环要搭配上break才能停止循环

9、数组：一个变量（内存空间）保存多个数据 创建： var arr=[数据,...]; var arr=new Array(数据,...);

访问：
    arr[i]

添加/替换：
    arr[i]=新值;

数组三大不限制：
	不限制类型/个数/下标越界（坏事）

数组的长度：arr.length
	1、访问倒数第n个元素：arr[arr.length-n];
	2、向末尾添加元素：arr[arr.length]=新值;
	3、缩容：arr.length-=n;//删除arr倒数n个;

遍历数组：把数组中的每个元素拿出来执行 相同 或 相似的操作
	for(var i=0;i<arr.length;i++){
		arr[i];//当前次元素
	}

---

1、DOM：Document Object Model：文档对象模型，专门用于操作HTML（css）文档的

2、树根：document对象，浏览器的js解释器（运行环境）会自动创建，通过树根找到页面上我们想要找到的DOM元素/对象/节点

3、查找元素： 标签名/class名：var elems=document/已经找到的父元素.getElementsByTagName/ClassName("标签名"); 特殊： 1、找到了：返回一个类数组集合，没找到：返回一个空集合; 2、DOM集合是不允许直接做操作的，要么下标找到某一个，要么遍历找到每一个 3、也不一定非要从document开始查找，也可以写一个自己已经找到的父元素，只会找到这个父元素下面的元素

通过关系获取元素：前提：至少要找到一个元素才能调用关系
	父：elem.parentNode;
	子：elem.children; - 集合
	第一个儿子：elem.firstElementChild;
	最后一个儿子：elem.lastElementChild;
	前一个兄弟：elem.previousElementSibling;
	后一个兄弟：elem.nextElementSibling;

4、操作元素：<标签名 id="" class="" title="" style="样式">内容</标签名> - 操作元素的前提就是要找到元素 1、内容： innerHTML（识别标签）/innerText（纯文本）/value（input准备的）; 获取：elem.innerHTML/innerText/value; 设置：elem.innerHTML/innerText/value="新内容";

2、属性：
	获取属性值：elem.getAttribute("属性名");
	设置属性值：elem.setAttribute("属性名","属性值"); 
		无敌的

	简化版：
	获取属性值：elem.属性名;
	设置属性值：elem.属性名="属性值";
		缺陷：1、只能操作标准属性，不能操作自定义属性
		           2、class必须写为className
	
3、样式：
	获取：elem.style.css属性名;
	设置：elem.style.css属性名="css属性值";
	特殊：1、内联样式：不会牵一发动全身，优先级最高
	           2、css属性名：如果出现了横线，去掉横线换成小驼峰命名法
	           3、获取时，只能获取到内联样式，样式表中的获取不到，暂时的一个小缺陷
	
4、绑定事件：
	在js中绑定事件：符合我们的原则：内容（html）、样式(css)、行为(js)分离
	elem.on事件名=function(){
		要做的操作
		this关键字：目前只能在事件之中使用，是一个指针，不同的场景，指向不同
		单个元素绑定事件：this->这个元素
		多个元素绑定事件：this->当前元素
	}