Day1

*JS简介*--一门运行在“JS解释器中的”面向对象的解释型弱类型脚本语言
    JS解释器：浏览器自带的处理JS代码的工具
    解释型：代码直接运行，遇到错误报错停止运行;与编译型语言有明显区别，编译型先编译没有错误才开始运行
    弱类型：变量的数据类型无需提前规定，由赋的值决定变量的数据类型
*JS变量和常量*
    变量：var 变量名 = 初始值；
    常量：const 常量名 = 初始值; 注意常量定义就必须赋值
*数据类型*
    基本数据类型
        字符串型：String  带双引号的通常为字符串型变量，网页页面中的几乎都是字符串变量
        数值类型：Number  数字，NaN也是数值类型，但是却不是数字
        布尔类型：Boolean 只有两个值 true/false
        Undefined： 只有一个值undefined
        Null： null常用释放变量，但是函数不需要释放变量
    引用数据类型：
        11种待学习的对象，js中除基本数据类型之外的都可以叫做对象？
算术运算符 + - * / %
    特点：算术运算符自带隐式转换，默认会将其他数据类型转为数值类型
    + 存在拼串情况（两边任意一边为字符串就会拼串）
    - * / %和普通运算符用法相同，但是注意隐式转换
        纯数字字符串--》对应数字  非纯数字字符串--》NaN
        undefined--》NaN    null-->0
关系运算符 > < >= <= == !=
逻辑运算符 && || ！
分支结构
    if(条件语句){功能语句};
    if(){}else{}
    if(){}else if(){}....else{}
    switch(条件语句)
        case 值1:
        功能语句;
        break;
        。。。
        defalut:
        功能语句;
        break;

Day2

数据类型转换：
    转字符串：
        待转数据.toString();  转字符串，几乎无用，因为页面中几乎都是字符串
            undefined和null不能转，因为这两个不能和 . 链接
        String(代转数据）常用于处理undefined和null 转为nundefined和null
    转数值
        Number（待转数据） 无用，和算术运算符的隐式转换作用相同
        parseInt(待转非纯数字字符串） 只能处理字符串和数值 遇到非数字就暂停解析，第一个就是非数字直接输出NaN
        parseInt（小数） 和parseInt功能一样，能识别小数
**函数
    声明函数
        function 函数名(){功能代码};
    调用函数
        函数名();
        绑定事件调用 变量.on事件名=function(){功能代码}
    函数的形参和实参
        function fun(形参){}
        fun(实参); 注意 形参和实参一一对应，一般当函数内部有不同的数字时才会传入实参

Day3

循环结构
    var 循环变量 = 初始值;
    while(循环条件){循环体 自增自减};
    
    for(var 循环变量 = 初始值;循环条件;自增自减)  死循环for(;;) while(true){}
生成随机数
    parseInt(Math.random()*(max - min) + min);
数组
    声明 
        var arr = new Array(元素1，元素2...);
        var arr = [元素1，元素2...];
    调用
        arr[索引下标]
    添加元素
        arr[索引下标] = 新元素
    length属性
        向数组最后添加新元素：arr[arr.length] = 新元素
        数组剪短： arr.length -= n;
        获取倒数n位元素： arr[arr.length - n]
    数组的遍历
        for(var i = 0;i<arr.length;i++){
            console.log(arr.[i]);
            }

Day4

JS三大组成
    ECMAScript:  一套JS的标准
    DOM：文档对象模型 专门操作html和css内容
    BOM：浏览器对象模型 专门操作浏览器
DOM树
    网页的元素为一个倒树状，树根为document只有一个
DOM查找元素方法
    ID查找
        var elem = document.getElementById("ID名"); 找到的单个元素可以直接操作
    标签查找
        var elem = document.getElementByTagName("标签名"); 找到的为一个类数组元素集合，不能直接操作，需要遍历或者制定哪一个 ducument可以替换为已找到的父元素
    class查找
        var elem = document.getElementByClassName("class名"); 找到的为一个类数组元素集合，不能直接操作，需要遍历或者制定哪一个  ducument可以替换为已找到的父元素
    DOM关系查找元素法 前提是有一个已经找到的元素
        父找子：elem.children; 找到的为类数组元素集合
        子找父：elem.parentNode; 找到单个元素可以直接操作
        父找第一个子：elem.firstElementChild; 找到单个元素可以直接操作
        父找最后一子：elem.lastElementChild; 找到单个元素可以直接操作
        找前一个兄弟：elem.previousElementSibling; 找到单个元素可以直接操作
        找后一个兄弟：elem.nextElementSibling; 找到单个元素可以直接操作
DOM元素操作方法  操作的都是内联样式表
    操作内容：
        获取：elem.innerHTML;
        设置：elem.innerHTML = "新内容"; 可以识别标签
         
        获取：elem.innerText;
        设置：elem.innerText = "新内容";  不能识别标签
        
        针对单标签input
        input.value;
        input.value = "新值";
   操作属性
       获取：elem.getAttribute("属性名");
       设置：elem.setAttribute("属性名","新的属性值");
   操作样式
       获取：elem.style.css属性名;
       设置：elem.style.css属性名 = "新的样式";
       
 DOM绑定事件
     单个元素绑定事件
        elem.on时间名 = function (){
            功能代码
            this(指当前绑定事件的这个elem)
            }
     多个元素绑定事件
         for(var i = 0;i< elem.length;i++){
             elem[i].on时间名 = function(){
                 功能代码;
                 this(指当前触发点击事件执行功能函数的这个elem[i])
             }
         }

JS学习第一周复习总结

Day1

Day2

Day3

Day4