JS
    ECMAScript:语法范围
    变量,函数名:
        名字由字母、数字、下划线、$组成,第一位不能是数字,变量名区分大小写
        驼峰式命名:userLastName
 
    运算符:
        = : 赋值,结果是等号右侧的值
        >、<、>=、<=进行数值比较
        ==、===判断是否相等,===对比数据类型和值
 
    数据类型:
        string  number  Boolean    null    undefined
        栈:桥(从上到下按格排列)先进后出
 
        Array   Object  function
        typeof可以验证除Array、object以外的数据类型
        引用数据类型储存的是一个指向,指到实际的值(堆里),比较时按地址比较
 
    判断:if    switch      三元运算符:只能执行一句话 列:x>5&&console.log(1);
        wsitch(变量){
            case1;
                //执行
                break;//终止当前条件
            default:  //其他情况,相当于else
        }
 
        三元运算符,于if相比智能执行单条语句
        &&,逻辑与(and)
        智能执行单条语句,可能引起运算顺序错误,不能执行return语句
 
    循环
    for(){}
    continur;跳出本次循环,进入下一次循环
 
    6.7号
    while(条件){执行}
    do{执行}while(条件),限制性,在判断,最少执行一次
 
    数学函数
        取最大值:Math.max(1,2,3,4)
        取最小值:Math.min(1,2,3,5)
    取整数:
        向上:Math.ceil(3.1)
        向下:Math.floor(4.9)
        四舍五入:Math.round(2.9)
    绝对值:Math.abs(-5)
 
    随机值:Math.random(),值是0-1之间的小数 0000
 
    Math.random()取值0-1(不包含0,1),x10之后范围是0-10(不包含0,10),
    最后向下取整,范围0-9
        设置box的随机背景+
    Math.random()*255  0-255
 
6.8
    for循环只有一句语句的话可以不加{}
        列:
        for(var a=0;a<2;a++)
        for(var a=0;a<2;a++)
        for(var a=0;a<2;a++)
        for(var a=0;a<2;a++)
        for(var a=0;a<2;a++)
        for(var a=0;a<2;a++){
        }
 
    字串符:
        表现形式:用""或者''包裹的数据
        特征:长度,length,     String的实例属性
        方法:
            1、获取字符串中某字符串的位置(索引,从0开始)
                最后一个字符的位置是    字符串长度-1
                匹配不到,结果是-1
                通常用indexOf()是否等于-1来验证是否包含某字符
                str.indexOf("s");
            2、从后向前获取字符串中第一次匹配到的某字符串的位置
                str.lastIndexOf()
                与indexOf的区别,仅仅是查找方向相反
                indexOf()和lastIndexOf()验证的是===
            3、获取某位置的字符
                ①、str[索引],类似获取数组元素
                ②、str.charAt(索引)
            4、截取字符串
                ①、str.substring(开始索引,结束索引-不会被选中)
                只有
                ②、str.substr(开始索引,要截取的长度)
                只有开始索引,从此位置截取到字串符末尾
                ③、str.slice(开始索引,结束索引-不会被选中)
                只有开始索引,从此位置截取到字符串末尾
                ,如果开始没有开始索引,复制整个字符串
                                                    获取扩展名
                                                        从.的位置开始向后截取
                                                        获取.的位置上:
            5、字符串的拼接
              +
            引号嵌套:单引号里面用双引号,双引号里面用单引号
                双引号里的双引号需要转义   \"   \"
                多行字符串末尾加转义字符\,能在字符串中保留格式
            concat:链接,将多个字符串拼接成一个新的字符串
                ,str1.concat(str2,str3...,strn)  
            6.分隔字符串,将字符串分割成数组
                tt.splice(分隔符),
                分隔符可以是空字符串翻转字符串:将字符串分隔成数组,
                再将数组翻转,然后拼成字符串
            7.转换大小写
                转大写:tt.toUpperCase()0
                转小写:tt.toLowerCase()
            8、查找位置     tt.search()
                indexOf()查找具体字符串cha
                search()查找具体字符串或同类型
                (符合正则表达式条件)字符串
            9、查找替换  
                将符合条件的字符串替换指定的字符串,不改变原字符串
                tt.replace(要查找的,要替换成什么),默认只替换第一次匹配的内容
                tt.replaceAll(要查找的,要替换成什么),默认全部替换
                /\d/g       或者/[0-9]/g
                如果用正则表达式replaceAll一定用g,replace不用g同样仅替换第一次匹配
 
            正则表达式/\d/
 
    6.9
        数字    number
        整数、小数、支持+-*/
 
        转换方式
            强制转换:将数字转成字串符String(数字)
                    将字符串转换成数字Number(str)
                    parseInt(str)3.1415926535897932384626(str)
 
                    parseInt和parseFloat区别:
                        parseInt转换之后不保留小数
                        第一位是非数字,转换结果为NaN
                    Number和parseInt与、parseFloat的区别
                        number只能转换纯数字字符串,
                        如果有非数字,结果是NaN
            隐式转换:数字+""  
                    字符串转数字:
                        /1  -0  *1
                        包含非数字,转换结果是NaN
 
                数字转小数,或者保留小数位数:
                    toFixed(小数位数)
                    作用:
                        整数后面补0
                        精确小数位数(四舍五入)
 
                    检测一个数字是否为有效数字
                        isNaN(要检验的数字)
                        ,结果是true,证明不是有效数字
                NaN:not a number,但是数据类型是number
                Number()
                parseInt()
                parseFloat()
                isNaN()
                toFixed()

 

    6.10
        函数 function
        作用:有利于多次调用,执行重复的语句
            定义方式:
                1、函数声明
                    function 函数名(){
                        执行语句
                    }
                2、表达式
                    var xy=function(){
                        执行语句
                    }
                3、构造函数创建
                    var f=new Function()

 

                函数声明与函数表达式的区别:
                    函数声明会在预编译阶段前置,
                    在var的后面,在所有语句执行之前

 

                    函数表达式类似于遍历声明,var提升之后,
                    没有赋值之前无法获取函数
 
        函数调用:函数名()
 
        作用域:
            全局作用域:
                script标签下的环境,全局作用域下声明的变量或函数,
                能在任何区域使用
            函数作用域:
                function的内部环境,函数作用域中声明的变量
                或函数(局部变量),只能在函数内部使用

 

                函数里为声明直接赋值的变量,称为自由变量,当函数调用
                后,自由变量自动变为全局变量。(严格模式"usestrict"下,
                自由变量报错)

 

                var声明的变量与直接赋值的变量(自由变量)区别在于var声明
                的变量不能通过delete删除
           
                作用域链:
                    使用变量时,如果函数内部不存在,向外层函数查找该变量,
                    ...一直到全局作用域,还未找到,则是undefined(就近原则)
            回调函数:
                某操作执行完之后,执行的语句立即执行
                函数(自执行函数):
                (function(){
                    console.log(123);
                })()
                优点:
                    1、避免污染全局
                    2、形成闭包环境,可以传参数
                缺点:
                    没有函数名,无法重复使用
 
            函数重点一:参数
                形参:创建函数式设置的变量,形式参数
                实参:函数调用时,用来替换形参的数据,实际参数
 
            函数重点二:返回值
                返回值指的是函数的执行结果,如果没有retarn,
                返回值默认为undefined
                retarn之后的语句不再执行
                retarn只能出现在函数里
    6.11
        函数特性一:实参列表 arguments
            与形参无关,只能出现在函数里
        函数特性二:参数的默认值
            a=a\||1: a是undefined, unll,0, "",a=1
            null运算符 a=a??1
            a是
 
        数组
            作用:可以存储多个值
            只要用于存储多个同类型的值
 
        数组是一个引用类型,变量存储的是一个指向
 
        值和引用的区别:
            传值:只能更改整个值,对其他变量不产生
            影响  比较的是值
            引用传递:比那两代表了已给指向,指到一个地址,
            通过变量改变数据一部分时,相当于修改对应地址上的
            数据,凡是指向该地址的变量,访问到的结果都是跟改后
            的结果,    比较的是地址,每一个引用类型数据都有一个不
            同的地址,所以引用类型数据比较

 

        数组格式:
            [数组元素1,数组元素2,...数组元素n]

 

        验证数组:
            Array.isArray([1,2]);结果是true或false

 

        数组翻转:[1,2,3].reverse()

 

        数组拼接成字符串:[1,2,3].join("-")
 
        str.spltca
 
        数组创建方式:
            var arr=[1,2]
            var arr2=new Array(1,2)
               
        数组的特长:
            数组的长度:数组元素的个数
            数组的索引:每个元素对应的位置,从0开始,到长度-1
           
        数组元素的访问方式:
            var arr=[1,2,3];
            vat[0]

 

        遍历数组:
            1、for循环

 

        数组拼接
            1.concat:
 
        数组元素的增加:
            利用数组长度为索引,在末尾添加新元素
            索引>(大于)数组长度是,会在数组中产生空元素
 
            arr.push();//在数组元素的末尾添加新元素,返回
            值是数组长度
 
            arr.unshift(item1,item2...,itemN);//
            在数组元素前面添加
 
        数组元素的删除:
            arr.pop();尾部删除元素,返回被删除的元素
            arr.shift();头部删除元素,返回被删除的元素
 
        任意位置添加或删除元素:
            arr.splice(开始索引,要删除的长度,
            [用来补位的---可以有也可以没有])
            删除:
                arr.splice(开始索引,要删除的长度),
                返回值是被删除的元素组成的数组
            在某位置前添加:
                 arr.splice(索引,0,用来添加的内容)
            替换:
                arr.splice(开始索引,要删除的长度,
                用来补位的内容)

 

        数组元素empty:
            没有元素,但是占据了一个位置[,,,,]

 

        数组排序:
            arr.sort(function(a,b){
                retarn a-b; //升序
                }

 

6.14
    数组遍历一:
        map:用于数组元素的修改,生成由返回值组成的新数组,
        map里用retarn
        forEach:用于遍历、展示,也可以用于元素修改
            item:数组的每一个元素
            index:和item对应的索引,index是遍历时释放
            的数据,代表索引
            第三个值:正在遍历的数组
                (function(所有跟上面一个意思))
    数组遍历二:排序
            arr.sort(function(a,b){
                retarn a-b; //升序
                }
    数组遍历三:
        some:用于检测数是否符合条件的元素,有一个
        符合,结果就为true      一真则真
    数组遍历四:
        every:用于检测数组中的元素是否全部符合条件,
        全部符合,结果为true
        全真才真,一假则假
    数组遍历五:
        filter:从数组中筛选出符合条件的元素,组成新的数组
    数组遍历六、七
        reduce、reduceRight:获取数组元素的和,或者对数组中的
        字符串拼拼接
        start:初始值,数字求和,初始值默认为0
            函数里的参数
                a:每次累加之后的值
                b:当前元素
                c:当前元素对应的索引
                d:数组
                e:初始值    e就是结尾加的数
                其他的方法里面没有a

 

    对象    {属性:值,属性:值}
6.15
    对象,表现形式{属性名:值,属性名:值}
    访问方式,用 .(点)获取属性值或设置属性的值
 
6.16
    用户与页面之间的交互
    dom文档对象模型 document object model
    时间——重点
 
    1、dom元素的获取:
        通过id获取:document.getElementById(id名)--
        单个元素
       
        通过class获取:document.getElementsByClassName
        (class名)--多个元素,类数组或伪数组(有索引,有
        length,但不是数组组)

 

        通过标签获取:document.getElementsByTagName(标签名)[0]
        --多个元素

 

        body:document.body--直接获取body

 

        通过name属性来获取:document.getElementsByNamen("x")
        --多个元素

 

        通过选择器获取:document.querySelectior(选择器)
        ---单个元素

 

        通过选择器获取:document.querySelectorAll(选择器)-
        --多个元素(即使是id,结果也是一个集合)
        HTMLcollection  
        arguments实参列表,有索引,有长度,是伪数组
        arguments只能用在函数里,函数外作为变量处理
        Nodelist

 

    结构 表现 行为导致结构或表现发生变化
    内容

 

    dom.innerText:获取或设置dom元素里的文本(忽略html标签)
        设置内容时,将标签作为文本处理

 

    dom.innerHTML:获取或设置dom元素中的html内容
        将标签都生效

 

    dom.outerHTML:获取或设置dom元素的html内容(包含自身的标签)

 

    设置innerHTML或者innerText时,会重新渲染页面,
    所以尽量避免使用innerHTML+=(
    集体实现是遍历时将字符串存在变量里,
    便利结束之后,将字符串一次性
    赋值给innerHTML)

 

    设置dom样式
   
        设置样式:
            dom.style.css属性名=值
        获取样式
            通过.style方式只能获取到内联样式中的属性
            getComputedStyle(dom).css属性,可以获取内联样式中的属性、
            style标签中的属性、外部css的属性、默认属性
 
    属性
        自定义属性:标签不支持的、x   abcd    a-c
            设置:dom.setAttribute("属性",值),
            值最终是字符串形式
            获取:dom.getAttribute("属性名")
            可以获取或者设置自身属性
            删除:dom.removeAttribute("属性名")
            可以获取、设置或删除自身属性
        自身属性:标签支持的、id  class   title
            设置:dom.属性名=值
            获取:dom.属性名
            删除:delete  dom.属性名
 
6.17
        元素之间获取:列如当前元素是ele
        父元素:ele.parentNode
        子元素:ele.childNodes,列表形式,包含文本节点,注释
        节点和标签节点
            ele.children,列表形式,仅包含标签节点
        上一个元素:ele.previousSibling
            ele.previousElementSibling
        下一个元素:ele.nextSibling
            ele.nextElementSibling
        第一个子元素:ele.firstChild  
        包含文本、注释、标签
            ele.firstElementChild--第一个标签子元素
        最后一个子元素:ele.lastChild
            ele.lastElementChild--最后一个标签子元素

 

        节点类型:
            文本节点:3
            标签:1
            属性:2  
            注释:8

 

        思考:如何找到ele前面(后面)所有的标签元素,添到数组里,即
        ele的兄弟元素(同辈元素)
            如果上一个元素不是null,江上一个元将添进数组,将上一个
            元素指向上一个元素的上一个
 
        dateset:能获取或设置自定义属性,要求格式为data-属性名
            比如:boxdataset.a=100;结果就是在box的标签上
            生成一个data-a=100 属性
 
6.18
    结果:获取的索引是i的组中值
    原因:时间出发时,for循环已经结束
    解决方法:
        1、es6中用let
        2、
        3、利用闭包函数解决
        4、事件委托
            将事件委托给外层元素,当事件触发时会根据事件源判断触发对象
            核心原理:事件冒泡+事件对象
 
            优势:
                避免大量绑定事件
                动态生成的元素也具有事件
                解决改变html内容之后事件丢失的问题

 

            事件冒泡:事件在触发时,会向外传播,外层元素如果具有相同
            的事件,会自动被触发

 

    标签上的click只能绑定一次
    js中的dom.onclick只能绑定一次,第二次绑定会把第一次覆盖
        取消事件    dom.onclick=null
    dom.addEventListener("事件类型",回调函数,冒泡
    或捕获)实现多次绑定,第三个参数是布尔值,默认是flase,
    指事件冒泡,true指事件捕获,设置在外层元素上

 

                    e.stopPropagation();阻止冒泡

 

                            addEventListener实现多次绑定
        取消 removeEventListener("事件类型",获取函数)
   
    事件捕获:从外向内触发

 

    IE绑定事件:
        dom.attachEvent
        没有第三参数

 

6.21
    阻止默认行为
        e.preventDefault();     //阻止默认行为
        e.returnValue=flase;     0   //IE低板浏览器
        return flase;       //另外一种阻止默认行为的方式

 

    阻止事件冒泡
        e.stopPopagation();IE78
        e.cancelBubble=true;标准浏览器

 

    常用的事件类类型
        拖放    drag    drop
    鼠标滑过    mouseover
    鼠标移出    mouseout
   
    鼠标进入    mouseenter
    鼠标离开    mouseleave

 

    enter和over区别:
        mouseenter,mouseleave不会出发事件冒泡
        父子元素之间切换状态不会触发对方的事件

 

        mouseover和mouseout存在事件冒泡,在父子元素和子子元素
        之间切换时会持续触发事件

 

    鼠标移动    mousemove
        应用:获取鼠标位置
            位置获取:
                event.clientX,event.clientY
                event.pageX,event.pageY

 

                page和client区别:
                pafeXY用文档左上角作为0,0
                clientXY用当前显示窗口左上角作为0,0
                如果没有滚动条时,page和client取值相同

 

        点击    click   支持鼠标+手指
        双击    dblclick
            开头要加on

 

        键盘
            keydown+keypress+keyup

 

        手指
            touchstart  touchmove   touchend

 

        鼠标点击:
            mousedown+mouseup

 

        event
            clientx
            pagex
            stopPropagation
            preventDefault
            srcElement
            keyCode

 

            onload      记载
            onreadystatechange
            focus
            blur
            input
            change
            select

 

   
    //setTimeout:经过多久执行,只执行一次
    //清除:clearTimeout(setTimeput的编号)




6.23
    html属性
        disabled不可用,没有事件

 

    bom:

 

6.30
    方法:
        添加:
            push(item1,...,itemN),尾部添加新元素
            pop(),删除最后一个元素,返回删除的元素
            unshift(tiem,...tiemN),头部添加
            shift(),删除第一个

 

            splice(索引,要删除的长度,要添加的元素)--》
            至当前索引的前面
7.2     下午
    alert(提示内容),警告窗口
        缺点:
            1、无法展示完整数据   [object Object]
            2、阻塞模式,页面无法渲染
            3、界面无法

 

    confirm(查询的内容),
    提示确认内容,返回值来自窗口中的确定(true)和取消(flase)按钮

 

    prompt(标题,要输入的内容),返回输入的内容,没内容则返回null