一、逻辑基础

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)、强制转换

a、转字符串

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

b、转数字

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];//当前次元素
	}

二、DOM操作

1、DOM

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

2、树根

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

3、查找元素

（1）标签名/class名：

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

（2）通过关系获取元素：

前提：至少要找到一个元素才能调用关系

父：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->当前元素
	}

扩展：

计算字符串 - 脱字符串的衣服：eval(str);

初学js第一周