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  下拉列表框

3.css中的优先级

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 meta

img
    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来进行定位，也就是浏览器的
    左上角来进行定位，这样可能会出现严重的页面问题

8.JavaScript的数据类型

基本数据类型(7种)
    String  number  boolean  null  undefined 
    Symbol(ES6新特性) 表示一个独一无二的对象
    BigInt(ES10新特性) 是对number的补充,用来表述2^53-1以外的数据精度
复合数据类型
    Object
    由对象引出
    Array Function Math Date等内置对象

9.JavaScript能否直接修改页面的样式和结构,如果不能,请说明理由?

JavaScript不能直接修改页面的样式和结构,而是通过DOM模型来修改页面的结构和样式,浏览器一般存在一个引擎,这个引擎存在两个解析器,一个叫脚本解析器,一个叫标签解析器,浏览器从上到下解析,当解析完全文之后,会创建一个DOM模型,这个DOM模型全部封装在Document对象当中,Js并不是对页面上的元素进行增删改查,而是对DOM模型进行增删改查,修改完之后,模型和浏览器页面不一致时,浏览器会重新渲染页面使之保持一致

10.JavaScript中的几种选择器

Javascript最基本的几个选择器
    1:根据唯一的id在全文拿取元素
    返回元素节点
    Node document.getElementById('id')

    2:根据标签名拿取多个元素节点
    这些节点组成一个类数组，这个类数组中
    封装了所有获取的元素节点
    NodeList document.getElementsByTagName('tagName')
    类数组其实就是DOM当中的数组，但是与ES规范也就是
    Js中的Array并不是一码事，所以类数组无法使用
    部分Array的方法
    const newArray = Array.from(NodeList)

    3:根据name属性值拿取多个元素节点，返回类数组
    NodeList document.getElementsByName('name')

    4:根据class属性拿取多个元素节点，返回类数组（民间）
    NodeList document.getElementsByClassName('class')
    尽量少用，严重兼容性问题

11.DOM

根据特点使用场合的不同，DOM将页面节点分为12种，
    我们常见的节点由以下几种
    以下节点根据 nodeType nodeName nodeValue几个属性用以区分

    1:文档节点
    就是指的document，一个页面只有一个文档节点
    也就是根元素
    nodeType 9
    nodeName #document
    nodeValue 不可用

    2:元素节点
    就是指页面上的各种元素，通过
    document.getElementById()等拿取就是元素节点
    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 不可用

12.BOM

window:BOM七对象之一，表示整个窗口，BOM(Browser 
    Object Model浏览器对象模型)，将浏览器的不同的功能
    分别分为七个对象
        window:表示整个窗口，也是BOM七个对象的
        顶层对象，它包含着另外6个对象，属于全局变量
        document:表示页面的正文部分，操作页面的元素
        也是用此对象
        location:表示浏览器的地址栏信息，用来负责页面的
        条件以及地址的搜索等
        navigator:浏览器信息，通过此对象可以查看当前页面
        使用的是何种浏览器进行解析
        history:浏览器历史记录以及缓存信息
        screen:用户显示器信息
        frame:页面的已经框架，目前已经被淘汰

13.Js的引入方式

1.行内引入		在标签内结合事件来使用
2.内部引入		在head或者body标签内定义script标签,然后在script标签内书写js代码
3.外部引入		引入一个独立的js文件

14.JS创建数组的方式和迭代方式

有两种创建数组的方式
1.let arr = [1,2,3,4,5]
2.let arr = new Array[元素个数]
    arr[0] = **
    arr[1] = **
    ....
迭代方式
1.普通迭代
	for(let i = 0;i{
		console.log(`${a}`)
	})

15.JS中创建对象的方式

1:使用对象字面量来创建对象
	let|const 对象名 = {
		 属性名:属性值;
		 属性名:属性值;
		 属性名:属性值;
		 方法名(){
		 
		 }
	}
	注意: 属性值不能加引号  属性名看数据类型来定(String,Number,boolean,null,undefined,Symbol,BigInt)
2:使用构造方法来创建对象
	使用构造方法可以复用一个对象
    this:书写在某个对象中，则表示本对象
    书写在对象或者函数外表示全局变量window

16.ES6新特性

1.当属姓名和属性值一致省略写法  name:name => name;

2.将类数组转化为数组  Array.form(类数组)

3.方法名:function(){}  写为 方法名(){}

4.基本数据类型 Symbol

5.	箭头函数
    在js中为了简化书写，如果在书写匿名函数时
    可以使用箭头函数，如果匿名函数中，存在一个以上
    或者没有参数，则小括号保留，如果只有一个参数，则
    小阔号省略，function去掉，则参数之后添加=>
    如果函数体直接是return，则省略return 省略
    大括号
    
6.  不再推荐使用var
    使用let赋值变量
    使用const赋值常量
    
7.	在前端中一般不使用后端的拼接字符串书写方式
    这种书写方式太过繁琐了，如果遇到大量需要拼接的
    地方非常容易出错
    在ES6新规范中提出了模板字符串的概念
    格式:
    `${要输出的值}`
    

17. = ,==, ===的区别

 =:赋值
 ==:比对，如果不是同一种数据类型，则转换为同一种
 数据类型，进行比对
 ===:如果两者不是同一种数据类型，则立刻返回false
 如果是同一种数据类型则进行比对

18.jQuery基本选择器

1.$('tagName') : 根据标签名拿取元素
2.$('.class') : 根据类名拿取元素
3.$('#id') : 根据id拿取元素
4.$('tagName.class')/$('tagName#id') 拿取包含class或者id的特定元素
5.$('sel1,sel2,sel3') : 只要符合其中任意一个就可以成功选取
6.$('sel1 sel2 selN) : 拿取具有特定层级关系的元素
7.$('*') : 拿取全部元素
8.$('sel1 > sel2') : 拿取元素的特定子元素,仅仅拿取子元素
9.$('sel1 + sel2') : 需要满足三个条件 向下选取,互为兄弟,必须紧邻
10.$('sel1 ~ sel2') : 需要满足两个条件 向下选取,互为兄弟

19.jQuery基本筛选器

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~h6

20.jQuery属性选择器

1.$('[属性名=属性值]') : 拿取属性名匹配属性值的元素 注意必须一个字不差
2.$('[属性名^=属性值开头]')
3.$('[属性名$=属性值结尾')
4.$('[属性名*=包含属性值]')
5.$('[属性名!=属性值]')
注意 : 这种选择器没有冒号,直接书写限定条件
例如 : $('li[属性名^=属性值开头]') ==> $('li[id=thisisetoak]') 

21.jQuery表单选择器

1.$(":input") : 匹配所有input,textarea,select和button元素
2.$(":text") : 匹配所有单行文本输入框
3.$(":password") : 匹配所有单行密码输入框
4.$(":checkbox") : 匹配所有复选框
5.$(":radio") : 匹配所有单选框
6.$(":submit") : 匹配所有提交按钮,理论上只匹配type="submit"的input或者button
7.$(":image") : 匹配所有图像域
8.$(":reset") : 匹配所有重置按钮
9.$(":button") : 匹配所有按钮
10.$(":file") : 匹配所有文件域
11.$(':enabled') : 匹配所有可用元素
12.$(':disabled') : 匹配所有不可用元素
13.$(':checked') : 匹配所有选中的复选框元素
14.$(':selected') : 匹配所有选中的option元素

22.jQuery四大核心函数

1)  $('sel')
    引号内书写选择器，在全文或者指定内容中
    拿取元素
    $('span#etoak')

2)  $(html)
    直接在小括号内书写html超文本标签，多用来
    配合一些方法使用
    $('XXXXX')

3)  $(dom)
    直接将js的节点放置在括号内进行转换
    $(document)

4)  $(document).ready()
    此方法在存在绑定事件时一般书写在函数最外侧
    表示全文结构加载完毕时执行，类似js的
    onload

    $(document).ready(function(){
	    XXXXX
    })

23.jQuery的ready与js的onload有什么区别

1.ready()方法在全文结构加载完毕并且其他要素无误的前提下就可以执行,而onload必须所有要素无误并且加载完毕才可以执行
2.ready()全文可以执行多次,从上往下执行,onload全文只能使用一次,如果存在多个执行最后一个

24.同步和异步的区别

同步:
    用户发出请求，必须等待响应的返回，响应返回之前
    用户无法进行任何操作，只能傻等在那里，当响应返回之后，整个页面会被完全刷新
异步:
    用户发出请求，不需要等待响应的返回，用户可以继续自己的其它动作，当响应
    在未来的一个时间段返回之后，也不会刷新整个页面，而是仅仅修改页面的某一
    部分结构或者样式

25.JSON字符串和JS对象之间的转换

1:JSON字符串中的键值全部转换为Js对象的属性名

2:JSON字符串中的值全部转换为Js对象的属性值

Js对象
{
    name:"elena",
    age:20,
}

JSON字符串
{
    "name":"elena",
    "age":20,
}

js对象 => json字符串
JSON.stringify(js对象)

json字符串 =>  js对象
JSON.parse(json字符串)

26.JSON的两种格式

创建JSON数据一般在后端进行创建
存在两种格式:
    1:Map类型的json
        {key1:value1,key2:value2,keyN:valueN...}

        key:只能是字符串，必须使用双引号引起来
        value:
            Java八种基本数据类型
            String
            null
            JSON 

            注意:java.utils.Date无法封装
            可以封装java.sql.Date
    2:数组类型的json
        [value1,value2,valueN]
        value:
            Java八种基本数据类型
            String
            null
            JSON 

            注意:java.utils.Date无法封装
            可以封装java.sql.Date

27.ajax发送异步请求

url:'提交异步发送到的目的地'

	发送异步的方式 
        get:查询，不能传递json，通过url传值
        post:添加，可以传递json，也可以通过url传值
        put:修改，可以传递json，也可以通过url传值
        delete:删除，不能传递json，通过url传值
 type:'书写发送异步的方式'
 
	返回的响应类型
	text script html json xml
        支持以上五种类型，如果设置为json，则返回的
        数据类型就是已经通过JSON.parse()转换好了的
        js对象

dataType:'返回的响应类型'
 
是否使用异步
	默认就是 true，如果设置为false，则使用同步
	响应返回之前浏览器锁死，用户只能等待
async:true,

如果一切正常返回的回调函数
success(resp){

}

如果出现异常返回的回调函数
error(err){
	显示错误状态码
        400:格式转换异常
        404:无法找到资源
        500:服务器编译错误
        405:提交方式不匹配
        200:一切正常
}

28.text()和html()

text() : 相当于js中的innerText，如果没有参数表示拿取元素中的文本，多个文本合并为一个
			如果有参数，表示向元素中添加（覆盖）文本
html() : 相当于js中的innerHTML，如果没有参数，则表示拿取元素中的超文本；
			如果有参数，表示向元素中添加（覆盖）超文本

innerHTML:拿取元素中的所有超文本（万物皆为超文本）
innerText:拿取元素中的所有文本，如果存在多个文本,则合并为一个

XXX.innerHTML = XXXX
向元素中插入超文本，原先的内容会被覆盖
XXX.innerText = XXXX
向元素中插入文本，不支持标签，原先的内容会被覆盖

29.绑定事件

1.给元素绑定多个激发事件
sel.on('事件1 事件2 事件N',function(){

})
jQuery中的事件就是js中的事件去掉on
2.给元素绑定单一事件
$(document).dblclick(function(){
    console.log('谁双击我了呀~~~~')
})
3.鼠标滑过滑出事件
sel.hover(
    /* 鼠标滑过执行此函数 */
    function(){
        $(this).removeClass().addClass('red')
    },
    /* 鼠标滑出执行此函数 */
    function(){
        $(this).removeClass().addClass('blue')
    }
)

30.jQuery通过选择器拿取的元素与js中的元素节点是同一种元素吗？如果不是为什么？两者如何进行转换？

jQuery元素是对js的节点的一个轻度的封装
jQuery元素只能使用jQuery中的函数 方法 属性等
js节点也只能使用自己的函数方法等
两者不能通用

    两者如何转换
        jQuery => js
        $jqSp.get(0)
        $jqSp[0]

        js => jQuery
        $(nodeSp)

31.理解前后端分离

1.传统开发方式
    前端人员开发页面；后端人员将html转换成jsp,实现页面的业务逻辑前后端依赖性强。
    后端开发人员等待前端开发完毕才能进行页面转换、逻辑渲染
    前端页面效果由后端控制，后端需要前端展示
    产品投产时，前后端代码部署在一台服务器
2.前后端分离
    前后端通过约定api接口，约定好接口，并行开发，耦合度低，
    前端调整页面 后端无需改动
    后端提供数据，用户看到的效果由前端决定
    前后端资源分离部署

32.什么是MVVM思想

MVVM是在MVP的基础上发展而来的一种思想
根据语言的特色将其分为如下几层

1:M层(Model)
    就表示初始化在data中的数据源
2:V层(View)
    就表示页面的DOM
3: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:true

36.Vue中绑定样式

1.绑定class，后面是一个字符串
	:class="初始化的值"  这个值对应一个类名
	
2.绑定class，后面是一个对象
	:class="{类名1:boolean,类名2:boolean}"
	boolean值如果为true或者不为0，则类名生效
	如果为false或者为0则类名失效
	
3.绑定class，后面是一个数组
	:class="[类名,类名]"
	
4.绑定style，后面是一个对象
	:style="{样式名:初始化的值,样式名:初始化的值}"
	样式名必须使用驼峰

37.Vue中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-else

38.Vue中的迭代两种方式

v-for:列表渲染,进行迭代
	渲染数组:
	    v-for=(别名,index) in 循环体
	    in 可以替换为 of 这个循环体必须初始化在data中
	由于v-for会出现就近策略的bug，所以一般要设置可选组件
	:key="索引值|主键"
	可以绑定索引(强烈不推荐)或者主键
	
v-for:迭代对象
	v-for="(属性值,属性名,索引值) in 对象"