代码拉取完成,页面将自动刷新
1. 简述CSS盒子模型
CSS盒子模型分为W3C标准盒子(内容盒子)模型和IE盒子(边框盒子)模型。
盒子模型是由内容区、padding区、border区、margin区组成。
盒子模型相互转换使用box-sizing属性,属性值content-box代表W3C标准盒子模型,即设置的宽高是内容区的宽高,属性值border-box代表IE盒子模型,即设置的宽高是盒子的宽高。
2. css选择器的优先级如何计算?
由三个因素决定,特权,特性值,顺序决定
特权:在规则的后面添加!important
特性值:
1000 声明在style属性中的
100 id选择器
10 类选择器,伪类选择器
1 元素选择器,伪元素选择器
顺序:当特性值相同,后者覆盖前者
3. 简述css3的布局机制?
浮动布局
浮动元素的特点(脱离文档流)
定位布局
相对定位,绝对定位,固定定位,粘滞定位(相对点)
伸缩盒布局
伸缩盒容器,伸缩盒元素
栅格布局(第三方布局机制,利用浮动布局或者定位布局封装的企业级布局机制)
4. 如何实现盒子居中?尽可能多的方式说明(要求学生文字与代码配合)
水平居中
margin:0 auto;
水平垂直居中
垂直居中的需求要比水平居中少一些,一般要明确父元素的高度、子元素高度,通过父元素的padding来挤压;或者是通过绝对定位
1) 父元素position
1. 父元素相对定位,子元素绝对定位,子元素margin:auto;top:0;left:0;bottom:0;right:0;
2. 父元素相对定位,子元素绝对定位,子元素left:50%,top:50%;margin-left:-子元素一半的宽度;margin-top: - 子元素一半的高度
2) 父元素display
3. 父元素display:flex; justify-content:center; align-items:center,子元素自动居中 (伸缩盒布局)
4. 父元素display:table-cell; vertical-align:middle; 子元素margin:auto
5. 简述HTTP协议
http协议是超文本传输协议,是客户端和服务器端进行交互的时候需要遵守的网络协议。
http协议中有请求报文和响应报文,请求报文中有请求头和请求体,响应报文中有响应头和响应体。
如果在浏览器中是以get方式向服务器发起的http请求,则请求参数以查询字符串形式携带在url后。
如果在浏览器中是以post方式向服务器发起的http请求,则请求参数携带在请求体中。
6. 简述一下从在浏览器打开一个网页到网页加载完毕中间发生了什么事情?越详细越好
浏览器输入url地址-> 浏览器根据url封装为请求报文->请求报文发送到服务器端->服务器端对请求报文进行解析获取path,参数等信息->服务器端进行资源的查询->服务器端将前端需要的资源封装为响应报文-> 浏览器接收响应报文->浏览器进行解析
首先客户端浏览器发起http请求,然后服务器接收到请求,给出一个页面,浏览器接收到响应的html页面后,首先加载html页面,然后解析html代码,发现有外部css或者js引入后,开始加载外部css或者js,然后解析外部css或者js,最终将css与html代码绑定生成DOM树,然后渲染到浏览器中。
7. 简述javascript对象的几种创建方式
单个对象创建
构造函数方式 new Object()
对象字面量方式 {}
批量对象创建
工厂模式,所有创建出来的对象都是Object类型
构造函数模式,实例可以分类,但是方法冗余
原型模式,所有实例的属性和方法都在构造函数的原型对象中,对于每一个实例所私有的属性和方法不友好。
构造函数+原型模式(组合模式),实例私有的属性和方法放到构造函数中,实例公共的属性和方法放到原型对象中。
8. ajax是什么?你在开发中如何使用ajax?
ajax是异步的JavaScript和XML。用来进行异步请求。浏览器可以向服务器发送一个ajax请求,进行页面的局部刷新。
使用ajax:原生的ajax、jQuery封装的ajax、单独的http封装的第三方的库axios
原生ajax:
var httpRequest = new XMLHttpRequest();
//建立连接
httpRequest.open('get', 'http://47.106.244.1:8099/manager/category/findAllCategory');
//发送请求
httpRequest.send();
//接受响应
httpRequest.onreadystatechange = function () {
// http请求完成,并且状态是200的时候,代表请求成功
if (httpRequest.readyState === 4 && httpRequest.status === 200) {
//获取响应数据
console.log(httpRequest.responseText);
}
if (httpRequest.readyState === 4 && httpRequest.status === 500) {
console.log('错误:' + httpRequest.responseText);
}
}
9. 什么是深拷贝和浅拷贝,如何进行浅拷贝
es5
深拷贝:值拷贝,在内存中克隆一份与原数据完全一致的数据,变量的指针指向不同的内存地址
浅拷贝:地址拷贝,两个变量指向相同的内存地址
dom
10. js中如何 监听1 一个对象中属性的变化
var obj = {name:"terry",age:1}
Object.defineProperty(obj,"age",{
configurable:true,
set(){},
get(){}
})
obj.age++; // 当为obj.age赋值的时候就会调用set方法,达到静态age值改变的目的
11. 模拟Array.prototype.forEach编写Array.prototype.myForEach
Array.prototype.myForeach = function(handler){
for(var i=0;i<this.length;i++){
handler.call(this,this[i],I,this);
}
}
12. 如何理解js中的原型
每个函数都有一个原型与之对应
实例可以调用原型中的方法及属性,实例的原型默认为其构造函数的原型
通过原型可以完成原型链继承
可以通过_proto__来访问对象的原型,通过Object.setPrototypeOf、Object.getPrototypeOf来设置或者获取原型
13. 当我们调用一个方法如何获取该方法的反馈结果?分别在哪种情况下使用。
可以使用return一个值来返回结果(同步的时候使用),或者使用回调函数来将结果抛出(异步的时候使用)。
function test(a,b){
return a+b;
}
function test(a,b,fun){
fun(a+b);
}
14. 说明RegExp.prototype.test()与String.prototype.search()的异同点
都是用于检测字符串中是否有满足正则表达式的内容
test()是正则表达式对象调用的,支持全局检索
search()是字符串调用的,不支持全局检索
15. 在开发过程中,我们经常会使用到cdn资源,请说明你在什么情况下使用了cdn资源,使用cdn好处在哪里?
引用第三方资源的时候使用cdn,例如导入jQuery、iconfont、animate.css等资源的,无需下载,只需要通过script或link方式导入cdn的资源即可。好处在于其加载速度高,获取方便。
16. 简述事件流
发生在嵌套的html结构中,为每层html都绑定事件
事件捕获:由外层元素到内层元素
事件冒泡:由内层元素到外层元素,一般事件处理函数的执行沿着事件冒泡的顺序进行
17. 什么是事件代理?什么情况下会使用事件代理?
不将事件处理函数直接绑定到目标dom元素上,而是绑定在其父元素上。其好处在于只需要在父元素绑定就可以为所有的子元素代理事件,当子元素动态添加或者删除的时候也不会影响。
18. 在阿里云使用过程中,如何进行文件的远程传输?如何进行远程登录?
scp命令用于远程传输,也可以使用filezilla、cyberDuck(小黄鸭)等第三方工具
ssh命令用于远程登录
19. 为什么要使用阿里云?它在我们开发中扮演什么角色?
阿里云可以提供一个远程服务器,可以使用它进行linux学习,js学习,也可以用于搭建个人网站。
阿里云等云服务器一般作为项目的部署服务器,需要在阿里云上安装一些项目部署的环境,需要掌握基本的命令操作和vim操作。
20. 假设有数组[8,2,32,4,1,9],编写算法进行升序排列,算法不做要求,可以使用冒泡/选择/插入…
var arr = [8,2,32,4,1,9];
第一种:var result = arr.sort();
第二种:var result = arr.sort(function(a,b){
return a-b;
});
第三种:var result = arr.sort(function(a,b){
if(a-b<0){
return -1;
}else{
return 1;
})
第三种(冒泡排序)
for (var i = 0; i < arr.length-1; i++) { //控制比较几轮
for (var j = 0; j < arr.length - 1 - i; j++) { //控制每轮内的比较
if (arr[j] > arr[j + 1]) {
var temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
第四种(选择排序):
for (var i = 0; i < arr.length - 1; i++) {
//假设0位是最小的
var minIndex = i;
//从之后的元素中找最小的
for (var j = i + 1; j < arr.length; j++) {
if(arr[j] < arr[minIndex]){
minIndex = j;
}
}
var temp = arr[i];
arr[i] = arr[minIndex];
arr[minIndex] = temp;
}
第五种(插入排序):
for(var i=0;i<arr.length-1;i++){
//比较相邻元素,如果当前要插入的元素比之前的相邻元素小,交换
for(var j=i+1;j>0;j--){
if(arr[j]<arr[j-1]){
var temp = arr[j];
arr[j] = arr[j-1];
arr[j-1] = temp;
}
}
console.log('第'+(i+1)+'轮',arr);
}
console.log('排序后的数组',arr);
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。