前端简略笔记

html极少部分

<ul> <li>无序列表
<ol> <li>有序列表
<dl> <dt> <dd> 自定义列表

type属性：
    submit 提交按钮
    reset 重置按钮
    file 文件提交

<label>标签  input元素定义标注  用于绑定一个表单元素，当点击标签内的文本时，浏览器自动的将焦点转到或者选择对应的表单元素上
  *<label for="text">用户名：</label><input type="text" id="text">


<select>
    <option>辽宁</option>
    <option>吉林</option>
    <option>黑龙江</option>
</select>

<textarea>表单元素

css极少部分

后代选择器：如：ol li{ color:pink;} 表明ol中的所有li包括孙子
子选择器：必须是亲儿子元素，孙子不管 ol>li{color:pink;}
并集选择器：如：div,p{ color:pink; }
伪类选择器：（最大的特点是用冒号表示）  
        /*1.默认连接状态*/
        a:link{
            color: pink;
            text-decoration:none;//去掉下划线
        }
        /*2.已访问状态*/
        a:visited{
            color: darkgray;
        }
        /*3.鼠标悬浮状态*/
        a:hover{
            color: red;
        }
        /*4.激活状态：鼠标按下并未弹起的链接*/
        a:active{
            color: orange;
        }
        //注意他们五个顺序不要随意颠倒
        //实际工作中要给a单独指定样式
       ：focus伪类选择器，一般针对表单元素来说 input:focus


css三大特性：层叠性、继承性、优先级
  *层叠性：主要解决冲突问题，就近原则，覆盖
  *继承性：子标签会继承父标签的某些样式
  *优先级：选择器相同跟据层叠性，不同时按权重：！important重要的最大 > 行内样式style=“” > id选择器 > 类选择，伪类选择 > 元素选择 > 继承  

h5c3部分内容:

#html5:
      语义化标签：
     （1）section：独立内容区块，可以用h1~h6组成大纲，表示文档结构，也可以有章节、页眉、页脚或页眉的其他部分；（大号的div）
     （2）article：特殊独立区块，表示这篇页眉中的核心内容；
     （3）aside：标签内容之外与标签内容相关的辅助信息；
     （4）header：某个区块的头部信息/标题；
     （5）hgroup：头部信息/标题的补充内容；
     （6）footer：底部信息；
     （7）nav：导航条部分信息
     （8）figure：独立的单元，例如某个有图片与内容的新闻块。
      多媒体标签：不用flash和其他浏览器插件
        音频：<audio>
        视频：<video src="文件地址" controls="controls(播放控制暂停啥的)" loop循环播放>    
      input类型新增type属性 
      表单属性placeholder。。
#css3:
    新增选择器：
        1、属性选择器 如：input[type=text]{ color=pink; }  input[ class^=icon(选中以icon开头的) ]{ color=pink; } 
             input[ class$=icon(选中以icon结尾的) ]{ color=pink; } input[ class*=icon(选中含有icon的) ]{ color=pink; }
        2、结构伪类选择器 用于选择父级里面的第几个孩子  ul:first-child(last-child,nth-child(n)选择某个父元素的一个或多个特定的子元素n也可以是even(偶数的孩子)，也可以是odd(奇数的孩子)，n也可以是公式){ color=pink; } 
            ul li:nth-of-type(n){}    nth-child会把所有盒子都排列序号（先看孩子后看div）     nth-of-type(n){}会把指定的盒子都排列序号
        3、伪元素选择器 可以帮助我们利用css创建新标签元素，而不需要html标签，从而简化html结构 ::before   ::after 权重很低为1   可以用来清除浮动
    盒子模型：box-sizing指定盒模型两个值：content-box   border-box
            box-sizing:content-box盒子大小为：width+padding+border(默认的)
            box-sizing:border-box盒子大小为：width
    滤镜filter：filter：blur();模糊函数括号里面数越大越模糊
               calc()让你在声明css属性值时执行一些计算，括号中可以进行加减乘除的运算
    新特性：过渡（谁做过渡给谁加，如果要写多个属性用逗号隔开，所有属性都变用all）（从一个状态渐渐的过渡到另一个状态经常和hover搭配使用）
        transition：要过渡的属性 花费时间（单位是秒必须写单位）  运动曲线（默认是ease）  何时开始（单位是秒必须写单位默认是0s可以省略）

webpack:

 五大核心：
    mode：编译模式
    entry：编译起始文件
    loaders：文件资源的转换  不能复用
    plugins：提供额外功能的插件
    output：编译结果文件输出

 只识别js文件，css等文件要用loader配置 
 config.js进行配置webpack
 package.json是npm的文件
 use数组是从后往前的

js

#初识
    浏览器：渲染引擎（解析html、css）  js引擎
        js引擎：预解析  代码执行  
            预解析会把js里面的所有的var还有function提升到当前作用域的最前面之后才会进行代码执行按照代码书写的顺序从上往下执行
            但是变量提升只提升变量声明，不提升赋值操作 函数提升只是声明函数补调用函数

            console.log(num);//undefined  坑
            var num = 10;

            fun(9);//报错
            var fun = function(){
                console.log(22);
            }

    js输入输出语句：prompt()弹出的输入框 console控制台输出供程序员测试使用
    *变量：isNaN(值) 判断值是否是数字，如果为数字则返回false，不是数字返回true
    函数中arguments数组
    for(var k in obj){
        k得到的是属性名
        obj[k]得到的是属性值
    }


#dom:
    *dom树：一个页面就是一个文档，用document表示   所有标签都是元素用element表示  网页中所有内容都是节点用node表示
        document.getElementById("Id值"):通过元素的Id获取元素对象
        document.getElementByTagName("li"):返回指定标签名的对象集合 以伪数组的形式存储的  得到的元素是动态的 如果没有则返回一个空数组
        可以用父元素来指定具体是ol还是ul中的li 但是父元素必须是单个对象不能是伪数组形式
        html5新增：document.getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组
                  document.querySelector("选择器")根据指定选择器返回第一个元素对象  里面的选择器需要加符号如.box #nav
                  document.querySelectorAll("选择器")根据指定选择器返回所有
        获取body元素：document.body   获取html元素：document.documentElement  
    *事件：是可以被js监测到的行为  简单理解：触发--响应机制
        三部分（要素）：事件源，如：按钮     事件类型，如：鼠标点击还是键盘点击     事件处理程序，如：通过一个函数赋值的方式完成
            var btn = doocument.getElementById("btn");
            btn.onclick = function(){
                alert("1111");
            }
        鼠标事件：
            onclick:鼠标点击
            onmouseover:鼠标经过
            onmouseout:鼠标离开
            onfocus:获得鼠标焦点
            onblur:失去鼠标焦点
            onmousemove:鼠标移动，冒泡经过父子都响应     
            mouseenter鼠标移动但是不会冒泡，父子只响应一次  对应的是mouseleave
            onmouseup:鼠标弹起
            onmousedown:鼠标按下
            contextmenu:控制该何时显示上下文菜单，主要用于取消 如禁止右键菜单：  
                document.addEventListener('contextmenu',function(e){
                    e.preventDefault();})
            mousemove:
        操作元素：
            改变元素内容：element.innerText 从起始到终止位置的内容，但它去除html标签同时空格和换行也会去掉 
                         element.innerHTML 从起始到终止位置的全部内容
                区别：innerText（不标准）不识别html标签并且去除换行和标签  而innerHTML（W3C标准）识别并保留空格和标签
            改变元素属性：如img.src = "....."
            表单跟普通盒子不一样 表单里面的值文字内容是通过value来修改的  disabled来禁用 如btn.disabled = true; 
            className类名
            onmouseover鼠标经过事件
            onmouseout鼠标离开事件
            获取属性值
                element.getAttribute(") 获得自定义属性
                elemnet.属性 获取内置属性值
            设置属性值
                element.属性 = " "; 设置属性值
                element.setAttribute("属性","值")； 设置属性值
            移除属性
                elemnet.removeAttribute(" ");
        h5自定义属性：
            都以data-开头做为属性名并且赋值 如<div data-index="1"></div>
            新增获取属性的方法（只能获取data-开头的）elemnet.dataset.属性 或者element.dataset['属性']   这个属性要是多个-连接的例如：data-list-name可以使用listName驼峰命名法          
    *节点操作
        利用节点层级关系获取元素  利用父子兄关系来获取  逻辑性强但是结构性差
        一般节点至少有nodeType(节点类型)、nodeName(节点名称)、nodeValue（节点值）三个基本属性 
        元素节点nodeType为1  属性节点nodeType为2  文本节点（文字、空格、换行）nodeType为3
        父级节点：node.parentNode  找不到返回为null
        子级节点：node.childNodes得到的是所有子节点包括文本节点如换行等等//一般不用
            parentNode.children(非标准)获取子元素节点  parent.firstChild
        兄弟节点：node.nextSibling得到下一个兄弟节点包括文本节点  node.previousSibling(上一个)
            node.nextElementSiling得到下一个兄弟元素节点  node.previousElementSiling上一个
        动态创建节点：
            document.createElement('  ') 创建效率高 结构清晰
            document.write()  比较冷门有页面重绘
            element.innerHTML 先存数组在创建效率高
        添加节点:(告诉人家你创造的节点放到那去了) node.appendChild(child) 以添加儿子节点的方式  node 父级  child 子级 后面追加元素类似于数组中的push
            var li = document.createElement('li');
            var ul = document.querySelector('ul');
            ul.appendChild(li);
        node.insertBefore(child,指定元素)前面添加
        删除节点：node.removeChild(child)  删除子节点   disable按钮禁用  href:"javascript:；"阻止连接跳转
        复制节点：node.cloneNode()如果参数为空或者false只克隆节点本身不克隆里面的子节点  参数为true则克隆子节点
    *事件高级：
        监听注册事件eventTarget.addEventListener(type如click注意不要加on,listener事件处理函数,useCapture不写默认为false为冒泡阶段，true为捕获阶段)
        删除事件：
            传统的onclick绑定事件通过：element.onclick = null删除事件
            方法监听的删除事件eventTarget.removeEventListener(type,listener,useCapture)
        dom事件流理论：捕获阶段（大到小）-> 当前目标阶段->冒泡阶段（小到大）决定执行顺序
        事件对象event或者e或者evt
            常见属性和方法：
                e.target:返回触发事件的对象    ie6-8用e.srcElement    不同的是this返回的是绑定事件的对象
                e.type:返回事件的类型  不带on
                e.preventDefault() 该方法阻止默认事件如不让连接跳转
                e.stopPropagation():阻止冒泡 
        事件委托：
            原理：不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点
                如：给ul注册点击事件，然后利用事件对象的target来找到当前点击的li，因为点击li事件会冒泡到ul上，ul有注册事件，就会触发事件监听器
                只操作了一次dom提高了程序的性能
        鼠标事件对象MouseEvent 鼠标事件对象。。。  
        键盘事件对象KeyboardEvent 
            常用事件：执行顺序：keydown--keypress--keyup
                onkeyup：键盘按键被松开时触发
                onkeydown:键盘被按下时触发
                onkeypress:键盘被按下时触发  但是它不识别功能键
            属性：keyCode 键的ascll值
#bom:浏览器对象模型  把浏览器当做一个对象来看待 顶级对象是window
    *常见事件：
        加载事件
            页面加载事件：window.onload = function（）{} 只能写一次   或者window.addEventListener("load",function(){}) 可以多次    等页面的所有元素都加载完毕执行
            窗口加载事件：document.addEventListener('DOMContentLoaded',function(){})  加载完dom树就可以执行
        调整窗口大小事件   常用做响应式布局
            window.onresize = function(){}   window.innerWidth屏幕宽度
            window.addEventListener("resize",function(){});
        定时器：
            window.setTimeout(调用函数也叫回调函数，[延迟的毫秒数]) 时间到了调用函数   停止定时器：window.clearTimeout(timeoutID)
            window.setInterval(调用函数也叫回调函数，[间隔的毫秒数])  不断调用  搁间隔时间就调用持续下去   停止：window.clearInterval(intervalID)
        this指向问题：
            一般情况下this的最终指向是那个调用它的对象
            全局作用域或者普通函数中this指向全局对象window  定时器里面this指向window
            方法调用中谁调用this指向谁
        js执行机制： 
            js是单线程的:
            回调函数是异步任务  同步任务在主线程执行线 异步任务在任务队列执行线 
        location对象：
            window提供的一个属性，获取或设置窗体的url并且可以用于解析url，属性返回的是一个对象所以也称location对象
            location.hrlf获取url
            location.search返回参数
            常见方法：
                location.assign():跟href一样，可以跳转页面  有浏览记录可以回退
                location.replace():替换当前页面 不记录历史不能回退
                location.reload():重新加载页面 相当于刷新
        navigator对象：
            包含有关浏览器的信息，最常用属性是uerAgent 可以返回由客户机发送服务器的user-agent头部的值      检测用那个浏览器来浏览，pc还是手机端
        history对象：
            与浏览器历史记录进行交互，该对象包含用户访问过的url
            方法：
                back() 后退功能
                forward()前进功能
                go(参数) 前进后退功能，参数为1前进一个界面，为-1后退一个界面
    *网页特效
        offset系列：偏移量  可以动态的得到该元素的位置、大小等
            获得元素距离带有定位父元素的位置；
            获得元素自身的大小（宽度高度）。
            注： 返回的数值都不带单位
            offset 系列常用属性：
                element.offsetParent    返回作为该元素带有定位的父级元素，如果父级元素没有定位，则返回body  与parentNode（返回亲爸爸）区别
                element.offsetTop       返回元素相对带有定位父元素上方的偏移
                element.offsetLeft      返回元素相对带有定位父元素左边框的偏移
                element.offsetWidth     返回自身包括padding、边框、内容区的宽度、返回数值不带单位。（不包含margin）
                element.offsetHeight    返回自身包括padding、边框、内容区的高度、返回数值不带单位。（不包含margin）
            offset 与 style 区别：（获取使用offset  更改使用style）
                    offset                                       style
                offset 可以得到任意样式表中的样式值        style 只能得到行内样式表中的样式值
                offset 系列获得的数值没有单位               style.width 获得的是带有单位的字符串
                offsetWidth 包含padding+border+width       style.width 获得不包含padding和border 的值
                offsetWidth 是只读属性，只能获取不能赋值   style.width 是可读写属性，可获取也可以赋值
        client系列：客户端  获取元素可视区的相关信息，可以动态的得到该元素的边框大小、元素大小等
            client系列属性             返回值
            element.clientTop      返回元素上边框的大小
            element.clientLeft     返回元素左边框的大小
            element.clientWidth    返回自身，包换padding/内容区的宽度，不含边框，返回数据不带单位
            element.clientHeight   返回自身，包换padding/内容区的高度，不含边框，返回数据不带单位
            立即执行函数：不需要调用，立马能够自己执行的函数
                （function(){}）() 或者（function(){}()） 主要作用：创造一个独立的作用域
        scroll系列：滚动  使用 scroll 系列的相关属性可动态获得该元素的大小、滚动距离等。
                scroll 系列属性         作用
            element.scrollTop       返回被卷去的上侧距离，返回值不带单位
            element.scrollLeft      返回被卷去的左侧距离，返回值不带单位
            element.scrollWidth     返回自身实际的宽度，不含边框，返回数值不带单位
            element.scrollHeight    返回自身实际的高度，不含边框，返回数值不带单位
        动画原理：setIntervl()定时器实现
        本地存储：数据存在浏览器中，设置读取，甚至页面刷新方便不丢失数据 容量比较大，只能存储字符串，可以将JSON.stringify()编码后存储
            window.sessionStorage:
                生命周期为关闭浏览器窗口；
                在同一个窗口下数据可以共享；
                以键值对的形式存储
                存数据：sessionStorage.setItem(key,value)
                获取数据：sessionStorage.getItem(key)
                删除数据：sessionStorage.removeItem(key)
                删除所有数据：clear()
            window.localStorage:
                生命周期永久生效，除非手动删除，否则关闭页面也会存在
                可以多窗口（页面）共享（同一个浏览器内）
                以键值对形式存储
                存数据：setItem(key,value)
                获取数据：getItem(key)
                删除数据：removeItem(key)
                删除所有数据：clear()

#es6:
    *变量声明和声明特性：
        let:
            可以批量声明；
            不能重复声明； var可以
            块儿级作用域
            不存在变量提升  只能先定义后使用  但是var可以先用后定义
        const:
            声明常量；
            一定要赋初值，且不能修改；
            一般常量用大写；
            块儿级作用域
            对数组和对象的元素修改不算对常量的修改，不会报错
                如：const TEAM = ['uzi','mxig','ming'];
                    TEAM.push('meiko');//语法没问题，地址不变，所以一般数组用const声明
        变量解构赋值：
            数组解构：
                如：const F4 = ['xiao','zhao','song','liu'];
                    let [x,z,s,l] = F4;
            对象解构
        模板字符串：
            反引号：内容中可以直接出现换行符,也可以进行变量拼接
                变量拼接：
                    let lovest = `xxxx`;
                    let out = `${lovest}是我心中最好的演员`；
        对象的简化写法：
            允许在大括号内直接写变量和函数作为属性和方法，简化书写：
                如：const S = {
                        name,
                        change(){....},
                    }
        **箭头函数：
            声明：let fn = (a,b) => { return a + b; }
            调用：fn(1,2);
            特性：
                this是静态的，this始终指向函数声明时所在作用域下的this的值
                不能作为构造函数实例化对象 即方法内不能this.name = name;
                不能使用arguments对象
                简写：
                    1）省略小括号：当形参有且仅有一个时候如：let add = n =>{ return n + n; }
                    2) 省略大括号：当代码体只有一条语句时如：let add = n => n + n;
                适合与this无关的回调，定时器、数组的方法回调
                不适合与this有关的回调，事件回调，对象的方法
        函数形参赋值：允许给函数形参开始赋初始值，但一般赋初值的位置要靠后   可以与解构赋值结合
        rest参数：用于获取函数的实参用来代替arguments
            如：function data(...args){
                    console.log(args);
                }
                data('柏芝','阿娇');
                会打印一个数组，不同于arguments打印一个obj对象
            rest参数必须放到参数的最后
        扩展运算符：
            ...可以放在函数调用的实参里面  
            也可以进行参数合并如：
                const k = [1,2];
                const f = [3,4];
                const z = [...k,...f];
            数组克隆：
            将伪数组转化为真正的数组
        **symbol：类似于字符串的数据类型
            值唯一，用来解决命名冲突问题
            不能进行运算 拼接 对比
            定义的对象属性不能用for...in循环遍历，但可以使用Reflect.ownKeys来获取对象的所有键名
            创建：
                let s = Symbol();
                let s2 = Symbol('尚硅谷');
                symbol.for创建对象
                    let s3 = Symbol.for('xxx');
            使用：安全的给对象添加属性和方法
        USONB数据类型:
            u undefined
            s string symbol
            o object
            n null number
            b boolean
        迭代器：是一种接口，为各种不同的数据结构提供统一的访问机制
            for..of遍历数组：of保存键值，In保存键名
                const xiyou = ['唐僧'，'孙悟空','猪八戒','沙僧'];
                for(let v of xiyou){
                    console.log(v)
                }
        生成器：异步编程解决方案，语法行为与传统函数完全不同   其实就是一个特殊的函数
            声明：function * fun(){}  借助迭代器的next方法运行
            生成器函数中可以出现yield语句后面跟表达式或者变量 
                可以理解yield为函数代码的分割符，用next方法来控制向下执行，可以用for..of遍历
            参数传递：
                next可以传入实参的 next参数是上一个yield
            解决了回调地狱的问题
        *promise：异步编程新解决方案，语法上是一个构造函数，用来封装异步操作并可以获取其成功和失败结果
            基本使用：             
              //实例化promise对象
              //三个状态，一个是初始化一个成功一个是失败
              const p = new Promise(function (resolve, reject){
                  //可以做一些异步操作
                setTimeout(function (){
                    // //对象状态成功
                    // let  data = '数据库中的用户数据';
                    // //resolve函数调用
                    // resolve(data);

                    //对象状态失败
                    let err = '数据读取失败';
                    //reject函数调用
                    reject(err);
                },1000);
              });
              //调用promise对象的then方法
                //两个形参，成功的叫value，失败的叫reason
                p.then(function(value){
                    console.log(value);
                },function (reason){
                    console.error(reason);
                });
            读取文件：
            封装ajax请求：
            Promise.protoype.then:
                then方法的返回结果是Promise对象，对象状态由回调函数的结果决定
                    如果回调函数中返回结果是非promise类型的属性，状态为成功，返回值为对象的成功值
                    是promise  可以链式调用解决回调地狱
                    抛出错误
            catch方法：
        set:数据结构set集合类似于数组但是成员的值是唯一的，集合实现了iterator接口，可以用for..of遍历
            set入门：  
                //声明一个set
                let s = new Set();
                let s2 = new Set(['大事','小事','好事','小事']);
                //自动去重，跟数学里面集合很像
                console.log(s2);
                //元素个数
                console.log(s2.size);
                //添加新元素
                s2.add('喜事');
                //删除元素
                s2.delete('坏事');
                //检测集合中是否有某元素 返回true和false
                s2.has('好事')
                for (let v of s2){
                    console.log(v);
                }
            去重：let result = [...new Set(arr)];
            交集：先去重为re.filter(用has方法)
            并集：let union = [...new Set([...arr,...arr2])];
        Map:键值对集合，也实现了iterator接口
            size: 元素个数
            set: 添加新元素
            get: 返回键名对象的键值
            has: 检测是否包含某元素，返回布尔值
            clear: 清空集合
        class：

Vue

#指令：
    v-text:设置文本，设置部分文本可以使用插值表达式：{{ }}   在data中写数据
    v-html：设置标签的innerHTML  与v-text不同可以识别html标签   在data中写数据
    v-on：1、为元素绑定事件 如：v-on:onclick绑定点击事件（简写：@click）     在methods中写方法就行  方法内部通过this关键字可以访问定义在data中数据
         2、传递自定义参数,事件修饰符  .enter 可以限制触发的按键为回车
    v-show:切换元素的显示和隐藏  值为true元素显示,值为false元素隐藏  原理是修改元素的display,实现显示隐藏
    v-if：根据表达值的真假,切换元素的显示和隐藏  原理是操纵dom元素  表达式的值为true,元素存在于dom树中,为false,从dom树中移除
    v-bind:设置元素的属性(比如:src,title,class) 简写的话可以直接省略v-bind,只保留 :属性名
    v-for:根据数据生成列表结构    push  sift  splice删除元素
         <div id="app">
          <ul>
             <li v-for="(item,index) in arr" :title="item">
             {{ index }}{{ item }}
            </li>
          </ul>
        </div>
        var app = new Vue({
                el: "#app",
                data: {
                  arr: [1, 2, 3, 4, 5],
                  objArr: [
                    { name: "jack" }, 
                    { name: "rose" }
                    ]
                }
              })

    v-model：获取和设置表单元素的值（双向数据绑定）
#网络应用
    axios结合Vue
        axios:功能强大的网络请求库  先导入 
            axios.get(地址？查询字符串如key=value&key2=value2).then(function(response){},function(err){})
            axios.post(地址,参数对象如{key:value,key2:value2}).then(function(response){},function(err){})