JS第一周总结

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

二、变量和常量 
以后反复使用的数据都要先提前保存到变量中，以后使用变量名，相当于就是再使用变量的值

    *变量：值可以改变的
        var 变量名=值;

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

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

四、数据类型：

   原始类型：Number/String/Boolean/Undefined/Null

    引用类型：11个对象

五、数据类型的转换

    1、算术运算符的隐式转换

        1） 、默认转为数字，在运算
        2）、+运算，碰上一个字符串，则为拼接
        3）、-*/%，字符串也可以转为数字，前提是纯数字组成的字符串，包含非数字字符，则为NaN
            true -> 1
            false -> 0
            undefined -> NaN
            null -> 0
            "1000" -> 1000
            "1000x" -> NaN
        4）、NaN：不是一个数字，但是确实是数字类型，不是一个有效数字
            参与任何算术运算结果都是NaN
            参与任何比较运算结果都是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

六、函数的基础：提前预定好，以后可以反复使用的代码段

    1、创建函数
        function 函数名(形参列表,...){
            函数体;
        }

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

七、分支结构：根据条件，选择部分代码执行

    1、比较运算符：> < >= <= == !=
        作用：判断条件
        结果：布尔值

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

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

八、循环：根据条件，判断要不要再执行一次操作

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

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

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

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

九、数组：一个变量（内存空间）保存多个数据

    创建：
       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
Document Object Model：文档对象模型，专门用于操作HTML（css）文档的

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

十三、查找元素

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

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

十四、操作元素
<标签名 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
扩展：计算字符串 - 脱字符串的衣服：
    eval(str);