HTML,Css,JavaScript,JQuery,Vue基础面试题(持续更新)

2023年6月21日发(作者：)

HTML,Css,JavaScript,JQuery,Vue基础⾯试题（持续更新）1.表单中GET和POST两种提交⽅式的不同?Get:速度快,安全性低 通过浏览器地址栏传值,不⽀持中⽂

最多⽀持2000个字符,浏览器地址栏格式为key=value&keyN=valueN,只能传字符串post:速度慢,安全性⾼,不通过浏览器地址栏传值,通过消息体传值,不⽀持中⽂,不限制⼤⼩,⽀持Json和字符串2.表单元素input="text" 单⾏⽂本输⼊框input="password" 单⾏密码输⼊框input="checkbox" 多选input="radio" 单选input="file" 上传⽂件input="email" 邮箱input="date" ⽇期input="number" 数字input="tel" 电话input="submit" 提交input="reset" 重置表单input="image" 使⽤图⽚作为提交按钮select > option 下拉列表框中的优先级1.引⼊css的三种⽅式的优先级 ⾏内式 > 外链式和内嵌式谁放在后⾯听谁的如果出现冲突会覆盖冲突的部分2.基本选择器的优先级 id选择器 > 类别选择器 > 标记选择器 如果存在⾏内式,则⼀切以⾏内式为准4.页⾯的元素类型页⾯元素类型: 在css中将页⾯的元素分为很多种，主要有以下三种特点⽐较明显的元素1:内联元素（inline） 1:内联元素（inline） 内联元素结尾不换⾏,⼀⾏可以书写多个 从左到右依次排列, 元素的宽度⾼度与元素内部嵌套的内容有关 设置盒⼦模型⽆效 设置对齐⽅式⽆效 eg: span label a img*2:块元素（block） 2:块元素（block） 块元素,⾃动换⾏,⼀⾏只能书写⼀个,从上到下排序,设置盒⼦模型有效,对齐⽅式有效 如果不设置宽度 则元素⾃动占满整个⽗元素 eg: div p ul li h1~h6 pre img*3:空元素（empty） 3:空元素（empty） ⼀般不嵌套内容，直接⽤来设置页⾯的⼀些结构或者参数 多为整合标签 br hr metaimg img:(内联块元素 inline-block)是⼀个具备块元素特征的内联元素display display:设置元素类型 display:block 设置元素为块元素（互相转换⼀下） display:inline 设置元素为内联元素 display:none 隐藏元素5.盒⼦模型什么是盒⼦模型:在css中将⼀个个元素看做⼀个盒⼦摆放在页⾯上,由于⼤多数都是块元素,从上到下排列,这种排序⽅式成为标准⽂本流或者⽂档流,这些盒⼦可以通过设置⼀些参数,来改变他们周边的空间位置,那么这些参数组成了盒⼦模型内填充（padding），外边距（margin），边框（border）都有4个⽅向。⽐如内填充就有：padding-top, padding-right, padding-bottom, padding-left。简略写法: margin: 上 右 下 左; 四个值的时候 margin: 上 (右左) 下; 三个值的时候 margin: (上下) (右左); 两个值的时候 margin: (上右下左); ⼀个值的时候6.浮动在不设置宽度的前提下,块元素会占满⽗元素的整个空间,当设置浮动之后,元素开始向浮动⽅向不断缩⼩,直到缩⼩到内部的内容⼤⼩为⽌,之后漂浮在页⾯上,该元素之前的空间被其他元素占据float:left 左浮动float:right 右浮动float:both 两侧浮动如果不想让元素受到其它元素浮动的影响，则添加clear属性 clear:left;去除左浮动影响 clear:right;去除右浮动影响 clear:both;去除两侧浮动影响7.定位1:相对定位 根据元素的原先位置的左上⾓来定位,定位之后元素保持原先的类型, 元素原先的位置依然被占据，元素漂浮在页⾯上 top和bottom只能书写⼀个作为偏移量 left和right只能书写⼀个作为偏移量2:绝对定位 根据距离元素最近的定位过的祖先元素的左上⾓进⾏定位，定位之后，元素 不再保持原先的类型，原来的位置也被占⽤，元素漂浮在页⾯上，可能会遮挡 页⾯上的元素 注意如果没有定位过的祖先元素，则根据body来进⾏定位，也就是浏览器的 左上⾓来进⾏定位，这样可能会出现严重的页⾯问题ript的数据类型基本数据类型(7种) String number boolean null undefined

Symbol(ES6新特性) 表⽰⼀个独⼀⽆⼆的对象 BigInt(ES10新特性) 是对number的补充,⽤来表述2^53-1以外的数据精度复合数据类型 Object 由对象引出 Array Function Math Date等内置对象ript能否直接修改页⾯的样式和结构,如果不能,请说明理由?JavaScript不能直接修改页⾯的样式和结构,⽽是通过DOM模型来修改页⾯的结构和样式,浏览器⼀般存在⼀个引擎,这个引擎存在两个解析器,⼀个叫脚本解析器,⼀个叫标签解析器,浏览器从上到下解析,当解析完全⽂之后,会创建⼀个DOM模型,这个DOM模型全部封装在Document对象当中,Js并不是对页⾯上的元素进⾏增删改查,⽽是对DOM模型进⾏增删改查,修改完之后,模型和浏览器页⾯不⼀致时,浏览器会重新渲染页⾯使之保持⼀致ript中的⼏种选择器Javascript最基本的⼏个选择器 1:根据唯⼀的id在全⽂拿取元素 返回元素节点 Node mentById('id') 2:根据标签名拿取多个元素节点 这些节点组成⼀个类数组，这个类数组中 封装了所有获取的元素节点 NodeList mentsByTagName('tagName') 类数组其实就是DOM当中的数组，但是与ES规范也就是 Js中的Array并不是⼀码事，所以类数组⽆法使⽤ 部分Array的⽅法 const newArray = (NodeList) 3:根据name属性值拿取多个元素节点，返回类数组 NodeList mentsByName('name') 4:根据class属性拿取多个元素节点，返回类数组（民间） NodeList mentsByClassName('class') 尽量少⽤，严重兼容性问题根据特点使⽤场合的不同，DOM将页⾯节点分为12种， 我们常见的节点由以下⼏种 以下节点根据 nodeType nodeName nodeValue⼏个属性⽤以区分 1:⽂档节点 就是指的document，⼀个页⾯只有⼀个⽂档节点 也就是根元素 nodeType 9 nodeName #document nodeValue 不可⽤ 2:元素节点 就是指页⾯上的各种元素，通过 mentById()等拿取就是元素节点 nodeType 1 nodeName 标签名 nodeValue 不可⽤ 3:属性节点 就是指元素节点中的各种属性 XXX="XXX" 我们之前写的 name="" id="" class="" type="" nodeType 2 nodeName 属性名 nodeValue 属性值 4:⽂本节点 就是指页⾯中的各种字符串 nodeType 3 nodeName 永远是#text nodeValue 就是⽂本内容 5:注释节点 就是指页⾯中的注释 nodeType 8 nodeName 就是注释信息 nodeValue 不可⽤dow:BOM七对象之⼀，表⽰整个窗⼝，BOM(Browser

Object Model浏览器对象模型)，将浏览器的不同的功能 分别分为七个对象 window:表⽰整个窗⼝，也是BOM七个对象的 顶层对象，它包含着另外6个对象，属于全局变量 document:表⽰页⾯的正⽂部分，操作页⾯的元素 也是⽤此对象 location:表⽰浏览器的地址栏信息，⽤来负责页⾯的 条件以及地址的搜索等 navigator:浏览器信息，通过此对象可以查看当前页⾯ 使⽤的是何种浏览器进⾏解析 history:浏览器历史记录以及缓存信息 screen:⽤户显⽰器信息 frame:页⾯的已经框架，⽬前已经被淘汰的引⼊⽅式1.⾏内引⼊ 在标签内结合事件来使⽤2.内部引⼊ 在head或者body标签内定义script标签,然后在script标签内书写js代码3.外部引⼊ 引⼊⼀个独⽴的js⽂件创建数组的⽅式和迭代⽅式有两种创建数组的⽅式 arr = [1,2,3,4,5] arr = new Array[元素个数] arr[0] = ** arr[1] = ** ....迭代⽅式1.普通迭代 for(let i = 0;i<;i++){ (`${arr[i]}`) }5 for in 循环 for(let key in arr){ (`${arr[key]}`) }6 for of 循环 for(let value of ar){ value就是要被遍历的值 }4.循环体.forEach 循环体.forEach(a =>{ (`${a}`) })中创建对象的⽅式1:使⽤对象字⾯量来创建对象 let|const 对象名 = { 属性名:属性值; 属性名:属性值; 属性名:属性值; ⽅法名(){

} } 注意: 属性值不能加引号 属性名看数据类型来定(String,Number,boolean,null,undefined,Symbol,BigInt)2:使⽤构造⽅法来创建对象 使⽤构造⽅法可以复⽤⼀个对象 this:书写在某个对象中，则表⽰本对象 书写在对象或者函数外表⽰全局变量6新特性1.当属姓名和属性值⼀致省略写法 name:name => name;2.将类数组转化为数组 (类数组)3.⽅法名:function(){} 写为 ⽅法名(){}4.基本数据类型 Symbol5. 箭头函数 在js中为了简化书写，如果在书写匿名函数时 可以使⽤箭头函数，如果匿名函数中，存在⼀个以上 或者没有参数，则⼩括号保留，如果只有⼀个参数，则 ⼩阔号省略，function去掉，则参数之后添加=> 如果函数体直接是return，则省略return 省略 ⼤括号

6. 不再推荐使⽤var 使⽤let赋值变量 使⽤const赋值常量

7. 在前端中⼀般不使⽤后端的拼接字符串书写⽅式 这种书写⽅式太过繁琐了，如果遇到⼤量需要拼接的 地⽅⾮常容易出错 在ES6新规范中提出了模板字符串的概念 格式: `${要输出的值}`

17. = ,==, ===的区别 =:赋值 ==:⽐对，如果不是同⼀种数据类型，则转换为同⼀种 数据类型，进⾏⽐对 ===:如果两者不是同⼀种数据类型，则⽴刻返回false 如果是同⼀种数据类型则进⾏⽐对基本选择器1.$('tagName') : 根据标签名拿取元素2.$('.class') : 根据类名拿取元素3.$('#id') : 根据id拿取元素4.$('')/$('tagName#id') 拿取包含class或者id的特定元素5.$('sel1,sel2,sel3') : 只要符合其中任意⼀个就可以成功选取6.$('sel1 sel2 selN) : 拿取具有特定层级关系的元素7.$('*') : 拿取全部元素8.$('sel1 > sel2') : 拿取元素的特定⼦元素,仅仅拿取⼦元素9.$('sel1 + sel2') : 需要满⾜三个条件 向下选取,互为兄弟,必须紧邻10.$('sel1 ~ sel2') : 需要满⾜两个条件 向下选取,互为兄弟基本筛选器1.$(':first') : 拿取第⼀个元素,注意冒号之前⼀般书写元素名⽤来限定什么第⼀个元素2.$(':last') : 拿取最后⼀个3.$(':eq(index)') : 拿取索引值匹配index的元素4.$(':gt(index)') : 拿取索引值⼤于index的元素5.$(':lt(index)') : 拿取索引值⼩于index的元素6.$(':odd') : 拿取索引值是奇数的元素7.$(':even') : 拿取索引值是偶数的元素 0是偶数8.$(':has(sel)') : 拿取内部包含特定结构的元素9.$(':contains(text)') : 拿取包含特定⽂本的元素,注意包含即可10.$(':hidden') : 拿取隐藏的元素,必须指定限定条件11.$(':visible') : 拿取可见元素12.$(':root') : 拿取根元素13.$(':empty') : 拿取空元素,内部没有⽂本也没有⼦元素的元素14.$(':header') : 拿取所有的标题元素 h1~属性选择器1.$('[属性名=属性值]') : 拿取属性名匹配属性值的元素 注意必须⼀个字不差2.$('[属性名^=属性值开头]')3.$('[属性名$=属性值结尾')4.$('[属性名*=包含属性值]')5.$('[属性名!=属性值]')注意 : 这种选择器没有冒号,直接书写限定条件例如 : $('li[属性名^=属性值开头]') ==> $('li[id=thisisetoak]')

表单选择器1.$(":input") : 匹配所有input,textarea,select和button元素2.$(":text") : 匹配所有单⾏⽂本输⼊框3.$(":password") : 匹配所有单⾏密码输⼊框4.$(":checkbox") : 匹配所有复选框5.$(":radio") : 匹配所有单选框6.$(":submit") : 匹配所有提交按钮,理论上只匹配type="submit"的input或者button7.$(":image") : 匹配所有图像域8.$(":reset") : 匹配所有重置按钮9.$(":button") : 匹配所有按钮10.$(":file") : 匹配所有⽂件域11.$(':enabled') : 匹配所有可⽤元素12.$(':disabled') : 匹配所有不可⽤元素13.$(':checked') : 匹配所有选中的复选框元素14.$(':selected') : 匹配所有选中的option元素四⼤核⼼函数1) $('sel') 引号内书写选择器，在全⽂或者指定内容中 拿取元素 $('span#etoak')2) $(html) 直接在⼩括号内书写html超⽂本标签，多⽤来 配合⼀些⽅法使⽤ $('XXXXX')3) $(dom) 直接将js的节点放置在括号内进⾏转换 $(document)4) $(document).ready() 此⽅法在存在绑定事件时⼀般书写在函数最外侧 表⽰全⽂结构加载完毕时执⾏，类似js的 onload $(document).ready(function(){ XXXXX })的ready与js的onload有什么区别()⽅法在全⽂结构加载完毕并且其他要素⽆误的前提下就可以执⾏,⽽onload必须所有要素⽆误并且加载完毕才可以执⾏()全⽂可以执⾏多次,从上往下执⾏,onload全⽂只能使⽤⼀次,如果存在多个执⾏最后⼀个24.同步和异步的区别同步: ⽤户发出请求，必须等待响应的返回，响应返回之前 ⽤户⽆法进⾏任何操作，只能傻等在那⾥，当响应返回之后，整个页⾯会被完全刷新异步: ⽤户发出请求，不需要等待响应的返回，⽤户可以继续⾃⼰的其它动作，当响应 在未来的⼀个时间段返回之后，也不会刷新整个页⾯，⽽是仅仅修改页⾯的某⼀ 部分结构或者样式字符串和JS对象之间的转换1:JSON字符串中的键值全部转换为Js对象的属性名2:JSON字符串中的值全部转换为Js对象的属性值Js对象{ name:"elena", age:20,}JSON字符串{ "name":"elena", "age":20,}js对象 => json字符串ify(js对象)json字符串 => js对象(json字符串)的两种格式创建JSON数据⼀般在后端进⾏创建存在两种格式: 1:Map类型的json {key1:value1,key2:value2,} key:只能是字符串，必须使⽤双引号引起来 value: Java⼋种基本数据类型 String null JSON

注意:⽆法封装 可以封装 2:数组类型的json [value1,value2,valueN] value: Java⼋种基本数据类型 String null JSON

注意:⽆法封装 可以封装发送异步请求url:'提交异步发送到的⽬的地' 发送异步的⽅式

get:查询，不能传递json，通过url传值 post:添加，可以传递json，也可以通过url传值 put:修改，可以传递json，也可以通过url传值 delete:删除，不能传递json，通过url传值 type:'书写发送异步的⽅式'

返回的响应类型 text script html json xml ⽀持以上五种类型，如果设置为json，则返回的 数据类型就是已经通过()转换好了的 js对象dataType:'返回的响应类型'

是否使⽤异步 默认就是 true，如果设置为false，则使⽤同步 响应返回之前浏览器锁死，⽤户只能等待async:true,如果⼀切正常返回的回调函数success(resp){}如果出现异常返回的回调函数error(err){ 显⽰错误状态码 400:格式转换异常 404:⽆法找到资源 500:服务器编译错误 405:提交⽅式不匹配 200:⼀切正常}()和html()text() : 相当于js中的innerText，如果没有参数表⽰拿取元素中的⽂本，多个⽂本合并为⼀个 如果有参数，表⽰向元素中添加（覆盖）⽂本html() : 相当于js中的innerHTML，如果没有参数，则表⽰拿取元素中的超⽂本； 如果有参数，表⽰向元素中添加（覆盖）超⽂本innerHTML:拿取元素中的所有超⽂本（万物皆为超⽂本）innerText:拿取元素中的所有⽂本，如果存在多个⽂本,则合并为⼀个TML = XXXX向元素中插⼊超⽂本，原先的内容会被覆盖ext = XXXX向元素中插⼊⽂本，不⽀持标签，原先的内容会被覆盖29.绑定事件1.给元素绑定多个激发事件('事件1 事件2 事件N',function(){})jQuery中的事件就是js中的事件去掉on2.给元素绑定单⼀事件$(document).dblclick(function(){ ('谁双击我了呀~~~~')})3.⿏标滑过滑出事件( /* ⿏标滑过执⾏此函数 */ function(){ $(this).removeClass().addClass('red') }, /* ⿏标滑出执⾏此函数 */ function(){ $(this).removeClass().addClass('blue') })通过选择器拿取的元素与js中的元素节点是同⼀种元素吗？如果不是为什么？两者如何进⾏转换？jQuery元素是对js的节点的⼀个轻度的封装jQuery元素只能使⽤jQuery中的函数 ⽅法 属性等js节点也只能使⽤⾃⼰的函数⽅法等两者不能通⽤ 两者如何转换 jQuery => js $(0) $jqSp[0] js => jQuery $(nodeSp)31.理解前后端分离1.传统开发⽅式 前端⼈员开发页⾯；后端⼈员将html转换成jsp,实现页⾯的业务逻辑前后端依赖性强。 后端开发⼈员等待前端开发完毕才能进⾏页⾯转换、逻辑渲染 前端页⾯效果由后端控制，后端需要前端展⽰ 产品投产时，前后端代码部署在⼀台服务器2.前后端分离 前后端通过约定api接⼝，约定好接⼝，并⾏开发，耦合度低， 前端调整页⾯ 后端⽆需改动 后端提供数据，⽤户看到的效果由前端决定 前后端资源分离部署32.什么是MVVM思想MVVM是在MVP的基础上发展⽽来的⼀种思想根据语⾔的特⾊将其分为如下⼏层1:M层(Model) 就表⽰初始化在data中的数据源2:V层(View) 就表⽰页⾯的DOM3:VM层(view-model) vm就表⽰我们通过Vue类库创建的Vue实例 通过这个实例，当m层的数据发⽣更改之后 v层数据⽴刻发⽣改动（单项绑定） 当页⾯中的dom发⽣改动时，m层中的数据⽴刻 随之发⽣改动（双向绑定） 这个Vue实例可以将数据源与页⾯绑定起来33.在Vue中数据绑定存在两种⽅式 : 指令元素和⼤胡⼦表达式1.⼤胡⼦表达式 在标签外使⽤⼤胡⼦表达式 {{ 要输出的值 }}2.指令元素 v-html:后⾯绑定的值，就是插⼊元素的超⽂本 只⽀持html结构 css样式，不能添加js脚本 为了预防XSS⽹络攻击

v-once:⼀次性插值，将data中的数据插⼊到 页⾯中，之后不再保持任何绑定

v-model:使⽤在表单项中，类似表单项中的value属性 是唯⼀⼀个天⽣具有双向绑定功能的指令 注意⼤胡⼦表达式仅有单项绑定

v-on:后⾯绑定⼀个事件 v-on:click="函数名" 语法糖写法 @ @click="函数名" 注意函数如果没有参数，则不需要添加括号

v-bind:绑定⼀个元素的属性值 v-bind:属性名="data中的值" 语法糖写法 : :属性名="data中的值"

34.创建Vue实例的格式let vm = new Vue({ el:'', // element的简写，表⽰管理的DOM模板 data:{ 这⾥写要初始化的值 }, methods:{ 所有绑定的函数都放置在此对象内 }, computed:{ 设置计算属性 }, weatch:{ 设置侦听器 被侦听的初始化的数据(更改之后的值,原先的值){

// 侦听器只能侦听基本数据类型,如果想要侦听数组或者对象的变化则需要开启深度侦听

deep:true }

}, filter:{ 设置过滤器 }, ......})vm.$weatch('侦听的值',function(更改之后的值){})35.在Vue中 函数,计算属性,侦听器有什么不同？使⽤场合？1:函数 ⼀般绑定事件 函数没有缓存，不管参数是否改变，都会执⾏ （在控制台直接输⼊ vm.函数名() 则会有打印） 函数仅仅⽀持单项绑定，不⽀持双向绑定2:计算属性 可以绑定事件也可以直接使⽤, 计算属性存在缓存机制，如果数据没有变化，则不再 执⾏（在控制台输⼊ vm.计算属性 不会有打印） 计算属性默认也仅仅⽀持单项绑定，但是覆盖setter⽅法之后 则⽀持双向绑定3:侦听器 ⼀般不考虑什么绑定 侦听器是⽤来侦听某⼀个值，这个值存在默认值，当这个值 发⽣改变时，则侦听器执⾏。侦听器默认只能侦听基本数据类型 如果想侦听对象或者数组的变化，则必须开启深度侦听， deep:中绑定样式1.绑定class，后⾯是⼀个字符串 :class="初始化的值" 这个值对应⼀个类名

2.绑定class，后⾯是⼀个对象 :class="{类名1:boolean,类名2:boolean}" boolean值如果为true或者不为0，则类名⽣效 如果为false或者为0则类名失效

3.绑定class，后⾯是⼀个数组 :class="[类名,类名]"

4.绑定style，后⾯是⼀个对象 :style="{样式名:初始化的值,样式名:初始化的值}" 样式名必须使⽤驼峰中v-if和v-show的区别和使⽤场景1.v-if:如果后⾯为true或者不为0，则元素显⽰底层存在这个元素 否则如果为false或者为0，则元素不显⽰底层不存在这个元素 v-if适合切换频率低的场合使⽤, 可以配合v-else来搭配使⽤,必须紧邻,如果v-if隐藏，则执⾏v-else

2.v-show:如果后⾯为true或者不为0则元素显⽰，底层存在元素 如果后⾯为false或者为0，则元素不显⽰，底层依然存在元素， 但是元素上添加了⼀个display:none将元素隐藏 适合频繁切换的场合，初始载⼊消耗较⼤ 不能搭配中的迭代两种⽅式v-for:列表渲染,进⾏迭代 渲染数组: v-for=(别名,index) in 循环体 in 可以替换为 of 这个循环体必须初始化在data中 由于v-for会出现就近策略的bug，所以⼀般要设置可选组件 :key="索引值|主键" 可以绑定索引(强烈不推荐)或者主键

v-for:迭代对象 v-for="(属性值,属性名,索引值) in 对象"

2023年6月21日发(作者：)

HTML,Css,JavaScript,JQuery,Vue基础⾯试题（持续更新）1.表单中GET和POST两种提交⽅式的不同?Get:速度快,安全性低 通过浏览器地址栏传值,不⽀持中⽂

最多⽀持2000个字符,浏览器地址栏格式为key=value&keyN=valueN,只能传字符串post:速度慢,安全性⾼,不通过浏览器地址栏传值,通过消息体传值,不⽀持中⽂,不限制⼤⼩,⽀持Json和字符串2.表单元素input="text" 单⾏⽂本输⼊框input="password" 单⾏密码输⼊框input="checkbox" 多选input="radio" 单选input="file" 上传⽂件input="email" 邮箱input="date" ⽇期input="number" 数字input="tel" 电话input="submit" 提交input="reset" 重置表单input="image" 使⽤图⽚作为提交按钮select > option 下拉列表框中的优先级1.引⼊css的三种⽅式的优先级 ⾏内式 > 外链式和内嵌式谁放在后⾯听谁的如果出现冲突会覆盖冲突的部分2.基本选择器的优先级 id选择器 > 类别选择器 > 标记选择器 如果存在⾏内式,则⼀切以⾏内式为准4.页⾯的元素类型页⾯元素类型: 在css中将页⾯的元素分为很多种，主要有以下三种特点⽐较明显的元素1:内联元素（inline） 1:内联元素（inline） 内联元素结尾不换⾏,⼀⾏可以书写多个 从左到右依次排列, 元素的宽度⾼度与元素内部嵌套的内容有关 设置盒⼦模型⽆效 设置对齐⽅式⽆效 eg: span label a img*2:块元素（block） 2:块元素（block） 块元素,⾃动换⾏,⼀⾏只能书写⼀个,从上到下排序,设置盒⼦模型有效,对齐⽅式有效 如果不设置宽度 则元素⾃动占满整个⽗元素 eg: div p ul li h1~h6 pre img*3:空元素（empty） 3:空元素（empty） ⼀般不嵌套内容，直接⽤来设置页⾯的⼀些结构或者参数 多为整合标签 br hr metaimg img:(内联块元素 inline-block)是⼀个具备块元素特征的内联元素display display:设置元素类型 display:block 设置元素为块元素（互相转换⼀下） display:inline 设置元素为内联元素 display:none 隐藏元素5.盒⼦模型什么是盒⼦模型:在css中将⼀个个元素看做⼀个盒⼦摆放在页⾯上,由于⼤多数都是块元素,从上到下排列,这种排序⽅式成为标准⽂本流或者⽂档流,这些盒⼦可以通过设置⼀些参数,来改变他们周边的空间位置,那么这些参数组成了盒⼦模型内填充（padding），外边距（margin），边框（border）都有4个⽅向。⽐如内填充就有：padding-top, padding-right, padding-bottom, padding-left。简略写法: margin: 上 右 下 左; 四个值的时候 margin: 上 (右左) 下; 三个值的时候 margin: (上下) (右左); 两个值的时候 margin: (上右下左); ⼀个值的时候6.浮动在不设置宽度的前提下,块元素会占满⽗元素的整个空间,当设置浮动之后,元素开始向浮动⽅向不断缩⼩,直到缩⼩到内部的内容⼤⼩为⽌,之后漂浮在页⾯上,该元素之前的空间被其他元素占据float:left 左浮动float:right 右浮动float:both 两侧浮动如果不想让元素受到其它元素浮动的影响，则添加clear属性 clear:left;去除左浮动影响 clear:right;去除右浮动影响 clear:both;去除两侧浮动影响7.定位1:相对定位 根据元素的原先位置的左上⾓来定位,定位之后元素保持原先的类型, 元素原先的位置依然被占据，元素漂浮在页⾯上 top和bottom只能书写⼀个作为偏移量 left和right只能书写⼀个作为偏移量2:绝对定位 根据距离元素最近的定位过的祖先元素的左上⾓进⾏定位，定位之后，元素 不再保持原先的类型，原来的位置也被占⽤，元素漂浮在页⾯上，可能会遮挡 页⾯上的元素 注意如果没有定位过的祖先元素，则根据body来进⾏定位，也就是浏览器的 左上⾓来进⾏定位，这样可能会出现严重的页⾯问题ript的数据类型基本数据类型(7种) String number boolean null undefined

Symbol(ES6新特性) 表⽰⼀个独⼀⽆⼆的对象 BigInt(ES10新特性) 是对number的补充,⽤来表述2^53-1以外的数据精度复合数据类型 Object 由对象引出 Array Function Math Date等内置对象ript能否直接修改页⾯的样式和结构,如果不能,请说明理由?JavaScript不能直接修改页⾯的样式和结构,⽽是通过DOM模型来修改页⾯的结构和样式,浏览器⼀般存在⼀个引擎,这个引擎存在两个解析器,⼀个叫脚本解析器,⼀个叫标签解析器,浏览器从上到下解析,当解析完全⽂之后,会创建⼀个DOM模型,这个DOM模型全部封装在Document对象当中,Js并不是对页⾯上的元素进⾏增删改查,⽽是对DOM模型进⾏增删改查,修改完之后,模型和浏览器页⾯不⼀致时,浏览器会重新渲染页⾯使之保持⼀致ript中的⼏种选择器Javascript最基本的⼏个选择器 1:根据唯⼀的id在全⽂拿取元素 返回元素节点 Node mentById('id') 2:根据标签名拿取多个元素节点 这些节点组成⼀个类数组，这个类数组中 封装了所有获取的元素节点 NodeList mentsByTagName('tagName') 类数组其实就是DOM当中的数组，但是与ES规范也就是 Js中的Array并不是⼀码事，所以类数组⽆法使⽤ 部分Array的⽅法 const newArray = (NodeList) 3:根据name属性值拿取多个元素节点，返回类数组 NodeList mentsByName('name') 4:根据class属性拿取多个元素节点，返回类数组（民间） NodeList mentsByClassName('class') 尽量少⽤，严重兼容性问题根据特点使⽤场合的不同，DOM将页⾯节点分为12种， 我们常见的节点由以下⼏种 以下节点根据 nodeType nodeName nodeValue⼏个属性⽤以区分 1:⽂档节点 就是指的document，⼀个页⾯只有⼀个⽂档节点 也就是根元素 nodeType 9 nodeName #document nodeValue 不可⽤ 2:元素节点 就是指页⾯上的各种元素，通过 mentById()等拿取就是元素节点 nodeType 1 nodeName 标签名 nodeValue 不可⽤ 3:属性节点 就是指元素节点中的各种属性 XXX="XXX" 我们之前写的 name="" id="" class="" type="" nodeType 2 nodeName 属性名 nodeValue 属性值 4:⽂本节点 就是指页⾯中的各种字符串 nodeType 3 nodeName 永远是#text nodeValue 就是⽂本内容 5:注释节点 就是指页⾯中的注释 nodeType 8 nodeName 就是注释信息 nodeValue 不可⽤dow:BOM七对象之⼀，表⽰整个窗⼝，BOM(Browser

Object Model浏览器对象模型)，将浏览器的不同的功能 分别分为七个对象 window:表⽰整个窗⼝，也是BOM七个对象的 顶层对象，它包含着另外6个对象，属于全局变量 document:表⽰页⾯的正⽂部分，操作页⾯的元素 也是⽤此对象 location:表⽰浏览器的地址栏信息，⽤来负责页⾯的 条件以及地址的搜索等 navigator:浏览器信息，通过此对象可以查看当前页⾯ 使⽤的是何种浏览器进⾏解析 history:浏览器历史记录以及缓存信息 screen:⽤户显⽰器信息 frame:页⾯的已经框架，⽬前已经被淘汰的引⼊⽅式1.⾏内引⼊ 在标签内结合事件来使⽤2.内部引⼊ 在head或者body标签内定义script标签,然后在script标签内书写js代码3.外部引⼊ 引⼊⼀个独⽴的js⽂件创建数组的⽅式和迭代⽅式有两种创建数组的⽅式 arr = [1,2,3,4,5] arr = new Array[元素个数] arr[0] = ** arr[1] = ** ....迭代⽅式1.普通迭代 for(let i = 0;i<;i++){ (`${arr[i]}`) }5 for in 循环 for(let key in arr){ (`${arr[key]}`) }6 for of 循环 for(let value of ar){ value就是要被遍历的值 }4.循环体.forEach 循环体.forEach(a =>{ (`${a}`) })中创建对象的⽅式1:使⽤对象字⾯量来创建对象 let|const 对象名 = { 属性名:属性值; 属性名:属性值; 属性名:属性值; ⽅法名(){

} } 注意: 属性值不能加引号 属性名看数据类型来定(String,Number,boolean,null,undefined,Symbol,BigInt)2:使⽤构造⽅法来创建对象 使⽤构造⽅法可以复⽤⼀个对象 this:书写在某个对象中，则表⽰本对象 书写在对象或者函数外表⽰全局变量6新特性1.当属姓名和属性值⼀致省略写法 name:name => name;2.将类数组转化为数组 (类数组)3.⽅法名:function(){} 写为 ⽅法名(){}4.基本数据类型 Symbol5. 箭头函数 在js中为了简化书写，如果在书写匿名函数时 可以使⽤箭头函数，如果匿名函数中，存在⼀个以上 或者没有参数，则⼩括号保留，如果只有⼀个参数，则 ⼩阔号省略，function去掉，则参数之后添加=> 如果函数体直接是return，则省略return 省略 ⼤括号

6. 不再推荐使⽤var 使⽤let赋值变量 使⽤const赋值常量

7. 在前端中⼀般不使⽤后端的拼接字符串书写⽅式 这种书写⽅式太过繁琐了，如果遇到⼤量需要拼接的 地⽅⾮常容易出错 在ES6新规范中提出了模板字符串的概念 格式: `${要输出的值}`

17. = ,==, ===的区别 =:赋值 ==:⽐对，如果不是同⼀种数据类型，则转换为同⼀种 数据类型，进⾏⽐对 ===:如果两者不是同⼀种数据类型，则⽴刻返回false 如果是同⼀种数据类型则进⾏⽐对基本选择器1.$('tagName') : 根据标签名拿取元素2.$('.class') : 根据类名拿取元素3.$('#id') : 根据id拿取元素4.$('')/$('tagName#id') 拿取包含class或者id的特定元素5.$('sel1,sel2,sel3') : 只要符合其中任意⼀个就可以成功选取6.$('sel1 sel2 selN) : 拿取具有特定层级关系的元素7.$('*') : 拿取全部元素8.$('sel1 > sel2') : 拿取元素的特定⼦元素,仅仅拿取⼦元素9.$('sel1 + sel2') : 需要满⾜三个条件 向下选取,互为兄弟,必须紧邻10.$('sel1 ~ sel2') : 需要满⾜两个条件 向下选取,互为兄弟基本筛选器1.$(':first') : 拿取第⼀个元素,注意冒号之前⼀般书写元素名⽤来限定什么第⼀个元素2.$(':last') : 拿取最后⼀个3.$(':eq(index)') : 拿取索引值匹配index的元素4.$(':gt(index)') : 拿取索引值⼤于index的元素5.$(':lt(index)') : 拿取索引值⼩于index的元素6.$(':odd') : 拿取索引值是奇数的元素7.$(':even') : 拿取索引值是偶数的元素 0是偶数8.$(':has(sel)') : 拿取内部包含特定结构的元素9.$(':contains(text)') : 拿取包含特定⽂本的元素,注意包含即可10.$(':hidden') : 拿取隐藏的元素,必须指定限定条件11.$(':visible') : 拿取可见元素12.$(':root') : 拿取根元素13.$(':empty') : 拿取空元素,内部没有⽂本也没有⼦元素的元素14.$(':header') : 拿取所有的标题元素 h1~属性选择器1.$('[属性名=属性值]') : 拿取属性名匹配属性值的元素 注意必须⼀个字不差2.$('[属性名^=属性值开头]')3.$('[属性名$=属性值结尾')4.$('[属性名*=包含属性值]')5.$('[属性名!=属性值]')注意 : 这种选择器没有冒号,直接书写限定条件例如 : $('li[属性名^=属性值开头]') ==> $('li[id=thisisetoak]')

表单选择器1.$(":input") : 匹配所有input,textarea,select和button元素2.$(":text") : 匹配所有单⾏⽂本输⼊框3.$(":password") : 匹配所有单⾏密码输⼊框4.$(":checkbox") : 匹配所有复选框5.$(":radio") : 匹配所有单选框6.$(":submit") : 匹配所有提交按钮,理论上只匹配type="submit"的input或者button7.$(":image") : 匹配所有图像域8.$(":reset") : 匹配所有重置按钮9.$(":button") : 匹配所有按钮10.$(":file") : 匹配所有⽂件域11.$(':enabled') : 匹配所有可⽤元素12.$(':disabled') : 匹配所有不可⽤元素13.$(':checked') : 匹配所有选中的复选框元素14.$(':selected') : 匹配所有选中的option元素四⼤核⼼函数1) $('sel') 引号内书写选择器，在全⽂或者指定内容中 拿取元素 $('span#etoak')2) $(html) 直接在⼩括号内书写html超⽂本标签，多⽤来 配合⼀些⽅法使⽤ $('XXXXX')3) $(dom) 直接将js的节点放置在括号内进⾏转换 $(document)4) $(document).ready() 此⽅法在存在绑定事件时⼀般书写在函数最外侧 表⽰全⽂结构加载完毕时执⾏，类似js的 onload $(document).ready(function(){ XXXXX })的ready与js的onload有什么区别()⽅法在全⽂结构加载完毕并且其他要素⽆误的前提下就可以执⾏,⽽onload必须所有要素⽆误并且加载完毕才可以执⾏()全⽂可以执⾏多次,从上往下执⾏,onload全⽂只能使⽤⼀次,如果存在多个执⾏最后⼀个24.同步和异步的区别同步: ⽤户发出请求，必须等待响应的返回，响应返回之前 ⽤户⽆法进⾏任何操作，只能傻等在那⾥，当响应返回之后，整个页⾯会被完全刷新异步: ⽤户发出请求，不需要等待响应的返回，⽤户可以继续⾃⼰的其它动作，当响应 在未来的⼀个时间段返回之后，也不会刷新整个页⾯，⽽是仅仅修改页⾯的某⼀ 部分结构或者样式字符串和JS对象之间的转换1:JSON字符串中的键值全部转换为Js对象的属性名2:JSON字符串中的值全部转换为Js对象的属性值Js对象{ name:"elena", age:20,}JSON字符串{ "name":"elena", "age":20,}js对象 => json字符串ify(js对象)json字符串 => js对象(json字符串)的两种格式创建JSON数据⼀般在后端进⾏创建存在两种格式: 1:Map类型的json {key1:value1,key2:value2,} key:只能是字符串，必须使⽤双引号引起来 value: Java⼋种基本数据类型 String null JSON

注意:⽆法封装 可以封装 2:数组类型的json [value1,value2,valueN] value: Java⼋种基本数据类型 String null JSON

注意:⽆法封装 可以封装发送异步请求url:'提交异步发送到的⽬的地' 发送异步的⽅式

get:查询，不能传递json，通过url传值 post:添加，可以传递json，也可以通过url传值 put:修改，可以传递json，也可以通过url传值 delete:删除，不能传递json，通过url传值 type:'书写发送异步的⽅式'

返回的响应类型 text script html json xml ⽀持以上五种类型，如果设置为json，则返回的 数据类型就是已经通过()转换好了的 js对象dataType:'返回的响应类型'

是否使⽤异步 默认就是 true，如果设置为false，则使⽤同步 响应返回之前浏览器锁死，⽤户只能等待async:true,如果⼀切正常返回的回调函数success(resp){}如果出现异常返回的回调函数error(err){ 显⽰错误状态码 400:格式转换异常 404:⽆法找到资源 500:服务器编译错误 405:提交⽅式不匹配 200:⼀切正常}()和html()text() : 相当于js中的innerText，如果没有参数表⽰拿取元素中的⽂本，多个⽂本合并为⼀个 如果有参数，表⽰向元素中添加（覆盖）⽂本html() : 相当于js中的innerHTML，如果没有参数，则表⽰拿取元素中的超⽂本； 如果有参数，表⽰向元素中添加（覆盖）超⽂本innerHTML:拿取元素中的所有超⽂本（万物皆为超⽂本）innerText:拿取元素中的所有⽂本，如果存在多个⽂本,则合并为⼀个TML = XXXX向元素中插⼊超⽂本，原先的内容会被覆盖ext = XXXX向元素中插⼊⽂本，不⽀持标签，原先的内容会被覆盖29.绑定事件1.给元素绑定多个激发事件('事件1 事件2 事件N',function(){})jQuery中的事件就是js中的事件去掉on2.给元素绑定单⼀事件$(document).dblclick(function(){ ('谁双击我了呀~~~~')})3.⿏标滑过滑出事件( /* ⿏标滑过执⾏此函数 */ function(){ $(this).removeClass().addClass('red') }, /* ⿏标滑出执⾏此函数 */ function(){ $(this).removeClass().addClass('blue') })通过选择器拿取的元素与js中的元素节点是同⼀种元素吗？如果不是为什么？两者如何进⾏转换？jQuery元素是对js的节点的⼀个轻度的封装jQuery元素只能使⽤jQuery中的函数 ⽅法 属性等js节点也只能使⽤⾃⼰的函数⽅法等两者不能通⽤ 两者如何转换 jQuery => js $(0) $jqSp[0] js => jQuery $(nodeSp)31.理解前后端分离1.传统开发⽅式 前端⼈员开发页⾯；后端⼈员将html转换成jsp,实现页⾯的业务逻辑前后端依赖性强。 后端开发⼈员等待前端开发完毕才能进⾏页⾯转换、逻辑渲染 前端页⾯效果由后端控制，后端需要前端展⽰ 产品投产时，前后端代码部署在⼀台服务器2.前后端分离 前后端通过约定api接⼝，约定好接⼝，并⾏开发，耦合度低， 前端调整页⾯ 后端⽆需改动 后端提供数据，⽤户看到的效果由前端决定 前后端资源分离部署32.什么是MVVM思想MVVM是在MVP的基础上发展⽽来的⼀种思想根据语⾔的特⾊将其分为如下⼏层1:M层(Model) 就表⽰初始化在data中的数据源2:V层(View) 就表⽰页⾯的DOM3:VM层(view-model) vm就表⽰我们通过Vue类库创建的Vue实例 通过这个实例，当m层的数据发⽣更改之后 v层数据⽴刻发⽣改动（单项绑定） 当页⾯中的dom发⽣改动时，m层中的数据⽴刻 随之发⽣改动（双向绑定） 这个Vue实例可以将数据源与页⾯绑定起来33.在Vue中数据绑定存在两种⽅式 : 指令元素和⼤胡⼦表达式1.⼤胡⼦表达式 在标签外使⽤⼤胡⼦表达式 {{ 要输出的值 }}2.指令元素 v-html:后⾯绑定的值，就是插⼊元素的超⽂本 只⽀持html结构 css样式，不能添加js脚本 为了预防XSS⽹络攻击

v-once:⼀次性插值，将data中的数据插⼊到 页⾯中，之后不再保持任何绑定

v-model:使⽤在表单项中，类似表单项中的value属性 是唯⼀⼀个天⽣具有双向绑定功能的指令 注意⼤胡⼦表达式仅有单项绑定

v-on:后⾯绑定⼀个事件 v-on:click="函数名" 语法糖写法 @ @click="函数名" 注意函数如果没有参数，则不需要添加括号

v-bind:绑定⼀个元素的属性值 v-bind:属性名="data中的值" 语法糖写法 : :属性名="data中的值"

34.创建Vue实例的格式let vm = new Vue({ el:'', // element的简写，表⽰管理的DOM模板 data:{ 这⾥写要初始化的值 }, methods:{ 所有绑定的函数都放置在此对象内 }, computed:{ 设置计算属性 }, weatch:{ 设置侦听器 被侦听的初始化的数据(更改之后的值,原先的值){

// 侦听器只能侦听基本数据类型,如果想要侦听数组或者对象的变化则需要开启深度侦听

deep:true }

}, filter:{ 设置过滤器 }, ......})vm.$weatch('侦听的值',function(更改之后的值){})35.在Vue中 函数,计算属性,侦听器有什么不同？使⽤场合？1:函数 ⼀般绑定事件 函数没有缓存，不管参数是否改变，都会执⾏ （在控制台直接输⼊ vm.函数名() 则会有打印） 函数仅仅⽀持单项绑定，不⽀持双向绑定2:计算属性 可以绑定事件也可以直接使⽤, 计算属性存在缓存机制，如果数据没有变化，则不再 执⾏（在控制台输⼊ vm.计算属性 不会有打印） 计算属性默认也仅仅⽀持单项绑定，但是覆盖setter⽅法之后 则⽀持双向绑定3:侦听器 ⼀般不考虑什么绑定 侦听器是⽤来侦听某⼀个值，这个值存在默认值，当这个值 发⽣改变时，则侦听器执⾏。侦听器默认只能侦听基本数据类型 如果想侦听对象或者数组的变化，则必须开启深度侦听， deep:中绑定样式1.绑定class，后⾯是⼀个字符串 :class="初始化的值" 这个值对应⼀个类名

2.绑定class，后⾯是⼀个对象 :class="{类名1:boolean,类名2:boolean}" boolean值如果为true或者不为0，则类名⽣效 如果为false或者为0则类名失效

3.绑定class，后⾯是⼀个数组 :class="[类名,类名]"

4.绑定style，后⾯是⼀个对象 :style="{样式名:初始化的值,样式名:初始化的值}" 样式名必须使⽤驼峰中v-if和v-show的区别和使⽤场景1.v-if:如果后⾯为true或者不为0，则元素显⽰底层存在这个元素 否则如果为false或者为0，则元素不显⽰底层不存在这个元素 v-if适合切换频率低的场合使⽤, 可以配合v-else来搭配使⽤,必须紧邻,如果v-if隐藏，则执⾏v-else

2.v-show:如果后⾯为true或者不为0则元素显⽰，底层存在元素 如果后⾯为false或者为0，则元素不显⽰，底层依然存在元素， 但是元素上添加了⼀个display:none将元素隐藏 适合频繁切换的场合，初始载⼊消耗较⼤ 不能搭配中的迭代两种⽅式v-for:列表渲染,进⾏迭代 渲染数组: v-for=(别名,index) in 循环体 in 可以替换为 of 这个循环体必须初始化在data中 由于v-for会出现就近策略的bug，所以⼀般要设置可选组件 :key="索引值|主键" 可以绑定索引(强烈不推荐)或者主键

v-for:迭代对象 v-for="(属性值,属性名,索引值) in 对象"