2017校招
1 写出inline和inline-block的差别:
布局方式相同,唯一的区别在inline-block可以设置宽高,inline不可以。另外:inline设置上下内边距和上下外边距会造成一些mess。
2 写出五大主流浏览器的内核名称
ie(trident),firefox(gecho),google chrome(blink),safari(webkit),oprea(blinnk)
3 根据具体的情景写出一个JSON数据
知道JSON数据怎么写,了解JSON数据和JS对象的区别就可以,很简单。
4 考察字体大小的单位:rem,em,百分比
em:
核心观点:
可以复合计算,当前元素的一个em值的大小等于父元素的字体大小(如果父元素被定义了字体大小,递归找父元素),否则等于浏览器一般默认的16px
rem
核心观点:避免em的复合计算,相对root html元素的大小。
百分比:与em相似
5 隐藏元素的N种方式
opacity
.hide {
opacity: 0;
}
占据空间,可以响应用户交互,可以有动画。
visibility
.hide {
visibility: hidden;
}
占据空间,但是不响应用户交互,可以有动画。
display
display: none
不占据空间,不响应交互,没有动画。
Position
.hide {
position: absolute;
top: -9999px;
left: -9999px;
}
不占据空间,响应交互
6 jQuery中live,bind,on,delegate的区别
.bind()是直接绑定在元素上
.live()则是通过冒泡的方式来绑定到元素上的。更适合列表类型的,绑定到document DOM节点上。和.bind()的优势是支持动态数据。
.delegate()则是更精确的小范围使用事件代理,性能优于.live()
.on()则是最新的1.9版本整合了之前的三种方式的新事件绑定机制
7 如何去除img元素底部的空白
1.img{vertial-align:middle}
2.div{line-height:0}//div为img的父标签
3.img{float:left}
4.img{font-size:0}//会造成图文混乱
5.img{display:block}
1.svg画四边形,四个点的坐标分别是(220,100)(300,210)(170,250)(123,234)
<svg height="300">
<polygon points="220,100 300,210 170,250 123,234" style="fill:blue;stroke:black;stroke-width:1;">
</svg>
2.写出promise构造函数
var promise=new Promise(
function (resolve,reject) {
if("异步处理成功"){
resolve ();
}else{
reject();
}
});
promise.then(
function A () {
console.log("事件处理成功时的操作")
},
function B() {
console.log("事件处理失败时的操作")
}
)
3.如何让动态插入的div响应绑定事件
<div id="testdiv">
<ul></ul>
</div>
//jquery 1.7版以后使用on动态绑定事件
$("#testdiv ul").on("click","div", function() {
//do something here
});
4.如何阻止冒泡事件和默认事件
(1)阻止冒泡事件
function stopBubble(e) {
if(e && e.stopPropagation){
e.stopPropagation();
} else {
window.event.cancelBubble = true;
}
};
(2)阻止默认事件
function stopDefault(e){
if(e && e.preventDefault) {
e.preventDefault();
} else {
window.event.returnValue = false;
}
return false;
};
JavaScript停止冒泡和阻止浏览器默认行为
5.翻译:Using store state in a component simply includes returning the state within a computed property , because the store state is reactive . Triggering changes simply means committing mutations in component methods .
在组件中使用存储状态简单地包括在计算属性中返回状态,因为存储状态是被动的。触发的变化意味着在组件的方法进行突变。
6.实现ajax的过程和代码
(1)创建XMLHttpRequest对象;
(2)注册回调函数,在XMLHttpRequest中设置要发送的请求,利用的是open(first,second,third)方法
@param first:提交的方式 get或者是post
@param second:该次请求的路径url,如果是get,则需要在路径后加上传递的相应参数parama,该url为servlet对应的url
@param third:提交的模式是同步模式还是异步模式 true代表异步模式
(3)发送请求给服务器,利用的是xmlHttp.send(null) ,加上null代表火狐和ie都支持
(4)利用xmlHttp的onreadystatechange的事件来监视xmlHttp.readyState的状态,每次改变时都调用函数(回调函数)
(5)在回调函数中处理返回值 利用dom模型写到页面的指定位置 实现局部刷新
var XHR=null;
var XHRcreate=function() {
if (window.XMLHttpRequest) {
//针对FireFox,Mozillar,Opera,Safari,IE7,IE8
XHR = new XMLHttpRequest();
//针对某些特定版本的mozillar浏览器的BUG进行修正
if (XHR.overrideMimeType) {
XHR.overrideMimeType("text/xml");
}
} else if (window.ActiveXObject) {
//针对IE6,IE5.5,IE5
var activexName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
for (var i = 0; i < activexName.length; i++) {
try{
//如果创建失败,回抛出异常,然后可以继续循环,继续尝试创建
XHR = new ActiveXObject(activexName[i]);
break;
} catch(e){
}
}
}
}
XHRcreate();
XHR.onreadystatechange = callback;
//XHR.open("GET","login_verify.jsp?name="+ userName,true);
//XHR.send(null);
XHR.open("POST","AJAXXMLServer",true);
XHR.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
XHR.send("name=" + userName);
function callback() {
//判断对象的状态是交互完成
if (XHR.readyState == 4) {
//判断http的交互是否成功
if (XHR.status == 200) {
var responseText = XHR.responseText;
//通过dom的方式找到div标签所对应的元素节点(为了简便,这里客户端的程序未写了)
var divNode = document.getElementById("result");
divNode.innerHTML = responseText;
} else {
alert("error!");
}
}
}
7.new操作符做了什么?
(1)创建了一个空对象
var obj = new object();
(2)设置原型链
obj._proto_ = fn.prototype;
(3)让fn的this指向obj,并执行fn的函数体
var result = fn.call(obj);
(4)判断fn的返回值类型,如果是值类型,返回obj。如果是引用类型,就返回这个引用类型的对象。
if (typeof(result) == "object"){
fnObj = result;
} else {
fnObj = obj;
}
8.写出3种异步加载方案
异步加载又叫非阻塞加载,浏览器在下载执行js的同时,还会继续进行后续页面的处理。默认情况javascript是同步加载的,也就是javascript的加载时阻塞的,后面的元素要等待javascript加载完毕后才能进行再加载,对于一些意义不是很大的javascript,如果放在页头会导致加载很慢的话,是会严重影响用户体验的。异步加载主要有以下三种方式:
(1)async:
定义:async 属性规定一旦脚本可用,则会异步执行。
用法:<script type="text/javascript" src="async.js" async="async"></script>
注释:async 属性仅适用于外部脚本(只有在使用 src 属性时)。
注释:有多种执行外部脚本的方法:
如果 async=”async”:脚本相对于页面的其余部分异步地执行(当页面继续进行解析时,脚本将被执行);
如果不使用 async 且 defer=”defer”:脚本将在页面完成解析时执行;
如果既不使用 async 也不使用 defer:在浏览器继续解析页面之前,立即读取并执行脚本 。
(2)defer:
只支持IE
defer 属性规定是否对脚本执行进行延迟,直到页面加载为止。有的 javascript 脚本 document.write 方法来创建当前的文档内容,其他脚本就不一定是了。
如果您的脚本不会改变文档的内容,可将 defer 属性加入到
<script type="text/javascript" defer="defer">
alert(document.getElementById("p1").firstChild.nodeValue);
</script>
(3)创建script,插入到DOM中,加载完毕后callBack
function loadScript(url, callback){
var script = document.createElement_x("script")
script.type = "text/javascript";
if (script.readyState){ //IE
script.onreadystatechange = function(){
if (script.readyState == "loaded" || script.readyState == "complete"){
script.onreadystatechange = null;
callback();
}
};
} else { //Others: Firefox, Safari, Chrome, and Opera
script.onload = function(){
callback();
};
}
script.src = url;
document.body.appendChild(script);
}
19春招
1、写出手机号的正则表达式
^1[3|4|5|7|8]\d{9}$ ^开始符号 首位为1 第2位为3或4或5或7或8 后面9位为任意数字 $结束符号
2、css的继承属性
字体系列:font、font-size、font-weight
文本系列:text-align、line-height、color、text-transform
cursor、visibility、list-style
3、css制作动画效果的3个属性
transition、transform、animation
4、Promise的例子
function aaa(){
var p = new Promise(function(resolve,reject){
setTimeout(function(){
console.log('11111');
resolve('2222'); },1000); });
return p;}
aaa().then(function(data){
console.log(data);
});
5、css绘制一个直角梯形
一开始想到了border,但设置了高度,所以没有成功
<head>
<style>
.mask{ height: 0; width: 100px; border-top: 100px solid red; border-left: 37px solid transparent; }
</style>
</head>
<body>
<div class="mask"></div>
</body>
6、HTTP协议请求方式
get、post、put、head、connect、trace、options、delete
18年
JS基础是要有的,字符串函数 split() 还有数组一些api , reverse() join('') 这些要熟悉
正则表达式!是必考,反正我做的校招笔试题都会有问到,不直接问都会应用到。多益问的是写出手机号正则,还算简单
图像格式: .jpg .png .svg .gif 图像有啥区别
写出几个你网站优化的方法 : 应该往减少http请求,压缩源代码,控制图片大小,缓存,减少DOM操作方面等答。
原生AJAX 其实ajax蛮简单的,用的也很多。这个记住四步就可以了
form 表单 提交的属性 和请求的方法属性 分别是? action 和 method 这个method属性临时忘了,自己都想打一巴自己了
翻译英文片段, 多益还有这个题,有点够呛,看了应该是框架文档原文。
大题: 给你一段JSON数据,每条JSON代表一个对象,有个属性指向它的父对象,请把这段JSON转为一个树形结构的对象。
2、计算机网络中五层协议分别是什么,HTTP属于哪一层?
计算机网络中五层协议分别是(从下向上):1) 物理层 2)数据链路层 3)网络层 4)传输层 5)
应用层七层:物理层->数据链路层->网络层->传输层->会话层->表示层->应用层
其功能分别是:
1)物理层主要负责在物理线路上传输原始的二进制数据;
2)数据链路层主要负责在通信的实体间建立数据链路连接;
3)网络层主要负责创建逻辑链路,以及实现数据包的分片和重组,实现拥塞控制、网络互连等功能;
4)传输曾负责向用户提供端到端的通信服务,实现流量控制以及差错控制。(TCP、UDP)
5)会话层:定义了何时开始、控制和结束一个回话,包括对多个双向消息的控制和管理,以便在只完成连续消息的一部分时可以通知应用,从而使得表示层看到的数据是连续的,某些情况下,如果表示层收到了所有的数据,则用数据代表表示层。
6)表示层:主要功能是定义数据格式以及加密,
7)应用层为应用程序提供了网络服务。一般来说,物理层和数据链路层是由计算机硬件(如网卡)实现的,网络层和传输层由操作系统软件实现,而应用层由应用程序或用户创建实现。
3、传输层有哪些协议?TCP协议与UDP协议的区别。
传输层(Transport Layer)是OSI中最重要, 最关键的一层,是唯一负责总体的数据传输和数据控制的一层.传输层提供端到端的交换数据的机制,检查分组编号与次序。传输层对其上三层如会话层等,提供可靠的传输服务,对网络层提供可靠的目的地站点信息.主要功能: 为端到端连接提供传输服务.这种传输服务分为可靠和不可靠的,其中Tcp是典型的可靠传输,而Udp则是不可靠传输. 为端到端连接提供流量控制,差错控制,服务质量(Quality of Service,QoS)等管理服务. 具有传输层功能的协议: TCP UDP SPX NetBIOS NetBEUI
4、你听过 DNS吗?可以讲讲吗?(我只听过没印象) DNS(Domain Name System,域名系统),万维网上作为域名和IP地址相互映射的一个分布式数据库,能够使用户更方便的访问互联网,而不用去记住能够被机器直接读取的IP数串。通过域名,最终得到该域名对应的IP地址的过程叫做域名解析(或主机名解析)。DNS协议运行在UDP协议之上,使用端口号53。
5、排序算法有哪些?并给出时间复杂度
插入排序
选择排序
冒泡排序
快速排序
哈希排序
堆排序
6、事件响应问题事件:JavaScript 创建动态页面。事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。比如说,当用户单击按钮或者提交表单数据时,就发生一个鼠标单击(onclick)事件,需要浏览器做出处理,返回给用户一个结果。
7、你听过 ES6规范吗,列举一些你所知道的差别
答案请参考:https://blog.csdn.net/chenjuan1993/article/details/80952918