p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 16.0px "PingFang SC"; color: #000000 }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 16.0px Helvetica; color: #000000 }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 16.0px Helvetica; color: #000000; min-height: 19.0px }
p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; text-align: justify; font: 16.0px "PingFang SC"; color: #000000 }
p.p5 { margin: 0.0px 0.0px 0.0px 0.0px; text-align: justify; font: 16.0px Helvetica; color: #000000 }
p.p6 { margin: 0.0px 0.0px 0.0px 0.0px; text-align: justify; font: 16.0px "Times New Roman"; color: #000000; min-height: 18.0px }
li.li1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 16.0px "PingFang SC"; color: #000000 }
span.s1 { font: 16.0px Helvetica }
span.s2 { }
span.s3 { font: 16.0px "PingFang SC" }
span.s4 { font: 16.0px Helvetica }
span.s5 { font: 16.0px Helvetica; text-decoration: underline }
span.s6 { font: 16.0px "Times New Roman" }
span.Apple-tab-span { white-space: pre }
ol.ol1 { list-style-type: upper-alpha }
1.标签上title与alt属性的区别是什么?
title是设置鼠标移动到图片上时显示的内容,而alt是用于当图片没有正常显示时出现的提示文字,另外alt还用于在seo中针对图片的优化说明.
2.<p>标签内的文字是什么颜色的?
<style>
.classA{color:blue !important;}
.classB{color:red;}
</style>
<body>
<p class=‘classB classA’ style=‘color:green’>123</p>
</body>
答:文字是blue蓝色,! important ,可以更改默认的CSS样式优先级规则,使该条样式属性声明具有最高优先级
3. css单位px,em,rem的区别。
px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的
px的特点:
1. IE无法调整那些使用px作为单位的字体大小;
2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位;
3. Firefox能够调整px和em,rem,但是96%以上的中国网民使用IE浏览器(或内核)。
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸
EM特点
1. em的值并不是固定的;
2. em会继承父级元素的字体大小。
rem是CSS3新增的一个相对单位(root em,根em),这个单位引起了广泛关注。这个单位与em有什么区别呢?区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。目前,除了IE8及更早版本外,所有浏览器均已支持rem。对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。
4.DOMContentLoaded 与 OnLoad事件的区别。
onload会在html,css,js,图片等资源文件加载完成后执行里面的代码,而DOMContentLoaded则只需在html,css,js加载完成后就执行里面的代码。
5.“==”和“===”的不同。
==用于一般比较,===用于严格比较,==在比较的时候可以转换数据类型,===严格比较,只要类型不匹配就返回flase
6.JavaScript的数据类型都有哪些?
JavaScript中有5种简单数据类型(也称为基本数据类型):Undefined、Null、Boolean、Number和String。还有1种复杂数据类型——Object,Object本质上是由一组无序的名值对组成的
7. var foo = “11” + 2 - “1”;
foo 输出的是?
typeof foo输出的是?
foo输出的是111,首先字符串11+数字2,执行字符串连接为112,而后减1,是将112执行隐式类型转换为数字112后再减1,所以最后结果是111
typeof foo,为number
8.split() join()的区别在哪?
split是将字符串分割为数组,而join是将数组中的值连接为字符串
9.数组方法pop() push() unshift() shift()的区别在哪?
pop是删除数组最后一位
push是在数组最后一位插入一个新元素
unshift是在数组开头添加一个或更多元素
shift是将数组开头的元素删除
10.JavaScript的事件流模型都有哪些?
在各种浏览器中存在三种事件模型:原始事件模型( original event model),DOM2事件模型,IE事件模型.
原始事件模型简单来说就是用on+事件名的方式绑定的事件,比如onclick,onsubmit等
dom2事件模型就是通过addEventListener绑定的事件,可以通过event.stopPropagation()来停止事件的传播,调用preventDefault()来阻止浏览器的默认行为
IE模型也提供了一个event对象封装了事件的详细信息,但是IE不把该对象传入事件处理函数,由于在任意时刻只会存在一个事件,所以IE把它作为全局对象window的一个属性,IE中的事件传播模式对应于DOM2的第二和第三阶段,首先执目标元素的处理函数,然后向上传播到达document,ie中只能能捕捉鼠标事件,而DOM2中可以捕捉所有的事件,IE中注册和删除事件处理函数的方法也不同于DOM2.
事件处理函数的注册和删除是通过元素的attachEvent( "eventType","handler") and detachEvent("eventType","handler" ),与dom2不同的是eventType有on前缀
11.请按执行顺序写出几次alert()语句a的值:
function fn1() {
var a = 1;
function fn2() {
alert(a++);
}
return fn2;
}
var f = fn1();
f();
f();
两次:第1次1,第二次2,var f=fn1()的时候只是调用了fn1这个函数并将fn2作为返回值返回,并未执行fn2里面的内容.
在第一个f()的时候就是执行fn2里面的内容,同时因为fn2是一个闭包函数,调用了fn1中的a,所以a为1,至于a++,因为a++为后自加,先引用a,再进行自加操作,所以第一次弹出为1,而第二个f(),因为a的值已经++过了,所以弹出2.
12.请按要求操作数组。a:
i. 如何删除数组a中第2个元素(即:“B”)?
var a = [“A”, “B”, “C”, “D”];
a.splice(1,1);
ii. 如何删除数组a中最后一个元素?
var a = [“A”, “B”, “C”, “D”];
a.pop()
iii. 如何将“NEW”插入数组a的“B”和“C”之间?
var a = [“A”, “B”, “C”, “D”];
a.splice(2,0,”new”);
13.以下技术您用到过哪些?
EasyUI BootStrap jQuery jQuery Mobile zepto ExtJS
angular react backbone redux grunt gulp seats nodeJS
swiper web pack requireJS
略
14.var stringArray = [“Hello”, “World”],给出您能想到的最好的方法输出“Hello World”。
stringArray.join(“ ”);
15.typeof输出的类型有哪些A.number B.string C.null D.undefined
16.以下关于Array数组对象的说法不正确的是(c)
A.对数组里数据的排序可以用sort函数,如果排序效果非预期,可以给sort函数加一个排序函数的参数。
B.reverse用于对数组数据的倒序排列。
C.向数组的最后位置加一个新元素,可以用pop方法。
D.unshift方法 用于向数组删除第一个元素。
17.以下哪些是css伪类?(c,d)after和before是伪元素
A.after B.before C.hover D.nth-child
18.javascrip的基本数据类型有哪些?(a,b,e,f,g)
A.number B.string C.object D.array E.null F.undefined G.boolean
19.以下不是html5元素的有哪些?(b,c)
A.footer B.center C.font D.frame
20.下面有关浏览器中使用js跨域获取数据的描述。说法错误的是?a
A.域名,端口相同,协议不同,属于相同的域。
B.js可以使用jsonp进行跨域。
C.通过修改document.domain来跨子域。
D.使用window.name来进行跨域。
21.下述有关css属性position的属性值的描述。 语法错误的是?b
- static:没有定位,元素出现在正常的流中。
- fixed:生成绝对定位的元素,相对于父元素进行定位。
- relative:生成相对定位的元素,相对于元素本身正常位置进行定位。
- absolute:生成绝对定位的元素,相对于static定位意外的第一个祖先元素。
22.CSS实现隐藏页面元素的方法有哪些?
display:none; visibility: hidden;opacity:0; position:absolute;left:-10000px;
23.请写出打印出来的值。
var flag = true;
if (flag) {
var a = 10;
}
function fn() {
var b = 20;
c = 30;
}
fn();
console.log(a);
console.log(c);
console.log(b);
答:10,30,报错(b是在fn内部定义,全局并没有b这个变量)
24.xhtml和html有什么区别?
xhtml比HTML严谨性会高点,然后基本语言都还是沿用的HTML的标签,只不过废除了部分表现层的标签,同事在标准上要求高了点比如标签的严格嵌套,标签结束等等
25.每个html文件里开头都有个Doctype。这是代表了什么意思?
版本声明
26.问题 strong与em的异同?
语义都是语气加重,strong在显示上是变粗,而em是斜体显示
27.行内元素有哪些?块级元素有哪些?
块状:* <ol>
* <ul>
* <dl>
* <table>
* <h1>...<h6>
* <p>
* <blockquote>
* <dt>
* <address>
* <caption>
* <div>
内联(行内):
* a - 锚点
* abbr - 缩写
* acronym - 首字
* b - 粗体(不推荐)
* bdo - bidi override
* big - 大字体
* br - 换行
* cite - 引用
* code - 计算机代码(在引用源码的时候需要)
* dfn - 定义字段
* em - 强调
* font - 字体设定(不推荐)
* i - 斜体
* img - 图片
* input - 输入框
* kbd - 定义键盘文本
* label - 表格标签
* q - 短引用
* s - 中划线(不推荐)
* samp - 定义范例计算机代码
* select - 项目选择
* small - 小字体文本
* span - 常用内联容器,定义文本内区块
* strike - 中划线
* strong - 粗体强调
* sub - 下标
* sup - 上标
* textarea - 多行文本输入框
* tt - 电传文本
* u - 下划线
* var - 定义变量
28.css选择符有哪些?哪些属性可以继承?优先级算法如何计算?
选择符:http://www.360doc.com/content/14/0104/22/15643_342679505.shtml
除了这些都可以继承:display、margin、border、padding、background、height、min-height、max- height、width、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、 page-bread-before和unicode-bidi
原则一: 继承不如指定
原则二: #id > .class > 标签选择符
原则三:越具体越强大
原则四:标签#id >#id ; 标签.class > .class
CSS优先级包含四个级别(标签内选择符,ID选择符,Class选择符,元素选择符)以及各级别出现的次数!
根据这四个级别出现的次数计算得到CSS的优先级。
CSS优先级的计算规则如下:
* 元素标签中定义的样式(Style属性),加1,0,0,0
* 每个ID选择符(如 #id),加0,1,0,0
* 每个Class选择符(如 .class)、每个属性选择符(如 [attribute=])、每个伪类(如 :hover)加0,0,1,0
* 每个元素选择符(如p)或伪元素选择符(如 :firstchild)等,加0,0,0,1
然后,将这四个数字分别累加,就得到每个CSS定义的优先级的值,
然后从左到右逐位比较大小,数字大的CSS样式的优先级就高。
29.HTML5文档类型和字符集是?
<!DOCTYPE html>
<meta charset="UTF-8">
30.HTML5中canvas是什么?datalist是什么?
canvas:绘图标签,可以使用它制作游戏和图像处理
datalist:<datalist> 标签定义选项列表。与 input 元素配合使用该元素,来定义 input 可能的值
31.请分别使用原生js,jquery获取标签信息。(<div id=“div1”>这是一个DIV标签</div>)
document.getElementById(“div1”).innerHTML;
document.querySelector(“#div1”).innerText;
$(“#div1”).html()
32.求下面两种情况下,a和b的值是多少?
题目1:var a = 1; function func1(){a=b=5;} alert(a); alert(b);
题目2:var a = 1; function func1(){var b = 1;a=b=5;}alert(a);alert(b);
题目1答:如果在alert(a)前没有调用func1的话就1,和报错,b没定义,如果调用了func1的话就是5,5
题目2答:如果在alert(a)前没有调用func1的话就1,和报错,b没定义,如果调用了func1的话就是5,和报错,因为b是在func1中定义的局部变量,在全局获取不到
34.将数组[“a”, “b”, “c”, “d”]转化为字符串”d#c#b#a”;
[‘a’,’b’,’c’,’d’].join(“#”)
35.对应写出下列输出值。
alert(typeof(null))
alert(typeof(NaN))
alert(typeof(undefined))
alert(typeof(“undefined”))
alert(NaN == undefined)
alert(NaN == NaN)
答:
alert(typeof(null))//object
alert(typeof(NaN))//number
alert(typeof(undefined))//undefined
alert(typeof("undefined"))//string
alert(NaN == undefined)//false
alert(NaN == NaN)//false
36.获取enent目标对象的方法(要求兼容性)。
document.onclick = function (ev){
var e = ev||window.event;
}
37.经常使用的页面开发工具以及测试工具。
sublime,hbulider,webstorm,测试工具:mocha
38.经常使用什么脚本库,开发或使用过什么应用或组建。
jquery,zepto
39.请写出代码执行结果
var a;
alert(a); ___undefined_________
alert(typeof a); undefined______________
alert(b); 报错_________________
40.旧版本的IE浏览器(如:IE6,IE7)的默认盒模型,W3C定义的合模型,二者之间有什么不同?
ie的width是包含border和padding的,也称为怪异模式,触发条件是在没写版本声明的时候
而w3c的width就width不含border和padding
41.以下HTML代码片段,有几种方法让该div在浏览器中横向居中?
<div style=“width:200px;height:100px;”></div>
第一种:<div style=“width:200px;height:100px; margin:0 auto”></div>
第二种:<div style="width:200px;height:100px; position:absolute; left:50%; margin-left:-100px;”></div>
第三种:<div style="width:200px;height:100px; position:absolute; left:50%; transform:translate(-50%,0)"></div>
42.以下css代码片段,在IE6,IE7,IE8,Firefox,Chrome下分别呈现什么颜色?
.browers{
background-color:#000000;/*黑色*/
background-color:#ff0000\9;/*红色*/
+background-color:#00ff00;/*绿色*/
_background-color:#0000ff;/*蓝色*/
}
在firefox和chrome中显示的是黑色
在ie8下是红色(\9是ie8的hack)
在ie7下是绿色(+是ie7的hack)
在ie6下是蓝色(_是ie6转有hack)
43.如何做到让一个div隐藏但是却在html流中占位?
visibility: hidden;和opacity:0;
44.请写一段json字符串,包含所有的数据类型.
{"a":"string","b":5,"c":[1,2,3,4],"d":{"e":"obj"}}
45.请按执行顺序写出几次alert()语句a的值:
var a = 10;
function fn() {
alert(a);
var a = 100;
alert(a);
}
fn();
alert(a);
undefined,100,10
46.请按执行顺序写出几次alert()语句a的值:
function fn1(){
var a = 1;
function fn2(){
alert(a++);
}
fn2();
}
fn1();
fn1();
1,1
47.下面的输出是?
<style>
.red{color:red;}
.blue{color:blue;}
</style>
<p class=“blue red”></p>
蓝色
48.怎样添加,移除,移动,复制,创建和查找节点?
appendChild,removeChild,replaceChild,cloneNode,createElement,getElementById(ByTagName)
49.用js写一个正则匹配标签中是否包含一个class?
var className = "active";
var reg = new RegExp(“\\b"+className+"\\b");
50.阅读以下代码回答:hello world 是什么颜色?
<style>
.classA{color:red;}
.classB{color:yellow;}
</style>
<p class=“classB classA”>hello world</p>
yellow
51.完善以下代码:
<div style=“height:50px;” id=“content”>
<p>铝神公司</p>
</div>
(1).请用CSS实现”铝神公司”在div内水平垂直居中?
(2).请用javascript将字体设置为红色.
答:(1)
第一种写法:
*{
margin: 0;
}
div{
text-align: center;
line-height: 50px;
}
第二种写法:
*{
margin: 0;
}
div{
display: table;
width: 100%;
}
div p{
display: table-cell;
width: 100%;
text-align: center;
vertical-align: middle;
}
第三种写法:
*{
margin: 0;
}
div{
position: relative;
}
div p{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
(2)
第一种:content.style.color=“red”,高级浏览器id不用获取
第二种: document.getElementById(“content”).style.color=“red”
第三种:document.querySelector(“#content").style.color="red";
52.写一个函数,将一串字符串中空格替换”.”,如replace(“铝 神 欢 迎 你”)=“铝.神.欢.迎.你”
第一种:
function re(s){
return s.replace(/\s/g,".");
}
第二种:
function re(s){
return s.split(" ").join(".");
}
53.请用CSS实现4个div的水平排列占满一行,要求4个div宽度相同,有10px的padding值.
div{
float: left;
width: 25%;
height: 100px;
background-color: #ccc;
padding: 10px;
box-sizing:border-box;
}
54.对作用域上下文和this的理解,看下列代码:
var User = {
count:1,
getCount:function(){
return this.count;
}
};
console.log(User.getCount());//??
var func = User.getCount;
console.log(func());//??
1,undefined
55.<!DOCTYPE html>中DOCTYPE有什么作用,去掉会有什么影响?
声明文档类型,在ie6下如果去掉会进入怪异模式,width包含padding和border
56.HTML行内元素有哪些,块级元素有哪些?画出CSS盒模型。
上面有
57.内联和important哪个优先级更高?
important更高
58.清除浮动的几种方式?
第一种:clear:both;
第二种:overflow:hidden;
第三种:父级一起浮动
第四种:父级定义:after伪元素配合zoom解决ie6,7
第五种:父级加position:absolute
59.HTML5存储类型有哪些?
cookies:存储大小为4k
localstorage:以键值对(Key-Value)的方式存储,永久存储,永不失效,除非手动删除,大小为5m
sessionstorage:HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的,区别在于 sessionStorage 在关闭页面后即被清空,而 localStorage 则会一直保存
离线缓存(application cache):本地缓存应用所需的文件
Web SQL:关系数据库,通过SQL语句访问
Web SQL 数据库 API 并不是 HTML5 规范的一部分,但是它是一个独立的规范,引入了一组使用 SQL 操作客户端数据库的 APIs。
60.HTTP状态码有哪些,分别代表什么意思?
如果是1开头的代表请求已被接受,需要继续处理
如果是2开头这一类型的状态码,代表请求已成功被服务器接收、理解、并接受
如果是3开头这类状态码代表需要客户端采取进一步的操作才能完成请求
如果是4开头这类的状态码代表了客户端看起来可能发生了错误,妨碍了服务器的处理
如果是5开头这类状态码代表了服务器在处理请求的过程中有错误或者异常状态发生,也有可能是服务器意识到以当前的软硬件资源无法完成对请求的处理
61.CSS3新增伪类选择器有哪些?
:first-of-type p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
:last-of-type p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
:only-of-type p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
:only-child p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。
:nth-child(n) p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。
:nth-last-child(n) p:nth-last-child(2) 同上,从最后一个子元素开始计数。
:nth-of-type(n) p:nth-of-type(2) 选择属于其父元素第二个 <p> 元素的每个 <p> 元素。
:nth-last-of-type(n) p:nth-last-of-type(2) 同上,但是从最后一个子元素开始计数。
:last-child p:last-child 选择属于其父元素最后一个子元素每个 <p> 元素。
:root :root 选择文档的根元素。
:empty p:empty 选择没有子元素的每个 <p> 元素(包括文本节点)。
:target #news:target 选择当前活动的 #news 元素。
:enabled input:enabled 选择每个启用的 <input> 元素。
:disabled input:disabled 选择每个禁用的 <input> 元素
:checked input:checked 选择每个被选中的 <input> 元素。
:not(selector) :not(p) 选择非 <p> 元素的每个元素。
::selection ::selection 选择被用户选取的元素部分。
62.用CSS3编写:div旋转90度,0.5秒后变圆,0.5秒后方法两倍。
略
63.举例2种强制类型转换和1种隐式类型转换?
强制(parseInt,parseFloat,number)
隐式(== - ===)
64.split() 和join()的区别
split是将字符串切割为数组,而join是将数组连接为字符串
66.事件绑定和普通事件有什么区别
区别就是普通事件只支持单个事件,而事件绑定可以添加多个事件
67.ajax请求的时候get和post方式的区别
第一:ajax.open方法的第二个参数如果是get请求路径中是带有参数的,而post就只是路径
第二:如果是post方式在open方法和send方法之间还要设置请求的头:ajax.setRequestHeader("Content-Type", “application/x-www-form-urlencoded");
第三:ajax.send方法如果是get的话参数留空就行,而post需要将参数以序列化的格式传入
68.call和apply的区别
call和apply都是改变函数内部的this指向,第一个参数也都放的是要改变this对象,区别主要在第二个参数上,call从第二个开始放的是正常的参数,而apply放的是数组
69.事件委托是什么,使用事件委托有什么好处?
就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件。
也就是:利用冒泡的原理,把事件加到父级上,触发执行效果。
好处呢:1,提高性能。
70.如何阻止事件冒泡和默认事件
阻止事件冒泡:ie:window.event.cancelBubble=true;而非ie:e.stopPropagation();
阻止默认事件:ie:window.event.returnValue = false;return false;而非ie:e.preventDefault();
72.跨域的方法
1> document.domain + iframe (只有在主域相同的时候才能使用该方法)
2> window.name + iframe
3>html5中的postMessage()
4>CORS
5>jsonp
6>websocket
跨域支持post请求的:
1>CORS
2>window.postMessage
3>html5的websocket
4>iframe http://www.jianshu.com/p/4773501f1adf
5>flash proxy
73.编写一个数组去重的方法
Array.prototype.unique3 = function(){
var res = [];
var json = {};
for(var i = 0; i < this.length; i++){
if(!json[this[i]]){
res.push(this[i]);
json[this[i]] = 1;
}
}
return res;
}
74.Ajax请求Json数据后如何解析
第一种:使用eval
第二种:使用JSON.parse()
第三种:new Function("return" + strJSON)();
75.如何实现多标签页之间的通讯。
调用 localstorge、cookies 等本地存储方式
76.简述什么是按需加载,然后实现一个图片按需加载的js。
图片的按需加载又称为延时加载,随着用户的滚动条滑动来按需获取图片。代码略,课件中有
77.简述下闭包,有什么好处和坏处。
闭包的好处有:
1.缓存
2.面向对象中的对象
3.实现封装,防止变量跑到外层作用域中,发生命名冲突
4.匿名自执行函数,匿名自执行函数可以减小内存消耗
闭包的坏处:
1.内存消耗
2.性能差
78.什么是模块开发,怎么实现一个模块开发。
一个模块就是实现特定功能的文件,有了模块,我们就可以更方便地使用别人的代码,想要什么功能,就加载什么模块。
可以使用模块加载器比如sea.js或者require.js
79.实现一个多列的等高布局。
略
80.zoom是什么,有什么用?
Zoom属性是IE浏览器的专有属性,它可以设置或检索对象的缩放比例,比如触发ie的hasLayout属性,清除浮动、清除margin的重叠等。
81.怎么优化一个首屏的加载速度,可以从js和css等多方便考虑
可以
1.可以使用延迟加载,通过js将第二屏出现的图片设置问延迟加载,优先加载第一屏的图片,如果不想自己写js推荐一个lazyload这个插件
2.尽可能压缩图片大小,可以利用在线图片压缩工具tinypng
3.将JS放到HTML最后的地方,能最后加载,优先保证基础信息阅读。可以参考雅虎优化原则
83.怎么实现一个对象的继承。
Object.prototype.extend = function(obj){
//在函数里,把obj属性复制到自身
for(var k in obj){
if(obj.hasOwnProperty(k)){
if(this[k] == undefined){
this[k] = obj[k];
}
}
}
}
var kitty = {color:‘yellow‘,climb:function(){alert(‘我会爬树‘);}};
var tiger = {color:‘yellow and black‘};
tiger.extend(kitty);
tiger.climb();
84.简述下平时开发用到的技术栈。
作者:何幻
链接:http://www.zhihu.com/question/33179506/answer/75015013
来源:知乎
著作权归作者所有,转载请联系作者获得授权。
浏览器环境IE6~8 IE9+ Chrome Firefox Safari Opera Edge
HTTP协议URI Cache Session Cookie Request Response
HTMLW3C HTML4.01 HTML5 DOM 语义化
CSSCSS1~3 选择器 盒模型 Flex 媒体检测 响应式 渲染引擎
JavaScriptEcmaScript3~5~6 Lexical-scope prototype-chain AJAX js引擎
编辑器Emacs Vim WebStorm Atom Sublime-Text
发布部署合并 压缩 单元测试 Node.js Grunt Gulp Yeoman Phantom JSLint
框架类库jQuery Zepto UnderScore Backbone Knockout React AngularJS
模块管理CommonJS Webpack
UI框架BootStrap SemanticUI jQueryUI Foundation
推送技术WebSocket 轮询 长连接
跨域技术iframe JSONP CORS
数据可视化D3 Echarts HighCharts Canvas
异步编程Promise $.Deferred Generator
CSS预处理器LESS SASS Stylus
客户端模板Handlebars Haml Jade Mustache
相关语言CoffeeScript TypeScript Dart WebAssembly
WebApp/PCReact-native ionic
85.css选择器中,以下排序正确的为(a)
A、行内样式>id>class>标签
B、行内像是>class>id>标签
C、id>class>行内样式>标签
D、标签>class>id>行内样式
86.在JavaScript中,以下哪个变量名是非法的(b)
A、Name B、9name C、Name_a D、Name9
87.请选择结果为真的表达式(c)
A、null instance Object B、null === undefined C、null == undefined D、NaN == NaN
88.var a = new Object();
a.value = 1;
b = a;
b.value = 2;
console.log(a.value);
输出正确的是:(b)
A、1 B、2 C、undefined D、以上都不正确
89. var a = 3;
(function() {
window.a = 2
var a = 1;
})()
console.log(a)
输出为:(b)
A、1 B、2 C、3 D、undefined
91.<p>标签内的文字颜色是什么?
<style>
.classA{color:blue !important;}
.classB{color:red;}
</style>
<body>
<p class=‘classB classA’ style=‘color:green’> 123 </p>
</body>
蓝色
100.微信分享怎么实现
分为3种:
第一种使用微信默认分享,分享标题为分享页的title标签的内容,如果是分享给朋友,描述中为网页链接,分享小图标为网页中第一张符合大小的图片
第二种是使用微信的jssdk,wx.onMenuShareTimeline分享到朋友圈.和wx.onMenuShareAppMessage分享给朋友。
第三种如果是做微信广告,部署到腾讯服务器下,可以使用WeixinJSBridge调用分享接口
105.ajax出问题时怎么判断是前端的问题还是后台的
首先测试api是否能正常调用,比如可以模拟一些数据发送一下,如果是get请求就直接浏览器地址栏中拼接上然后看返回结果。在确认api调用正常的情况下,基本就可以确定是属于前端的问题。
技术方面问题:
108.如何解决在移动端1px的线比实际粗
1.设置为0.5px
2.判断如果在retina屏上就使用tranform对它进行缩放
@media screen and (-webkit-min-device-pixel-ratio: 2){
.radius-border:before{
content: "";
pointer-events: none; /* 防止点击触发 */
box-sizing: border-box;
position: absolute;
width: 200%;
height: 200%;
left: 0;
top: 0;
border-radius: 8px;
border:1px solid #999;
-webkit-transform(scale(0.5));
-webkit-transform-origin: 0 0;
transform(scale(0.5));
transform-origin: 0 0;
}
}
109.如何计算移动端rem的值
如果html的font-size为10px,2rem就是20px.
110.ajax请求到显示流程
1.创建ajax对象
2.调用open方法
3.调用send方法
4.添加onreadystatechange事件
5.判断返回的状态码是否为成功的状态码
6.通过调用ajax的responesText属性返回数据
113.向后台请求数据,有几种方式
用的最多的就是get和post.
除了这两个还有:
HEAD
类似于get请求,只不过返回的响应中没有具体的内容,用于获取报头
PUT
传说当前请求文档的一个版本
DELETE
发送一个用来删除指定文档的请求
TRACE
发送请求的一个副本,以跟踪其处理进程
OPTIONS
返回所有可用的方法;可检查服务器支持哪些方法
CONNECT
用于ssl隧道的基于代理的请求
121.以下localStroage的使用方式,哪些是正确的?abe
A.localStorage. setItem(“lastname”, “smith”);
B.document.getElementById(“result”).innerHTML=loaclStorage.getItem(“lastname”);
C.localStorage.lastname=“Smith”;
D.document.getElementByid(“result”).innerHTML=localStorage.lastname;
E.localStorage.removeItem(“lastname”);
122.以下关于Array数组对象的说法不正确的是?c
A.对数组里数据的排序可以用sort函数,如果排序效果非预期,可以给sort函数加一个排序函数的参数.
B.reverser用于对数组数据的排序排列.
C.向数组的最后位置加一个新元素,可以用pop方法.
D.unshift方法用于向数组删除第一个元素.
123.var stringArray=[“Hello”,”World”],给出您能想到的最好的方法输出”Hello, World”
stringArray.join(“,”);