前端知识点（更新中）

1，怎么定义(获取)vue-router的动态路由

1.通过query配置的：
this.$route.query
this.$route.query.workname

 2.通过params配置的：
this.$route.params
this.$route.params.id

2，vue有几种路由模式

有两种---history和hash

在router/index.js的文件中来设置
const router = new VueRouter({
  routes,
  mode:"history"/mode:"hash",
})

3, vue常见的通信方式有哪些？

第一种：props和$emit
用法： 父组件中：<search :data="searchdata"></search>
      子组件中： 用props:[](不常用)
      			props:{
        				swiderdata:{
            			type:Array,
            			required:true,
            			default:xxx
        				}
        		}(常用)		
        		
第二种：中央事件总线EventBus(基本不用)

第三种：vuex(状态管理器)
用法：

主要文件index.js

import { mutations } from './mutations'
import { getters } from './getters'
import { actions } from './actions'  
//这三个是把vuex状态进行了分割成独立的状态好方便编写 
//先定义一个变量store再把通过es6的语法可以把变量导出去
//即 const store = new Vuex.Store({}) new一个Vuex.Store对象赋值给一个变量
//export default store    通过es6语法导出

const store = new Vuex.Store({
	//state：{}主要用来进行数据管理的的data(state访问状态对象)
    state: {
        song: {  //当前所播放的歌曲对象
            name: "未播放音乐", //歌曲的名字
            songName: "", //暂时存储歌曲的名字，当歌曲可以播放时就将songName的值赋予name属性
            author: "未知", //歌手名
            musicUrl: "",//歌曲的地址
            // https://i.loli.net/2020/03/26/k1KaSpxN47qi9Xc.jpg  是默认的图片路径，
            // 因为在搜索页面获取的歌曲数据时没有图片的
            picUrl: "https://i.loli.net/2020/03/26/k1KaSpxN47qi9Xc.jpg",
            id: "",
            lyric: []//存储歌词的数组
        },
        list: [],//播放列表数组
        index: 0,//记录当前所播放的音乐在播放列表数组的索引值,
        unreadComments: [],//存储未读的评论
        unreadMessages: [],//存储未读的留言
        isLogin: false,
        admin: {}
    },
    mutations,
    getters,
    actions
})
export default store;

推荐参考：https://www.jianshu.com/p/f393bdd3b03d写的太棒了
用：this.$store.commit(’ mutations里的函数名’，可加参数)

第四种：$parent和$children
通过this.$parent和this.$children来控制父组件和子组件的元素和方法，这里的子组件便可以控制所以在他下面的所以子组件

第五种： 给子组件一个ref值
通过this.$refs.给的ref值来控制子组件数据和方法

5，vue中ref的作用是什么？

ref被用来给DOM元素或子组件注册引用信息，引用信息会根据父组件的$refs对象进行注册
简单来说，如果在普通的dom元素上使用，引用的就是元素；如果在子组件上，引用的就是组件实例
注意：只要想要在vue中直接操作dom元素，就必须用ref属性进行注册
另外一种操作的方法是：

uniapp中：
mounted() {
			const query = uni.createSelectorQuery().in(this);
			query.select('#content').boundingClientRect(data => {
				console.log("得到布局位置信息" + JSON.stringify(data));
				console.log("节点离页面顶部的距离为" + data.top);
			}).exec();
		},

6，vuex中的getter特征是？

1 getters可以对state进行计算操作，它就是store的计算属性
2 虽然在组件内可以用计算属性，但是getters可以在多个组件之间复用
3 如果一个状态只在一个组件内使用，是可以不用getters

7，vuex中mutation特性是？

mutation是修改state状态的唯一路径，action是通过操作mutation来修改state的

8, vuex有哪几种属性

有五种，分别是state, getter, mutation, action, module

9, 对vue的理解？

1数据驱动，双向绑定，底层通过Object.defineProperty()来定义的数据set,get函数原理实现
2 组件化开发
3 单页面引用

10 对MVVM的理解？

m:model 模型， 就是vue中的data
v: view 视图 ，就是vue中的html
vm: 视图模型， 是实现双向绑定的关键,可以根据data改变html，也可以通过html来改变data

11， vue中定义组件

1  新建组件：一般在components文件夹下新建组件文件 -->组件名.vue
2  导入组件：在需要的页面通过 import 组件名 from ‘位置’
3  注册组件：component：{组件名}
4  使用组件：<组件名></组件名>

12，对vue生命周期的理解？

总共分为8个阶段
1 创建前/后
2 载入前/后
3 更新前/后
4 销毁前/后

创建前/后：
在beforeCreated阶段，vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了$el还没有

载入前/后：
在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。
在mounted阶段，vue实例挂载完成，data.message成功渲染

更新前/后：
当data变化时，会触发beforeUpdate和updated方法

销毁前/后：
在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了，事件监听以及和dom的绑定，但dom结构依然在

13，vue-router有那几种钩子(导航守卫)？

推荐参考：https://www.jianshu.com/p/45eee0b724d2
“导航”表示路由正在发生变化
导航守卫表示当导航开始变化到导航变化结束的那段时间里，根据导航的变化做出一些响应。比如要跳转到一个页面时，看他是不是登录了，没登录的话，得让他先登录。
主要是通过跳转到某处或者取消跳转来守卫导航，
导航守卫包括 全局导航守卫 和 局部导航守卫
1,全局导航钩子：

vue-router全局有三个守卫
router.beforeEach：全局前置守卫，进入路由之前
router.beforeResolve：全局解析守卫，在beforeRouteEnter调用之后调用
router.afterEach：全局后置钩子，进入路由之后

import Vue from 'vue'
import Router from 'vue-router'
import route from './router'

Vue.use(Router)

const router = new Router({
  routes: route // 路由列表
})

// 模拟用户登录与否
const HAS_LOGIN = true;

// 全局前置守卫
// 在Router实例上进行守卫
router.beforeEach((to, from, next) => {
  // to和from都是路由实例
  // to：即将跳转到的路由
  // from：现在的要离开的路由
  // next：函数
  // 如果未登录，就跳到登录页，如果登录了，选择哪个页面跳到哪个页面；如果登录了还去了login页面，就跳到首页。
  if (to.name !== 'login') {
    if (HAS_LOGIN) next()
    else next({ name: 'login' })
  } else {
    if (HAS_LOGIN) next({ name: 'home' })
    else next()
  }
})

// 全局解析守卫
router.beforeResolve((to,from.next) => {

})

// 全局后置钩子
router.afterEach((to,form) => {
    
})

export default router

vue-router中元信息meta的妙用

{
    path:"/test",
    name:"test",
    component:()=>import("@/components/test"),
    meta:{
        title:"测试页面", //配置title
        keepAlive: true //是否缓存
    }
}

1、配置此路由的标题title

//main.js中的代码
router.beforeEach((to,from,next)=>{
    if(to.meta.title){
        document.title=to.meta.title
    }
    next()
})

2、配置组件是否需要缓存

2，路由独享的守卫

比如：给home页面单独配置守卫

  {
    path: '/',
    name: "home",
    component: Home,
    // 路由独享守卫
    beforeEnter: (to, from, next) => {
      if(from.name === 'about'){
        alert("这是从about来的")
      }else{
        alert("这不是从about来的")
      }
      next();  // 必须调用来进行下一步操作。否则是不会跳转的
    }
  }

3路由组件内的守卫

beforeRouteEnter()：进入路由前
beforeRouteUpdate()：路由复用同一个组件时
beforeRouteLeave()：离开当前路由时

在Home.vue页面中举个例子

export default {
  // 组件内守卫
  // 因为这个钩子调用的时候，组件实例还没有被创建出来，因此获取不到this
  beforeRouteEnter (to, from, next) {
    console.log(to.name);
    // 如果想获取到实例的话
    // next(vm=>{
    //   // 这里的vm是组件的实例（this）
    // });
    next();
  },
  // 路由即将要离开的时候调用此方法
  // 比如说，用户编辑了一个东西，但是还么有保存，这时候他要离开这个页面，就要提醒他一下，还没保存，是否要离开
  beforeRouteLeave (to, from, next) {
    const leave = confirm("确定要离开吗？");
    if(leave) next()    // 离开
    else next(false)    // 不离开
  },
}

14， vue-router跳转方式

query
1 this.$router.push({
	path:'/home/sort/detail',
	query:{
		  id:'abc'
	   }
})

params
2 this.$router.push({
	name:'/home/sort/detail',
	params:{
		  id:'abc'
	   }
})

3 thsi.$router.replace()
4 this.$router.go(n)
5 <router-link :to="{path:'/xxx/xxx',query:{id:'abc'}}">

15, vue初始化页面闪动问题

可以使用v-cloak解决闪动问题
v-cloak指令和css规则如[v-cloak]{dispaly:none}一起用时，这个指令可以隐藏未编译的mustache（胡须）{{]}标签，直到实例准备完毕

16 axios是什么

axios是一个基于promise的http库，简单来说就是可以发送get,post请求
可以参考我的https://editor.csdn.net/md/?articleId=107818199

17，在vue事件中传入$event，使用e.target和e.currentTarget有什么区别？

1 e.target:属于事件发生者(鼠标点击元素)
2 e.currentTarget:属于事件绑定元素

17， vue封装axios构成api请求

第一种：集成式：

在src文件夹下建立api文件夹来做集成式封装axios
首先建立最基本的request.js(封装axios实例)
在这里主要有四部分
1，创建axios实例：

const instance = axios.create({
    baseURL: process.env.BASE_API, // node环境的不同，对应不同的baseURL
    withCredentials: true, // 允许携带cookie
    // 也是为了适应多个后台或者开发的时候的api地址和发布的时候的api地址不一样这种情况。
    // 超时时间
    timeout: 3000
});

注意这里的baseURL需要搭配在router文件夹下的index.js来使用

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})
export default router

2，请求拦截：

// 请求拦截器   创建axios对象名.interceptors.request.use(config => {})
// 请求拦截器
instance.interceptors.request.use(
    config =>{
        //发请求前做一些处理，数据转化，配置请求头，设置token，设置loading等
        config.data = JSON.stringify(config.data)
        config.headers = {
            'Content-Type': 'application/x-www-form-urlencoded'
        }
        return config
    },
    error =>{
        Promise.reject(error)
    }
)

3，响应拦截：

instance.interceptors.response.use(
    response => {
        return response
    },
    erroe => {
        if(error&&error.response){
            switch(error.response.status){
                case 400:
                    error.message = '错误请求'
                    break
                case 401:
                    error.message = '未授权，请重新登录'
                    break
                default:
                    error.message = `连接错误${error.response.status}`
            }
        }else {
            // 超时处理
            if (JSON.stringify(error).includes('timeout')) {
                Message.error('服务器响应超时，请刷新当前页')
            }
            error.message('连接服务器失败')
        }
         /***** 处理结束 *****/
        //如果不需要错误处理，以上的处理过程都可省略
        return Promise.resolve(error.response)
    }
)

4，封装请求，并且导出封装请求

//4.封装请求，并且导出封装请求
export default function(type, url, data, options){
    if(type === "get"){
        return instance.post(url,data)
    }
    else{
        if(options){
            return instance.post(url,data)
        }else{
            return instance.post(url,data,options)
        }
    }
}

接下来就是封装api根据不同的应用场景建立不同的文件来封装api，这里封装音乐模块的api
所以新建music.js文件
这里有三个部分
1， 导入之前封装的请求

import request from './request'

2，构建api的头或者有代表性的前缀

//这里的两种写法都可以，看个人的兴趣
//第一种：
// const baseUrl = "https://autumnfish.cn"   //这是域名，代表有被访问的域名
// const baseUrl = "/api"  //这是一个代表请求的的头需要配合vue.config.js里面的代理来配合使用
const baseUrl = ""    //这是什么都不加
//第二种:
// const api = "/api"
//const api = ""

vue.config.js

module.exports = {
	 // 跨域
  devServer: {
    // open: true, //是否自动弹出浏览器页面
    // host: "localhost",
    port: '80',
    // https: false, //是否使用https协议
    // hotOnly: true, //是否开启热更新
    proxy: {
      // proxy all requests starting with /api to jsonplaceholder
      '/api': {
        target: 'http://localhost:4000',   //代理接口(一般是需要访问的域名)
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''    //代理的路径
        }
      }
    },
  }
}

这是更加详细的vue.config.js参考：

module.exports = {

  configureWebpack: {
    externals: {
      'vue': 'Vue',
      'vue-router': 'VueRouter',
      'vuex': 'Vuex',
      'axios': 'axios',
      'element-ui': 'ELEMENT',
      "vuescroll": "vuescroll"
    },
    resolve: {
      alias: {
        'components': '@/components',
        'content': 'components/content',
        'common': 'components/common',
        'assets': '@/assets',
        'network': '@/network',
        'views': '@/views',
        'utils': '@/utils',
      }
    }

  },
  productionSourceMap: false,

  // 关于打包的设置
  publicPath: '/',//vue-cli3.3+新版本使用
  // baseURI: '/',//vue-cli3以下版本使用
  outputDir: 'dist',//构建输出目录
  assetsDir: 'assets',//静态资源目录(js,css,img,fonts)
  lintOnSave: false,//是否开启eslint保存检测,有效值: true || false || 'error'

  // 跨域
  devServer: {
    // open: true, //是否自动弹出浏览器页面
    // host: "localhost",
    port: '80',
    // https: false, //是否使用https协议
    // hotOnly: true, //是否开启热更新
    proxy: {
      // proxy all requests starting with /api to jsonplaceholder
      '/api': {
        target: 'http://localhost:4000',   //代理接口
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''    //代理的路径
        }
      }
    },
  },

}
// module.exports = {
//     devServer: {
//         proxy:"http://localhost:4000",
//         port: 8080
//     }
// }

3, 构造不同的api请求
其中baseUrl/api是根据第2的来写的

// 获取banner
export const GetBanner = (data) => request("get", baseUrl + "/banner", data);

// 获取推荐歌单
export const GetRecommend = (data) => request("get", baseUrl + "/personalized", data);

这样一个axios对象就封装好了，接下来就是如何去调用这些api了
在需要调用api的**.vue**文件下导入所需的api

import { GetBanner, GetRecommend, GetSingle, GetMv } from "../../api/music"

在methods:{}下新建异步改同步方法

// 获取banner
    async getbanner() {
      const result = await GetBanner()
      this.banners = Object.freeze(result.banners)
    },

之后在需要的地方调用就可以了我这里是在created(){}时

this.getbanner();

18, v-cloak的使用

参考：https://blog.csdn.net/a5252145/article/details/107316953?utm_medium=distribute.pc_category.427508.nonecase&depth_1-utm_source=distribute.pc_category.427508.nonecase
v-cloak: 使用 v-cloak 指令可以有效解决屏幕闪动。
有时候，页面没渲染之前就会出现vue代码块，例如下图。使用v-cloak可以很好解决这种问题。

<template>
    <div class="hello">
        <span v-cloak>{{ content }}</span>
    </div>
</template>

<script>
export default {
    name: "hello",
    data() {
        return {
            content: "测试"
        };
    }
};
</script>

<style scoped>
/* v-cloak这个属性会在页面渲染前作用于对应dom 在渲染完毕这个里面的样式将被移除 */
[v-cloak] {
    display: none;
}
</style>

给带{{}}的标签加上v-cloak属性，同时设置属性的样式为[v-cloak]{display:none;}

19, 按键修饰符

参考：https://cn.vuejs.org/v2/guide/events.html#%E6%8C%89%E9%94%AE%E4%BF%AE%E9%A5%B0%E7%AC%A6

<input v-on:keyup.13="submit">
为了在必要的情况下支持旧浏览器，Vue 提供了绝大多数常用的按键码的别名：

.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
<input v-on:keyup.enter="submit"> //就是enter被按下松开时触发submit方法

同时满足多个条件才触发

可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。

.ctrl
.alt
.shift
.meta
注意：在 Mac 系统键盘上，meta 对应 command 键 (⌘)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。在 Sun 操作系统键盘上，meta 对应实心宝石键 (◆)。在其他特定键盘上，尤其在 MIT 和 Lisp 机器的键盘、以及其后继产品，比如 Knight 键盘、space-cadet 键盘，meta 被标记为“META”。在 Symbolics 键盘上，meta 被标记为“META”或者“Meta”。

例如：
<!-- Alt + C -->  这个是alt+C键
<input v-on:keyup.alt.67="clear">

<!-- Ctrl + Click -->  这个是按住ctrl再点击
<div v-on:click.ctrl="doSomething">Do something</div>

使用：
参考:https://blog.csdn.net/kuangshp128/article/details/78159562?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2_allbaidu_landing_v2~default-1-78159562.nonecase

一、常见的键盘事件
1、keydown键盘按下
2、keyup键盘抬起
补充说明:如果要确定用户按下是哪个键盘需要使用keyCode===?来确认键盘

二、在vue中键盘事件一般的使用
1、在模板中定义事件名称,并传递$event作为参数

<input type="text" placeholder="请输入书名" ref="inputBook" @keydown="submit($event)"/> 这种是只判断了键盘按下，不管是哪键盘按下都会触发，在触发的条件里通过判断传入参数e来判断是否是指定的按键按下
1
2、在js中确认键盘按键进行相对于的操作

methods:{
    submit(e){
        // key.Code === 13表示回车键 
        if(e.keyCode === 13){
            //逻辑处理
        }
    }
}
三、使用vue的语法糖进行键盘事件操作
1、在模板
<input type="text" placeholder="请输入书名" ref="inputBook" @keydown.13="submit"/> //这种是直接判断了按键
1
2、在js中直接使用函数

methods:{
    submit(){
        // 业务逻辑处理
    }
}

四、阻止事件冒泡
只需要@click改成@click.stop="?" 即可

五、阻止默认事件
只需要@click改成@click.prevent="?"即可

20，路由参数解耦

通过 props 解耦

const router = new VueRouter({
    routes: [{
        path: '/user/:id',
        component: User,
        props: true(这个设置后可以通过router路由来进行传参)
    }]
})
//在路由这设置props:true

将路由的 props 属性设置为 true 后，组件内可通过 props 接收到 params 参数

export default {
    props: ['id'],
    methods: {
        getParamsId() {
            return this.id
        }
    }
}

22， html5语义化标签

html5手册语义化标签：
1 article
2 section
3 aside
4 hgroup
5 header
6 footer
7 nav
8 time
9 mark
10 figure
11 figcaption
12 contextmenu+menu

23 下列关于HTTP协议的描述

HTTP协议规定了浏览器与服务器通信的四个步骤，依次是：建立连接、发送请求、接收响应、关闭连接
HTTP请求报文中，包含请求方式、请求路径、协议版本、消息头等内容
HTTP响应报文中，包含状态码、状态名、协议版本、消息头等内容

24，表格常用属性

表格标记的常用属性有9个：
cellpadding：单元格边沿与其内容之间的空白
cellspacing：单元格之间的空白
border：表格边框的宽度（也可以理解我边框的粗细程度）
height：表格高度 width：表格的宽度
bgcolor：表格背景颜色
align：表格相对周围元素的对齐方式（也可以理解为表格中的文字内容的对齐方式）
frame：规定外侧边框哪些部分是可见的 rules：规定内侧边框哪些部分是可见的

25，一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下：

<meta name="viewport" content="width=device-width, initial-scale=1.0">
width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
height：和 width 相对应，指定高度。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放。

26 ，BFC块级格式化上下文

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与,
哪些情况会产生BFC:
根元素
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible （overflow-hidden 可作为常用 BFC 布局属性使用）
只要元素可以触发BFC，就无须使用 clear:both 来清除浮动的影响

27, HTML5 事件可以触发多少次？

多次

28，浮动元素重叠

1、行内元素与浮动元素发生重叠，边框、背景、内容都会显示在浮动元素之上
2、块级元素与浮动元素发生重叠，边框、背景会显示在浮动元素之下，内容会显示在浮动元素之上

29， html的标签style属性要使用驼峰

<a href=”#” οnmοuseοver=”this.style.fontSize=‘30px’”>注册
在html这里使用fontSize 这样的驼峰属性
在css这里使用font-size 在css里使用-来连接

30，浏览器渲染流程

1，解析HTML并构建DOM树
2，构建render树
3，布局render树
4，绘制render树

31 万维网用HTML标识分布因特网上的各种文档。

	这是错误的  

万维网用URL标识分布因特网上的各种文档。

32 setTimeout的使用

33，关于javaScripts的执行顺序

head部分中的JavaScripts会在被调用的时候才执行。

body部分中的JavaScripts会在页面加载的时候被执行。

34函数解析，变量提升，函数声明提升，函数表达式不会被提升？

原题：

var foo=function(x,y){
return x-y;
}
function foo(x,y){
return x+y;
}
var num=foo(1,2);

变形后：

//variable hoisting变量提升
var foo;//foo#1
var num;
 
//function declaration hoisting函数声明提升
function foo(x, y){//foo#2
   return x + y;
}
**加粗样式** 
//function expression NOT hoisted函数表达式不会被提升
foo =function(x, y){//foo#3
   return x - y;
}
 
num = foo(1, 2);//这里使用foo#3

35，获取元素的几个办法

.value() 用在表单元素上，用来设置获取 input 或 select 的值
.html() 设置或返回的是源代码
.text() 设置或返回的是纯文本内容
.attr() 设置或返回被选元素的属性值

36 正则匹配，

var str1=new RegExp(“e”);
document.write(str1.exec(“hello”));

exec() 方法是一个正则表达式方法。
exec() 方法用于检索字符串中的正则表达式的匹配。
该函数返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。
还有一个test()方法，用于检测字符串是否匹配某个模式，返回值为boolean

37，关于nth-child()

第一种：简单数字序号写法

:nth-child(number)

直接匹配第number个元素。参数number必须为大于0的整数。

例子：

li:nth-child(3){background:orange;}/*把第3个LI的背景设为橙色*/
第二种：倍数写法
:nth-child(an)

匹配所有倍数为a的元素。其中参数an中的字母n不可缺省，它是倍数写法的标志，如3n、5n。

例子：

li:nth-child(3n){background:orange;}/*把第3、第6、第9、…、所有3的倍数的LI的背景设为橙色*/

第三种：倍数分组匹配
:nth-child(an+b) 与 :nth-child(an-b)

先对元素进行分组，每组有a个，b为组内成员的序号，其中字母n和加号+不可缺省，位置不可调换，这是该写法的标志，其中a,b均为正整数或0。如3n+1、5n+1。但加号可以变为负号，此时匹配组内的第a-b个。（其实an前面也可以是负号，但留给下一部分讲。）

例子：

li:nth-child(3n+1){background:orange;}/*匹配第1、第4、第7、…、每3个为一组的第1个LI*/

li:nth-child(3n+5){background:orange;}/*匹配第5、第8、第11、…、从第5个开始每3个为一组的第1个LI*/

li:nth-child(5n-1){background:orange;}/*匹配第5-1=4、第10-1=9、…、第5的倍数减1个LI*/

li:nth-child(3n±0){background:orange;}/*相当于(3n)*/

li:nth-child(±0n+3){background:orange;}/*相当于(3)*/

第四种：反向倍数分组匹配
:nth-child(-an+b)

此处一负一正，均不可缺省，否则无意义。这时与:nth-child(an+1)相似，都是匹配第1个，但不同的是它是倒着算的，从第b个开始往回算，所以它所匹配的最多也不会超过b个。

例子：

li:nth-child(-3n+8){background:orange;}/*匹配第8、第5和第2个LI*/

li:nth-child(-1n+8){background:orange;}/*或(-n+8)，匹配前8个（包括第8个）LI，这个较为实用点，用来限定前面N个匹配常会用到*/

第五种：奇偶匹配
:nth-child(odd) 与 :nth-child(even)

分别匹配序号为奇数与偶数的元素。奇数(odd)与(2n+1)结果一样；偶数(even)与(2n+0)及(2n)结果一样。

38HTML5中： 自关闭的斜线(/)对

area,
base,
br,
col,
command,
embed,
hr,
img,
input,
keygen,
link,
meta,
param,
source,
track,
wbr空标签无效，言即不再需要自闭合(/)这个小尾巴了，如果要写上也是可以的。

39，下面哪些是HTML5 新增的表单元素

datalist
output

40， 盒子模型** 这是个重点问题

标准盒子模型 ＝ margin + border + padding + width （width = content ）

IE盒子模型 ＝ margin + width（width = border + padding + content ）

41，关于append，appendTo的用法

$(document).ready(function(e){
var $li=$("
张三
");
$("ul").append($li);
});
$(document).ready(function(e){
var $li=$("
张三
");
$($li).appendTo("ul");
});

${(}^{\prime }u{l}^{\prime }).append($li)是把($li)加到$('ul)的后面
$($li).appendTo(“ul”)是把($ul)加到$('li)的前面

42 html5新增的一些东西

1. 注意题目问的是类型/元素/属性
2. 新增的表单元素：output、datalist、keygen
3. 新增的表单类型(type=“xxx”):color设色器、date日期选择器、datetime(utc时间)、datetime-local(无时区)
   email(包含email的输入域)、month（月份）、number（数值）、range(范围)、search（搜索）、tel(电话号码)
   url、week
4. 新增的表单属性：autocomplete（自动补全）、autofocus（自动聚焦）、required(是否必选)、height（高度）、width（宽度）
   multiple（多文件上传）、max（最大值）、min、step、list、pattern（模式匹配/正则）、placeholder（默认值）、novalidate(提交表单时不校验email/tel这些需要校验的表单类型)、
   form（表单元素可以在form之外，但是可以指定属于哪个form，会一起发送）、formaction（请求地址）、formmethod（form元素的请求方法,get/post这些）、formenctype、formnovalidate

43，str.replace(匹配的值，替换的值)

用法: str,replace('被替换的', '替换的')
  以下代码的执行后，str 的值是：
var str = "Hellllo world";
str = str.replace(/(l)\1/g, '$1');

解析

1、定义
(l)表示第一个分组里有l
\1表示所获取的第1个()匹配的引用
/g表示全局匹配
$1表示第一个分组里的值l
2、所以
(l)\l 表示匹配两个连续字符ll，即ll
(l)\l/g 表示全局匹配两个连续字符ll即llll
str.replace(/(l)\1/g, '$1') 表示将ll替换成l
3、最终
Hellllo =》 Hello

44，一些方法，转换方法

(()=>{}).length; 获取方法形参个数，形参为0

1 & 2 1=0001 2=0010  按位与运算(&)，同为1才为1，否则返回0   按位或运算(|)，有1就出1，同为0才出零 

+[] 隐式类型转换，因为[]是对象，所以toPrimitive->valueOf->toString为''，结果就是+''===0

[1,2,-3].reduce((a, b) => a - b, 0)

45，audio/video的方法和事件

方法：load() play() pause()
事件：play() playing() pause() seeked() seeking() abort()当音频/视频的加载已放弃时触发

46,Number();的转换

下面几个都会转化为0：

Number()
Number(0)
Number('')
Number('0')
Number(false)
Number(null)
Number([])
Number([0])

47, 重置vue的样式

因为vue打开的第一个页面一定是App.vue,所以在这个的style标签里写入一些重置样式就可以了

<style lang="scss">
#app {
  body,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  hr,
  p,
  blockquote,
  dl,
  dt,
  dd,
  ul,
  ol,
  li,
  pre,
  form,
  fieldset,
  legend,
  button,
  input,
  textarea,
  th,
  td {
    margin: 0;
    padding: 0;
  }
  body,
  button,
  input,
  select,
  textarea {
    font: 12px "microsoft yahei";
    line-height: 1.5;
    -ms-overflow-style: scrollbar;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: 100%;
  }
  ul,
  ol {
    list-style: none;
  }
  a {
    text-decoration: none;
    cursor: pointer;
  }
  a:hover {
    text-decoration: underline;
  }
  img {
    border: 0;
  }
  button,
  input,
  select,
  textarea {
    font-size: 100%;
  }
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }
  .clear {
    clear: both;
  }
  .fr {
    float: right;
  }
  .fl {
    float: left;
  }
  .block {
    display: block;
    text-indent: -999em;
  }
}
</style>

48，关于html节点问题

DOM树中总共分为如下几种节点格式：

Element类型（元素节点）
Text类型（文本节点）
Comment类型（注释节点）
Document类型（document节点）

document可以说是一种节点格式，但节点树的根节点也叫document，所以第一题的说法太绝对，是错的。
所有的HTML elements（元素节点，其实就是HTML标签）都是element。
c加粗样式omments属于注释节点

49, vue中tag标签

tag 可以指定渲染成什么标签，比如＜router-link to=" / about” tag＝” Ii ”〉渲染的结果就是＜I i >
而不是a>。

50,@import和import的区别

51 Math.max()的使用

var a = [1,4,5,2,9];
下面求a中最大值正确的是

Math.max(a)
Array.max(a)
Math.max.call(null,a)
Math.max.apply(null,a)

解释： Math对象包含max()方法，用于确认一组数值中的最大值。该方法接收任意多个数值参数，不接受数组参数。

52 localStorage和sessionStorage使用和区别

用法：

  function subit() {
            let username = $('#username').val()
            let password = $('#password').val()
            console.log(username)
            console.log(password)
            window.localStorage.setItem("username", username)
            window.localStorage.setItem("password", password)
            sessionStorage.setItem('user1', username);
            sessionStorage.setItem('password1', password);
  }

区别：因为localStorage是存储在硬盘上的所以即使关闭了浏览器，下次再打开浏览器浏览该网站还是会保存的
而sessionStorage是会话的意思，所以当你关闭网站是该数据就会消失，所以sessionStorage常用做短期的
会话保持，localStorage常用做登录状态来保持，

53, vue过滤器filters

<div id=” app” >
{ { date | formatDate ) ) 
</div>

filters : { 
	formatDate : function (value) { ／／这里的 value 就是需要过滤的数据
	var d ate= new Date(value); 
	var year= date . getFullYear() ; 
	var month= padDate(date.getMonth() + 1) ; 
	var day= padDate(date . getDate()); 
	var hours= padDate(date . getHours()); 
	var minutes = padDate (date .getMinutes ()); 
	var seconds = padDate (date .getSeconds ()); 
	／／将整理好的数据返回出去
	return year + ’-’ + month +’-’ + day + ” + hours ＋ ’：’ ＋ m工 nutes
	+’: ’ + seconds ; 
	}
}
〈 ！ 一串联一〉
{ { message | filterA | filterB } } 

〈！一接收参数一一〉
{{ message | flterA('argl','arg2'）｝｝
这里的字符串缸gl 和 arg2 将分别传给过滤器的第二个和第三个参数，因为第一个是数据本身。

54，计算属性computed

<div id=”app”>
{{ reversedText }} 
</div> 

data ：{
	text :’123,456 ’ 
}

computed : { 
	reversedText: function () { 
	／／这里的 this 指向的是当前的 Vue 实例
	return this.text.split ( ’ , ’ ) . reverse() . join (’, ’ ); }
}

计算是有***返回值***的

55，自定义按键监听，修饰符

自己配置具体按键：

Vue.config.keyCodes.fl = 112; 
//全局定义后，就可以使用自@keyup.fl来自定义事件了
//一般就是 @keyup.keyCodes
< ！一只有在keyCode是13时调用vm.submit()->
<input @keyup.13 ＝“subm"> 

56， vue表单

 <div class="test_from">
          <input type="checkbox" v-model="toggle" :true-value="valuel" :false-value="value2" />
          <label>两个值采用勾选的一个框的形式选择一个，点上就是选择A，没有点上就是选择B</label>
          <p>你的选择是：{{ toggle }}</p>
          <p>{{ valuel }}</p>
          <p>{{ value2 }}</p>
          <br>

          <label>两个值采用列表的一个框的形式选择一个</label>
          <select v-model="selected">
            <option :value="{ number:123}">123</option>
            <option :value="{ number:456}">456</option>
          </select>
          {{selected.number}}
          <br>

          <label>复选框</label>
          <br>
          <input type="checkbox" v-model="checked" value="html" id="html">
          <label for="html">HTML</label> 
          <br> 
           <input type="checkbox" v-model="checked" value="css" id="css">
          <label for="css">CSS</label> 
          <br> 
           <input type="checkbox" v-model="checked" value="javascript" id="javascript">
          <label for="javascript">JavaScript</label> 
          <p>选择的项是{{checked}}</p> 
          <br> 

           <label>单选框</label>
          <br>
          <input type="radio" v-model="radio" value="html" id="html">
          <label>HTML</label> 
          <br> 
           <input type="radio" v-model="radio" value="css" id="css">
          <label>CSS</label> 
          <br> 
           <input type="radio" v-model="radio" value="javascript" id="javascript">
          <label>JavaScript</label> 
          <p>选择的项是{{radio}}</p> 
          <br> 
        </div>

data() {
    return {
      content:
        '<p><strong>1. 安装</strong></p> <pre><div class="hljs"><code class="lang-javascript">安装 mavon-editor:npm install mavon-editor --save </code></div></pre> <p>加粗样式<br /> <strong>2. 引入、配置</strong><br /> <em>在要使用markdown编辑器的组件内操作：</em></p>',
      toggle: false,
      valuel: "a",
      value2: "b",
      selected: "",
      checked:[ "html", "css"],
      radio:''
    };
  },

57，防抖和节流

一般理解就是：
防抖：是延时执行
节流：是间隔执行

防抖用于搜索框和滚动的监听事件处理，如果没有防抖，那么每输入一个字或者滚动屏幕，都会触发事件，甚至一秒钟触发几十次，性能就会浪费。

function debounce(fn, delay = 500) {
    
    let timer = null

    return function () {
        if (timer) {
            clearTimeout(timer)			//如果timer有定义，清空
        }
        timer = setTimeout(() => {
            fn.apply(this, arguments)
            timer = null
        }, delay)
    }
}

节流：滚动栏的位置查询，就能设置每0.5秒执行一次函数。

function throttle(fn, delay = 100) {
    let timer = null

    return function () {
        if (timer) {
            return
        }
        timer = setTimeout(() => {
            fn.apply(this, arguments)
            timer = null
        }, delay)
    }
}

58, 使用命令npm run build，让vue-cli通过webpack打包文件

在vue.config.js中设置

module.exports = {
  // 输出目录
  assetsDir: 'static',
  ...
 }

运行命令 npm run build
将会在项目目录下生产资源打包文件

59，dom中HTMLDivElement的正确继承关系是？

HTMLDivElement > HTMLElement > Element > Node > EventTarget

60, javascript中的promise

Promise 对象用于表示一个异步操作的最终完成 (或失败), 及其结果值.

 <script>
        const promise1 = new Promise((resolve, reject) => {
            resolve('succsee')
            setTimeout(() => {
                // promise有两种结果，一是执行成功的方法，二是执行失败的方法，而且只能走一条并且不能返回，只能单向传递
                // resolve('success');
                // reject('fail');
            }, 300);
        });

        // 成功执行用promise实例名.then
        promise1.then((value) => {
            console.log('promise1.then:' + value);
            // expected output: "foo"
        });

        // 失败执行用promise实例名.catch
        promise1.catch((value) => {
            console.log('promise1.catch:' + value)
        })

        console.log(promise1);
// expected output: [object Promise]


    </script>

css篇

1，css的引入方式有几种
4种，内嵌，内联，外链，import

2，用css画一个三角形，圆形，椭圆

参考：https://www.cnblogs.com/lhb25/p/css-and-css3-triangle.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css画三角形，圆形，椭圆</title>
    <style>
        #circle{
            width: 150px;
            height: 150px;
            border-radius: 50%;
            background-color: #232323;
        }
        #elipse{
            width: 200px;
            height: 100px;
            border-radius: 50%;
            background-color: #232323;
        }
        #triangle{
            width: 0;
            height: 0;
            border-left: 200px solid transparent;
            border-right: 20px solid transparent;
            border-bottom: 150px solid #232322;
        }
    </style>
</head>
<body>
    <div id="circle"></div>
    <div id="elipse"></div>
    <div id="triangle"></div>
    
</body>
</html>

3，rem的使用
使用方法：rem只相对于根元素html的font-size即只需要设置根元素的font-size,其他元素使用rem单位设置成相应的百分比即可；

html{
	font-size:62.5%;
}
body{
	font-size:12px;
	font-size:1.2rem;
}
p{
	font-size:14px;
	font-size:1.4rem;
}

 		@media only screen and (min-width:320px){
            html{
                font-size:62.5% !important
            }
        }
        @media only screen and (min-width:640px){
            html{
                font-size:125% !important
            }
        }
        @media only screen and (min-width:750px){
            html{
                font-size:150% !important
            }
        }
        @media only screen and (min-width:1242px){
            html{
                font-size:187.5% !important
            }
        }

4 左侧固定右侧自适应div+css

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>左侧固定宽带，右侧自适应宽带</title>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
        }

        .box01:after{
            content: "";
            height: 0;
            line-height: 0;
            display: block;
            visibility: hidden;
            clear: both;
        }
        .right_box {
            background-color: blueviolet;
            height: 400px;
            margin-left: 240px;

        }

        .left_box {
            width: 240px;
            height: 400px;
            float: left;
            background-color: aquamarine;
        }


        /* 利用flex实现 */
        .box02 {
            display: inline-block;
        }

        .flex_box {
            display: flex;
        }

        .flex_left_box {
            flex: 1;
            background-color: aquamarine;
        }

        .flex_right_box {
            flex: 2;
            background-color: blueviolet;
        }
    </style>
</head>

<body>
    <div class="box01">
        <div class="left_box">左侧盒子</div>
        <div class="right_box">右侧盒子</div>
       
    </div>


    <div class="box02">
        <div class="flex_box">
            <div class="flex_left_box">左侧盒子</div>
            <div class="flex_right_box">右侧盒子</div>
        </div>
    </div>

</body>

</html>

5, 消除display:inline-block的间距
给父元素设置font-size:0;
然后给自己元素font-size有值就看了

6， display:none;与visibility:hidden的区别
display:none;使用该属性后，html元素（对象）的宽度，高度等各种属性都将“丢失“”；
visibility:hidden;使用该属性后，html元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也就是说它仍具有高度，宽度等属性值

7，css选择器优先级

！important > 行内样式 > id > 类 > 标签|伪类|属性选择 > 伪对象 > 继承 > 通配符

8， 简述对WEB语义化的理解
就是让浏览器更好的读懂你写的代码，在进行HTML结构，表现，行为设计时，尽量使用语义化标签，使程序代码简介明了，易于进行操作和网站SEO

9， 语义化标签的意义和有哪些语义化标签
参考：https://blog.csdn.net/eeeecw/article/details/80591511

一、什么是HTML语义化标签
语义化的标签，旨在让标签有自己的含义。

<p>一行文字</p>
<span>一行文字</span>
如上代码，p 标签与 span 标签都区别之一就是，p 标签的含义是：段落。而 span 标签责没有独特的含义。

二、语义化标签的优势
代码结构清晰，方便阅读，有利于团队合作开发。
方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以语义的方式来渲染网页。
有利于搜索引擎优化（SEO）。
三、常见的语义化标签
因此我们在写页面结构时，应尽量使用有 语义的HTML 标签

<title>：页面主体内容。
<hn>：h1~h6，分级标题，<h1> 与 <title> 协调有利于搜索引擎优化。
<ul>：无序列表。
<li>：有序列表。
<header>：页眉通常包括网站标志、主导航、全站链接以及搜索框。
<nav>：标记导航，仅对文档中重要的链接群使用。
<main>：页面主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能。
<article>：定义外部的内容，其中的内容独立于文档的其余部分。
<section>：定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
<aside>：定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等。
<footer>：页脚，只有当父级是body时，才是整个页面的页脚。
<small>：呈现小号字体效果，指定细则，输入免责声明、注解、署名、版权。
<strong>：和 em 标签一样，用于强调文本，但它强调的程度更强一些。
<em>：将其中的文本表示为强调的内容，表现为斜体。
<mark>：使用黄色突出显示部分文本。
<figure>：规定独立的流内容（图像、图表、照片、代码等等）（默认有40px左右margin）。
<figcaption>：定义 figure 元素的标题，应该被置于 figure 元素的第一个或最后一个子元素的位置。
<cite>：表示所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。
<blockquoto>：定义块引用，块引用拥有它们自己的空间。
<q>：短的引述（跨浏览器问题，尽量避免使用）。
<time>：datetime属性遵循特定格式，如果忽略此属性，文本内容必须是合法的日期或者时间格式。
<abbr>：简称或缩写。
<dfn>：定义术语元素，与定义必须紧挨着，可以在描述列表dl元素中使用。
<address>：作者、相关人士或组织的联系信息（电子邮件地址、指向联系信息页的链接）。
<del>：移除的内容。
<ins>：添加的内容。
<code>：标记代码。
<meter>：定义已知范围或分数值内的标量测量。（Internet Explorer 不支持 meter 标签）
<progress>：定义运行中的进度（进程）。

10， 使用一套设计方案，适应不同的分辨率，有哪些方法可以实现
流式布局：
使用非固定像素来定义网页内容，也就是百分比布局，通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。这样的的布局方式，就是移动端WEB开发使用的常用布局方式。这样的布局可以适配移动端不同的分辨率设备。

响应式开发
根据media在不同的width间设置不同的样式，一般采用第三方框架或者ui库来实现

11，清除浮动的几种方式？
1， 父级div定义height,就解决了父级div无法自动获取高度的问题。简单，代码少，容易掌握，但只适合高度固定的布局2， 结尾处加空DIV标签clear:both,原理：在浮动元素后面添加一个空DIV兄弟元素，利用CSS提高clear：both清除浮动，让父级div能够自动获取高度，如果页面浮动布局多，就要增加很多空div，让人感觉不好
3 父级元素定义伪类：after和zoom,

清除浮动代码
.clearfix:after{
	content:"";
	display:block;
	visibility:hidden;
	height:0;
	line-height:0;
	clear:both;
}
.clearfix{
	zoom:1;
}
**推荐使用：建议定义公共类，以减少Css代码**

4，父级元素定义overflow:hidden,超出盒子部分被隐藏，不推荐使用
5， 双伪类法

清除浮动代码
.clearfix:before, .clearfix:after{
	content:'';
	display:block;
	clear:both
}
.clearfix{
	zoom:1
}
**和3差不多**

12, 关于relative定位

***以下说法中错误的是
正确答案: A B D 
A当元素的 position属性设置为 relative 时，设置的 top、right、bottom、left 偏移值是相对于其父元素的。
B当元素的 position属性设置为 absolute 时，设置的 top、right、bottom、left 偏移值是相对于其父元素的。
C网页中，rem 作为元素尺寸单位时，是相对 文档根节点的 font-size 进行计算的。
D在Microsoft Internet Explorer 中，盒模型默认使用的是 border-box。***

其实relative是针对上一级有定位的祖先元素，而不是父元素

13, 输入类型
button 定义可点击的按钮（大多与 JavaScript 使用来启动脚本）
checkbox 定义复选框。
color 定义拾色器。
date 定义日期字段（带有 calendar 控件）
datetime 定义日期字段（带有 calendar 和 time 控件）
datetime-local 定义日期字段（带有 calendar 和 time 控件）
month 定义日期字段的月（带有 calendar 控件）
week 定义日期字段的周（带有 calendar 控件）
time 定义日期字段的时、分、秒（带有 time 控件）
email 定义用于 e-mail 地址的文本字段
file 定义输入字段和 “浏览…” 按钮，供文件上传
hidden 定义隐藏输入字段
image 定义图像作为提交按钮
number 定义带有 spinner 控件的数字字段
password 定义密码字段。字段中的字符会被遮蔽。
radio 定义单选按钮。
range 定义带有 slider 控件的数字字段。
reset 定义重置按钮。重置按钮会将所有表单字段重置为初始值。
search 定义用于搜索的文本字段。
submit 定义提交按钮。提交按钮向服务器发送数据。
tel 定义用于电话号码的文本字段。
text 默认。定义单行输入字段，用户可在其中输入文本。默认是 20 个字符。
url 定义用于 URL 的文本字段。

14, css3新增特性
1、CSS3选择器
2、CSS3边框(Borders)
3、CSS3背景
4、CSS3渐变
5、CSS3文本效果
6、CSS3字体(@font-face规则)
7、CSS3转换和变形
1）2D转换方法
2）3D转换属性
8、CSS3过度（transition属性）
9、CSS3动画（@keyframes规则 animation属性）
10、CSS3多列
11、CSS3盒模型
12、CSS3伸缩布局盒模型(弹性盒子)（flexbox）
13、CSS3多媒体查询（@media）

15，可继承的属性有哪些
只有颜色，文字，字体间距行高对齐方式，和列表的样式可以继承

所有元素可继承：visibility和cursor。
内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。
终端块状元素可继承：text-indent和text-align。
列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。

16,类相关样式符合意思

<style type="text/css">
    div.demo{
        color: black;
    }
    div.wrap .demo{
        color: yellow;
    }
    div.wrap > .demo{
        color: blue;
    }
    div.wrap + .demo{
        color: red;
    }
    div.demo + .demo{
        color: red;
    }
 </style>
<div class="wrap">
    <div class="demo">
        Hello
    </div>
  <div class="demo">
    World
  </div>
</div>
Hello 和 world 两个单词分别是什么颜色？

1. div.demo 元素与类样式交集选择器 Hello World 为黑色
2. div.wrap .demo 覆盖样式1 Hello World 为黄色
3. div.wrap > .demo 覆盖样式2 Hello World 为蓝色
4. div.wrap + .demo 选择在 div.wrap 后的第一个兄弟元素并且类样式为 .demo 的元素为红色, 没有选中任何元素，此选择器无效
5. div.demo + .demo 选择在 div.demo 后的第一个类样式为 .demo 的兄弟元素 设置为红色, World 变成红色,Hello 还是蓝色
总结来说就是：
‘+’：是兄弟元素，只找跟自己同级的
‘>’: 是子代元素，找自己的下级是否有

17，css三种方式
内联：

外联

嵌入

18 a标签中顺序

解析：a:link,a:visited,a:hover,a:active 分别是什么意思?
1. link:连接平常的状态
2. visited:连接被访问过之后
3. hover:鼠标放到连接上的时候
4. active:连接被按下的时候

正确顺序：“爱恨原则”（LoVe/HAte），即四种伪类的首字母:LVHA。再重复一遍正确的顺序：a:link、a:visited、a:hover、a:active .

因为当鼠标经过未访问的链接，会同时拥有a:link、a:hover两种属性，a:link离它最近，所以它优先满足a:link，而放弃a:hover的重复定义。当鼠标经过已经访问过的链接，会同时拥有a:visited、a:hover两种属性，a:visited离它最近，所以它优先满足a:visited，而放弃a:hover的重复定义。究其原因，是css的就近原则“惹的祸”。

19，动画的速度

linear:匀速
ease:先慢后快再慢
ease-in:加速
ease-out:减速
ease-in-out:先加速后减速

20，浮动元素和BFC
21,关于css的加载
css加载不会阻塞DOM树的解析
css加载会阻塞DOM树的渲染
css加载会阻塞后面js语句的执行

22， 关于内边距和外边距
内边距padding可以看到所在div的背景色
外边距margin可以看到外面div的背景色

js篇

1，js响应事件
1 onclick 鼠标点击某个对象
2 onfocus 获取焦点
3 oblur 失去焦点
4 onmousedown 鼠标被按下

2，数组对象原生方法有哪些
1 pop 删除最后一个
2 push 在最后添加
3 shift 删除第一个
4 unshift 在第一个增加
5 splice 数组的增删改查
6 reverse 翻转函数
7 sort 排序
8 concat 连接函数
9 join 拼接函数
10 slice 切片函数
11 toString 数组转字符串
12 indexOf 查询某个数在不在数组里
13 lastIndexOf 反着查某个数在不在数组里面
14 reduce 累加函数
15 forEach 循环
16 map 拆分函数
17 filter 过滤函数
代码举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数组操作</title>
    <script>
        // js数组方法大全
        // JavaScript中创建数组有两种方式

        // （一）使用 Array 构造函数：

        // var arr1 = new Array(); //创建一个空数组
        // var arr2 = new Array(20); // 创建一个包含20项的数组
        // var arr3 = new Array("lily","lucy","Tom"); // 创建一个包含3个字符串的数组
        // console.log(arr2)

        // （二）使用数组字面量表示法：

 

        // var arr4 = []; //创建一个空数组
        // var arr5 = [20]; // 创建一个包含1项的数组
        // var arr6 = ["lily","lucy","Tom"]; // 创建一个包含3个字符串的数组
 

        // 数组的方法有数组原型方法，也有从object对象继承来的方法，这里我们只介绍数组的原型方法，数组原型方法主要有以下这些;
        // join() 
        // push()和pop()
        // shift() 和 unshift()
        // sort()
        // reverse()
        // concat()
        // slice()
        // splice()
        // indexOf()和 lastIndexOf() （ES5新增）
        // forEach() （ES5新增）
        // map() （ES5新增）
        // filter() （ES5新增）
        // every() （ES5新增）
        // some() （ES5新增）
        // reduce()和 reduceRight() （ES5新增）

        // join() 和 concat() slice() splice() 会生成副本

        // 1、join()
        // join(separator): 将数组的元素组起一个字符串，以separator为分隔符，省略的话则用默认用逗号为分隔符，该方法只接收一个参数：即分隔符。

        var arr = [1,2,3];
        console.log(arr.join(',')); // 1,2,3
        console.log(arr.join("-")); // 1-2-3
        console.log(arr); // [1, 2, 3]（原数组不变）

        // 通过join()方法可以实现重复字符串，只需传入字符串以及重复的次数，就能返回重复后的字符串，函数如下：
        function repeatString(str, n) {
            return new Array(n + 1).join(str);
        }
        console.log(repeatString("abc", 3)); // abcabcabc
        console.log(repeatString("Hi", 5)); // HiHiHiHiHi
        var arr = new Array(20)
        console.log(arr.join('ABC'))
        
        // 2、push()和pop()

        // push(): 可以接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度。 
        // pop()：数组末尾移除最后一项，减少数组的 length 值，然后返回移除的项。

        var arr = ["Lily","lucy","Tom"];
        var count = arr.push("Jack","Sean");
        console.log(count); // 5
        console.log(arr.length)
        console.log(arr); // ["Lily", "lucy", "Tom", "Jack", "Sean"]
        var item = arr.pop();
        console.log(item); // Sean
        console.log(arr); // ["Lily", "lucy", "Tom", "Jack"]

        // 3、shift() 和 unshift()

        // shift()：删除原数组第一项，并返回删除元素的值；如果数组为空则返回undefined 。 
        // unshift:将参数添加到原数组开头，并返回数组的长度 。

        // 这组方法和上面的push()和pop()方法正好对应，一个是操作数组的开头，一个是操作数组的结尾。

        var arr = ["Lily","lucy","Tom"];
        var count = arr.unshift("Jack","Sean");
        console.log(count); // 5
        console.log(arr); //["Jack", "Sean", "Lily", "lucy", "Tom"]
        var item = arr.shift();
        console.log(item); // Jack
        console.log(arr); // ["Sean", "Lily", "lucy", "Tom"]

        // 4、sort()
        // sort()：按升序排列数组项——即最小的值位于最前面，最大的值排在最后面。
        // 在排序时，sort()方法会调用每个数组项的 toString()转型方法，然后比较得到的字符串，以确定如何排序。即使数组中的每一项都是数值， sort()方法比较的也是字符串，因此会出现以下的这种情况：

        var arr1 = ["a", "d", "c", "b"];
        console.log(arr1.sort()); // ["a", "b", "c", "d"]
        arr2 = [13, 24, 51, 3];
        console.log(arr2.sort()); // [13, 24, 3, 51]
        console.log(arr2); // [13, 24, 3, 51](原数组被改变)

        // 为了解决上述问题，sort()方法可以接收一个比较函数作为参数，以便我们指定哪个值位于哪个值的前面。比较函数接收两个参数，如果第一个参数应该位于第二个之前则返回一个负数，如果两个参数相等则返回 0，如果第一个参数应该位于第二个之后则返回一个正数。以下就是一个简单的比较函数：
        //四、那么复杂，如何快速掌握呢？
        //升序排序 return  a - b； 降序排序 return b - a。
        function compare(value1, value2) {
        if (value1 < value2) {
            return -1;
        } else if (value1 > value2) {
            return 1;
        } else {
            return 0;
        }
        }
        arr2 = [13, 24, 51, 3];
        console.log(arr2.sort(compare)); // [3, 13, 24, 51]

        // 5、reverse()
        // reverse()：反转数组项的顺序。

        var arr = [13, 24, 51, 3];
        console.log(arr.reverse()); //[3, 51, 24, 13]
        console.log(arr); //[3, 51, 24, 13](原数组改变)

        // 6、concat()
        // concat() ：将参数添加到原数组中。这个方法会先创建当前数组一个副本，然后将接收到的参数添加到这个副本的末尾，最后返回新构建的数组。在没有给 concat()方法传递参数的情况下，它只是复制当前数组并返回副本。

        var arr = [1,3,5,7];
        console.log(arr.concat(9,[11,13])); //[1, 3, 5, 7, 9, 11, 13]
        console.log(arr.concat('9',999,{name:'fd'},[123,456])); 
        // [1,3,5,7,'9',999,{name:'fd'},[123,456]]
        
        // console.log(arr); // [1, 3, 5, 7](原数组未被修改)
        // 从上面测试结果可以发现：传入的不是数组，则直接把参数添加到数组后面，如果传入的是数组，则将数组中的各个项添加到数组中。但是如果传入的是一个二维数组呢？

        var arrCopy2 = arr.concat([9,[11,13]]);  //这个添加的是二维数组别看错
        console.log(arrCopy2); //[1, 3, 5, 7, 9, Array[2]]
        console.log(arrCopy2[5]); //[11, 13]
        // 上述代码中，arrCopy2数组的第五项是一个包含两项的数组，也就是说concat方法只能将传入数组中的每一项添加到数组中，如果传入数组中有些项是数组，那么也会把这一数组项当作一项添加到arrCopy2中。
    
        // 7、slice()
        // slice()：返回从原数组中指定开始位置到结束位置之间的项组成的新数组。slice()方法可以接受一或两个参数，即要返回项的起始和结束位置。在只有一个参数的情况下， slice()方法返回从该参数指定位置开始到当前数组末尾的所有项。如果有两个参数，该方法返回起始和结束位置之间的项——但不包括结束位置的项。

        var arr = [1,3,5,7,9,11];
        var arrCopy = arr.slice(1);
        var arrCopy2 = arr.slice(1,4);
        var arrCopy3 = arr.slice(1,-2);
        var arrCopy4 = arr.slice(-4,-1);
        console.log('slice')
        console.log(arr); //[1, 3, 5, 7, 9, 11](原数组没变)
        console.log(arrCopy); //[3, 5, 7, 9, 11]
        console.log(arrCopy2); //[3, 5, 7]
        console.log(arrCopy3); //[3, 5, 7]
        console.log(arrCopy4); //[5, 7, 9]

        // arrCopy只设置了一个参数，也就是起始位置下标为1，所以返回的数组为下标1（包括位置1）开始到数组最后。 
        // arrCopy2设置了两个参数，返回起始下标（包括1）开始到终止下标（不包括4）的子数组。 
        // arrCopy3设置了两个参数，终止下标为负数，当出现负数时，将负数加上数组长度的值（6）来替换该位置的数，因此就是从1开始到4（不包括）的子数组。 
        // arrCopy4中两个参数都是负数，所以都加上数组长度6转换成正数，因此相当于slice(2,5)。


        // 8、splice()
        // splice()：很强大的数组方法，它有很多种用法，可以实现删除、插入和替换。
        // 删除：可以删除任意数量的项，只需指定 2 个参数：要删除的第一项的位置和要删除的项数。例如， splice(0,2)会删除数组中的前两项。
        // 插入：可以向指定位置插入任意数量的项，只需提供 3 个参数：起始位置、 0（要删除的项数）和要插入的项。例如，splice(2,0,4,6)会从当前数组的位置 2 开始插入4和6。
        // 替换：可以向指定位置插入任意数量的项，且同时删除任意数量的项，只需指定 3 个参数：起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。例如，splice (2,1,4,6)会删除当前数组位置 2 的项，然后再从位置 2 开始插入4和6。
        // splice()方法始终都会返回一个数组，该数组中包含从原始数组中删除的项，如果没有删除任何项，则返回一个空数组。

        var arr = [1,3,5,7,9,11];
        var arrRemoved = arr.splice(0,2);
        console.log(arr); //[5, 7, 9, 11]
        console.log(arrRemoved); //[1, 3]
        var arrRemoved2 = arr.splice(2,0,4,6);
        console.log(arr); // [5, 7, 4, 6, 9, 11]
        console.log(arrRemoved2); // []
        var arrRemoved3 = arr.splice(1,1,2,4);
        console.log(arr); // [5, 2, 4, 4, 6, 9, 11]

        // 9、indexOf()和 lastIndexOf()
        // indexOf()：接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。其中， 从数组的开头（位置 0）开始向后查找。 
        // lastIndexOf：接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。其中， 从数组的末尾开始向前查找。

        // 这两个方法都返回要查找的项在数组中的位置，或者在没找到的情况下返回-1。在比较第一个参数与数组中的每一项时，会使用全等操作符

        var arr = [1,3,5,7,7,5,3,1];
        console.log(arr.indexOf(5)); //2
        console.log(arr.lastIndexOf(5)); //5
        console.log(arr.indexOf(5,2)); //2
        console.log(arr.lastIndexOf(5,4)); //2
        console.log(arr.indexOf("5")); //-1

        // 10、forEach()
        // forEach()：对数组进行遍历循环，对数组中的每一项运行给定函数。这个方法没有返回值。参数都是function类型，默认有传参，参数分别为：遍历的数组内容；第对应的数组索引，数组本身。

        var arr = [1, 2, 3, 4, 5];
        arr.forEach(function(x, index, a){
            console.log(a)
            console.log(x + '|' + index + '|' + (a === arr));
        });
        // 箭头函数写法
        arr.forEach((x,index,arrlist) => {
            console.log(arrlist)
            console.log(x + '|' + index + '|' + (arrlist === arr));
        })

        // 输出为：
        // 1|0|true
        // 2|1|true
        // 3|2|true
        // 4|3|true
        // 5|4|true

        // 11、map()
        // map()：指“映射”，对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。
        // 下面代码利用map方法实现数组中每个数求平方。

        var arr = [1, 2, 3, 4, 5];
        var arr2 = arr.map(function(item){
            return item*item;
        });
        console.log(arr2); //[1, 4, 9, 16, 25]
        var arr3 = arr.map(item => (item*2))  //钩子函数 如果是纯数组，item是每个单独的项
        console.log(arr3)

        var object1 = [{a:1},{a:2},{a:3}]
        var object2 = object1.map(item => ({a:item.a*2})) // 如果是数组有对象这样组成item是每一个单独的对象
        console.log(object2)

        // 12、filter()
        // filter()：“过滤”功能，数组中的每一项运行给定函数，返回满足过滤条件组成的数组。

        var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
        var arr2 = arr.filter(function(x, index) {
        return index % 3 === 0 || x >= 8;
        }); 
        console.log(arr2); //[1, 4, 7, 8, 9, 10]
        var arr3 = arr.filter((x,index) => (index%3===0||x>=8))
        console.log(arr3)

        // 13、every()
        // every()：判断数组中每一项都是否满足条件，只有所有项都满足条件，才会返回true。

        var arr = [1, 2, 3, 4, 5];
        var arr2 = arr.every(function(x) {
        return x < 10;
        }); 
        console.log(arr2); //true
        var arr3 = arr.every(function(x) {
        return x < 3;
        }); 
        console.log(arr3); // false

        // 14、some()
        // some()：判断数组中是否存在满足条件的项，只要有一项满足条件，就会返回true。

        var arr = [1, 2, 3, 4, 5];
        var arr2 = arr.some(function(x) {
        return x < 3;
        }); 
        console.log(arr2); //true
        var arr3 = arr.some(function(x) {
        return x < 1;
        }); 
        console.log(arr3); // false

        // 15、reduce()和 reduceRight()
        // 这两个方法都会实现迭代数组的所有项，然后构建一个最终返回的值。reduce()方法从数组的第一项开始，逐个遍历到最后。
        // 而 reduceRight()则从数组的最后一项开始，向前遍历到第一项。
        // 这两个方法都接收两个参数：一个在每一项上调用的函数和（可选的）作为归并基础的初始值。
        // 传给 reduce()和 reduceRight()的函数接收 4 个参数：前一个值、当前值、项的索引和数组对象。这个函数返回的任何值都会作为第一个参数自动传给下一项。第一次迭代发生在数组的第二项上，因此第一个参数是数组的第一项，第二个参数就是数组的第二项。
        // 下面代码用reduce()实现数组求和，数组一开始加了一个初始值10。
        
        // 如果没有第一项就会出现第一次的index是1 前一项是0

        var values = [1,2,3,4,5];
        var sum = values.reduce(function(prev, cur, index, array){
            console.warn('----------------------------')
            console.log(prev)
            console.log(cur)
            console.log(index)
            console.log(array)
            console.warn('----------------------------')
        return prev + cur;
        });
        console.log(sum); //25

        // var values = [1,2,3,4,5];
        // var sum = values.reduce(function(prev, cur, index, array){
        //     console.warn('----------------------------')
        //     console.log(prev)
        //     console.log(cur)
        //     console.log(index)
        //     console.log(array)
        //     console.warn('----------------------------')
        // return prev + cur;
        // },10);
        // console.log(sum); //25
    </script>
</head>
<body>
    
</body>
</html>

3， dom操作
1创建新节点
createDocumentFragment()//创建一个DOM片段
createElement()// 创建一个具体的元素
createTextNode()//创建一个文本节点

2添加，移除，替换，插入
appendChikd()
removeChild()
replaceChild()
insertBefore()//在已有的子节点前插入一个新的节点

3查找
getElementsByTagName()// 通过标签名查找
getElementsByName()//通过元素的name属性查找
getElementById()//通过元素id查找，唯一性

使用
既然是dom操作，所以这些都是document的属性

document.getElementById('movediv').style.cssText = 'transform: translateY(-150px)';

4，编写一个方法，去掉一个数组中的重复元素
插入一个知识点
…扩展符
拓展运算符，是es6一个很好的特性，它们可以通过减少赋值语句的使用，或者减少通过下标访问数组或对象***斜体样式***的方式，使代码更加简洁优雅，可读性更佳。下面我将列出拓展运算符的主要应用场景，以及相关知识。
…arr返回的并不是一个数组，而是各个数组的值。只有[…arr]才是一个数组，所以…arr可以用来对方法进行传值

总结来说就是…可以把数组或者对象拆分成一个个单独的对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数组去重</title>
    <script>
        arr01 = [1,2,3,1,3,4,5,1]
        console.log(new Set(arr01)) //Set(5) {1,2,3,4,5}
        console.log([...new Set(arr01)]) //[1,2,3,4,5]
        console.log(...new Set(arr01)) 1 2 3 4 5
    </script>
</head>
<body>
    
</body>
</html>

5，在jquery中想要找到所有元素的同辈元素，下面哪一个是可以实现的？

siblings() 方法返回被选元素的所有同胞元素。

下面的例子返回 <h2> 的所有同胞元素：

实例
$(document).ready(function(){
  $("h2").siblings();
});

6, JavaScript的typeof运算符的可能结果

7, 屏幕大小

8， Js参数，变量提升，函数问题
原题：

变形后解决：

9，关于函数的问题

function add(){}定义的函数会优先解析，而不是顺序解析；因此整个过程中，首先依次解析两个add function，由于同名，所以后者会覆盖前者；然后，顺序解析其余的JS代码，y = add(m);语句和z = add(m); 语句调用的都是第二个add function，因此返回的都是4.
定义函数的三种方式有：function函数、Function()构造函数、对象字面量。
从解析顺序来分析，它们的不同在于：function函数：优先解析；Function()构造函数、函数字面量定义:顺序解析。

webpack篇

概念
本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
先理解四个核心概念：

入口(entry)
输出(output)
loader
插件(plugins)

入口(entry)
入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。

每个依赖项随即被处理，最后输出到称之为 bundles 的文件中，我们将在下一章节详细讨论这个过程。

可以通过在 webpack 配置中配置 entry 属性，来指定一个入口起点（或多个入口起点）。默认值为 ./src。

接下来我们看一个 entry 配置的最简单例子：

webpack.config.js

module.exports = {
  entry: './path/to/my/entry/file.js'
};

出口(output)
output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。你可以通过在配置中指定一个 output 字段，来配置这些处理过程：

webpack.config.js

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  }
};

在上面的示例中，我们通过 output.filename 和 output.path 属性，来告诉 webpack bundle 的名称，以及我们想要 bundle 生成(emit)到哪里。可能你想要了解在代码最上面导入的 path 模块是什么，它是一个 Node.js 核心模块，用于操作文件路径
loader
loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。

本质上，webpack loader 将所有类型的文件，转换为应用程序的依赖图（和最终的 bundle）可以直接引用的模块。

注意，loader 能够 import 导入任何类型的模块（例如 .css 文件），这是 webpack 特有的功能，其他打包程序或任务执行器的可能并不支持。我们认为这种语言扩展是有很必要的，因为这可以使开发人员创建出更准确的依赖关系图。
在更高层面，在 webpack 的配置中 loader 有两个目标：

test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。
use 属性，表示进行转换时，应该使用哪个 loader。
webpack.config.js

const path = require('path');

const config = {
  output: {
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  }
};

module.exports = config;

以上配置中，对一个单独的 module 对象定义了 rules 属性，里面包含两个必须属性：test 和 use。这告诉 webpack 编译器(compiler) 如下信息：

“嘿，webpack 编译器，当你碰到「在 require()/import 语句中被解析为 ‘.txt’ 的路径」时，在你对它打包之前，先使用 raw-loader 转换一下。”

重要的是要记得，在 webpack 配置中定义 loader 时，要定义在 module.rules 中，而不是 rules。然而，在定义错误时 webpack 会给出严重的警告。为了使你受益于此，如果没有按照正确方式去做，webpack 会“给出严重的警告”
loader 还有更多我们尚未提到的具体配置属性。

插件(plugins)
loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。

想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建它的一个实例。

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件

const config = {
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
]

};

module.exports = config;

webpack 提供许多开箱可用的插件！查阅我们的插件列表获取更多信息。

在 webpack 配置中使用插件是简单直接的，然而也有很多值得我们进一步探讨的用例。
模式
通过选择 development(生产) 或 production（开发） 之中的一个，来设置 mode 参数，你可以启用相应模式下的 webpack 内置的优化

module.exports = {
mode: ‘production’
};